我需要验证以下HTML表格列的排序顺序。在完整的HTML页面中，可以单击列标题以对asc和desc进行排序。请注意，表中的数据是动态的，因此我不会总是知道其中的内容，并且不能在测试开始之前简单地存储硬编码值。
我是C＃和Selenium的初学者，所以我不知道如何验证HTML表的排序顺序。我的测试包含所有内容，直到验证排序。我已经有代码可以导航到页面/表格，并且还有代码点击其中一个列标题。但后来我不知道从哪里开始如何验证我点击的列确实在点击后按升序排序。
我知道我可能需要存储2个字符串数组变量。单击一个数组作为列表，单击后。然后是一个数组，我在其中列出并使用某种类型的C＃类对其进行排序。然后做一个比较。但我只是学习C＃，所以有人可以帮我解决如何使用Selenium和C＃实现这一目标。
我发现了类似于我需要完成的事情（http://grokbase.com/t/gg/selenium-users/125g89zssv/selenium-webdriver-how-to-verify-whether-list-containing-rows-from-a-table-is-sorted），但我认为这是用Java编写的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" data-bind="igGrid: gridOptions" id="ap-orgconfig-orgs" aria-multiselectable="false" role="grid" class="ui-iggrid-table ui-widget-content" aria-describedby="ap-orgconfig-orgs_container" style="table-layout: fixed; overflow: hidden;">
<colgroup>
<col style="width: 50%;">
<col style="width: 25%;">
<col style="width: 25%;">
</colgroup>
<thead role="rowgroup">
<tr role="row" data-header-row="">
<th id="ap-orgconfig-orgs_Name" role="columnheader" aria-label="Name" tabindex="0" class="ui-iggrid-header ui-widget-header ui-iggrid-sortableheader ui-state-default" title="Sort column">
<div data-resizinghandle="true" style="position: relative; width: 100%; height: 0px; top: 0px; left: 0px;">
<a title="">
<span data-nonpaddedindicator="right" title="" style="position: absolute; margin-right: -6px; right: 0px; width: 5px;" class="ui-iggrid-resizing-handle-cursor ui-iggrid-resizing-handle">
</span></a>
</div>
<span class="ui-iggrid-headertext">Name
</span>
<span class="ui-iggrid-colindicator">
</span>
</th>
<th id="ap-orgconfig-orgs_ShortName" role="columnheader" aria-label="Display Name" tabindex="0" class="ui-iggrid-header ui-widget-header ui-iggrid-sortableheader ui-state-default" title="Sort column">
<div data-resizinghandle="true" style="position: relative; width: 100%; height: 0px; top: 0px; left: 0px;">
<a title="">
<span data-nonpaddedindicator="right" title="" style="position: absolute; margin-right: -6px; right: 0px; width: 5px;" class="ui-iggrid-resizing-handle-cursor ui-iggrid-resizing-handle">
</span></a>
</div>
<span class="ui-iggrid-headertext">Display Name
</span>
<span class="ui-iggrid-colindicator">
</span>
</th>
<th id="ap-orgconfig-orgs_Type" role="columnheader" aria-label="Type" tabindex="0" class="ui-iggrid-header ui-widget-header ui-iggrid-sortableheader ui-state-default" title="Sort column">
<div data-resizinghandle="true" style="position: relative; width: 100%; height: 0px; top: 0px; left: 0px;">
<a title="">
<span data-nonpaddedindicator="right" title="" style="position: absolute; margin-right: -6px; right: 0px; width: 5px;" class="ui-iggrid-resizing-handle-cursor ui-iggrid-resizing-handle">
</span></a>
</div>
<span class="ui-iggrid-headertext">Type
</span>
<span class="ui-iggrid-colindicator">
</span>
</th>
</tr>
</thead>
<tbody role="rowgroup" class="ui-widget-content ui-iggrid-tablebody ui-ig-record ui-iggrid-record">
<tr tabindex="0" role="row" data-id="05f1e963-5a94-47d0-b9c0-3019906d0b25">
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_Name" aria-readonly="false" role="gridcell" class="">QA Test Organization</td>
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_ShortName" aria-readonly="false" role="gridcell" class="">QA-ORG</td>
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_Type" aria-readonly="false" role="gridcell" class="">Consumer</td>
</tr>
<tr tabindex="0" role="row" data-id="bb0d84aa-856b-4b89-a380-63bca7a0133f" class="ui-ig-altrecord ui-iggrid-altrecord">
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_Name" aria-readonly="false" role="gridcell" class="">The CIA Network </td>
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_ShortName" aria-readonly="false" role="gridcell" class="">CIANyde</td>
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_Type" aria-readonly="false" role="gridcell" class="">Network</td>
</tr>
<tr tabindex="0" role="row" data-id="fb311950-5aa2-4124-b69c-026d47e94e73" class="" aria-selected="true">
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_Name" aria-readonly="false" role="gridcell" class="ui-iggrid-selectedcell ui-state-active">The Mockingbird Network</td>
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_ShortName" aria-readonly="false" role="gridcell" class="ui-iggrid-selectedcell ui-state-active">AgitProp</td>
<td tabindex="0" aria-describedby="ap-orgconfig-orgs_Type" aria-readonly="false" role="gridcell" class="ui-iggrid-selectedcell ui-state-active">Network</td>
</tr>
</tbody>
<tfoot class="" role="rowgroup" id="ap-orgconfig-orgs_footer_container" style="display: none;">
</tfoot>
</table>
</body>
</html>
答案 0 :(得分：1)
实际上，您提供的链接中的方法似乎正在起作用，但如果数据已排序并不意味着列本身已排序（可能最初排序）。您需要执行几项其他检查才能验证列是否已排序。首先是UI部分 - 数据的顺序（确定排序方向是上升还是下降），单元的正确样式，标题单元的正确样式，正确的指示符。其次，您应该检查数据源对象中是否添加了正确的表达式。我准备了一个带有测试页面的简单测试用例来演示我正在谈论的事情。 这是测试页面的代码 - 一个启用了排序的简单网格。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>
<script type="text/javascript">
$(function () {
var products = new Array(), i = 0;
for (i = 0; i < 10; i++) {
products.push({
"ProductID": i,
"Number": i,
"ProductDescription": "Water" + i,
"UnitPrice": "$ " + i,
"InStock": i % 2 === 0
});
}
$('#grid1').igGrid({
virtualization: false,
autoGenerateColumns: false,
dataSource: products,
columns: [
{ headerText: "ProductID", key: "ProductID", width: "200px", dataType: "number" },
{ headerText: "Number", key: "Number", width: "200px", dataType: "number" },
{ headerText: "Description", key: "ProductDescription", width: "200px", dataType: "string" },
{ headerText: "InStock", key: "InStock", width: "200px", dataType: "bool" }
],
features: [
{
name: "Sorting"
}
],
primaryKey: "ProductID"
});
});
</script>
</head>
<body>
<table id="grid1"></table>
</body>
</html>
这是测试本身的代码。
using System;
using System.Text;
using System.Collections.Generic;
using System.Linq;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium.IE;
using OpenQA.Selenium.Remote;
using OpenQA.Selenium;
using OpenQA.Selenium.Interactions;
using OpenQA.Selenium.Support.UI;
using OpenQA.Selenium.Chrome;
using System.Reflection;
using System.IO;
using System.Collections.ObjectModel;
namespace VerifySorting
{
/// <summary>
/// Summary description for UnitTest1
/// </summary>
[TestClass]
public class UnitTest1
{
public UnitTest1()
{
//
// TODO: Add constructor logic here
//
}
private TestContext testContextInstance;
private RemoteWebDriver driver;
/// <summary>
///Gets or sets the test context which provides
///information about and functionality for the current test run.
///</summary>
public TestContext TestContext
{
get
{
return testContextInstance;
}
set
{
testContextInstance = value;
}
}
#region Additional test attributes
//
// You can use the following additional attributes as you write your tests:
//
// Use ClassInitialize to run code before running the first test in the class
// [ClassInitialize()]
// public static void MyClassInitialize(TestContext testContext) { }
//
// Use ClassCleanup to run code after all tests in a class have run
// [ClassCleanup()]
// public static void MyClassCleanup() { }
//
// Use TestInitialize to run code before running each test
// [TestInitialize()]
// public void MyTestInitialize() { }
//
// Use TestCleanup to run code after each test has run
[TestCleanup()]
public void MyTestCleanup() {
this.driver.Quit();
}
#endregion
[TestMethod]
public void ChromeDriverTest()
{
ChromeOptions chromeOptions = new ChromeOptions();
string name = Assembly.GetExecutingAssembly().Location;
string dir = Path.GetDirectoryName(name);
int index = 0;
bool isAsc = true, isDesc = true;
string expr;
#region Driver instantiation and navigation to the test page
RemoteWebDriver driver = new ChromeDriver(dir + "\\..\\..\\driver", chromeOptions);
this.driver = driver;
driver.Navigate().GoToUrl(dir + "\\..\\..\\page.htm");
#endregion // Driver instantiation and navigation to the test page
#region Finding elements on page and sorting
IWebElement grid = driver.FindElementById("grid1");
IWebElement thead = grid.FindElement(By.TagName("thead"));
ReadOnlyCollection<IWebElement> ths = thead.FindElements(By.XPath("tr/th"));
ths[index].Click();
IWebElement tbody = grid.FindElement(By.TagName("tbody"));
ReadOnlyCollection<IWebElement> trs = tbody.FindElements(By.TagName("tr"));
List<IWebElement> tds = new List<IWebElement>();
for (int i = 0; i < trs.Count; i++)
{
tds.Add(trs[i].FindElement(By.XPath("td[" + (index + 1) + "]")));
}
#endregion // Finding elements on page and sorting
#region Verification of the sort order
int count = tds.Count;
for (int i = 1; i < count; i++)
{
if (tds[i - 1].Text.CompareTo(tds[i].Text) < 0)
{
isDesc = false;
break;
}
}
for (int i = 1; i < count; i++)
{
if (tds[i - 1].Text.CompareTo(tds[i].Text) > 0)
{
isAsc = false;
break;
}
}
Assert.IsTrue(isAsc || isDesc, "The column is not sorted.");
#endregion // Verification of the sort order
#region UI verifications
expr = driver.ExecuteScript("return $('#grid1').data('igGrid').dataSource.settings.sorting.expressions[0].dir").ToString();
if (isAsc)
{
Assert.IsTrue(expr == "asc");
Assert.IsTrue(ths[index].GetAttribute("title") == "Sorted ascending");
Assert.IsTrue(ths[index].GetAttribute("class").Contains("ui-iggrid-colheaderasc"));
Assert.IsTrue(ths[index].GetAttribute("class").Contains("ui-iggrid-sortableheader"));
Assert.IsTrue(ths[index].FindElement(By.XPath("div/span")).GetAttribute("class").Contains("ui-iggrid-colindicator-asc"));
for (int i = 0; i < tds.Count; i++)
{
Assert.IsTrue(tds[i].GetAttribute("class").Contains("ui-iggrid-colasc ui-state-highlight"));
}
}
if (isDesc)
{
Assert.IsTrue(expr == "desc");
Assert.IsTrue(ths[index].GetAttribute("title") == "Sorted descending");
Assert.IsTrue(ths[index].GetAttribute("class").Contains("ui-iggrid-colheaderdesc"));
Assert.IsTrue(ths[index].GetAttribute("class").Contains("ui-iggrid-sortableheader"));
Assert.IsTrue(ths[index].FindElement(By.XPath("div/span")).GetAttribute("class").Contains("ui-iggrid-colindicator-desc"));
for (int i = 0; i < tds.Count; i++)
{
Assert.IsTrue(tds[i].GetAttribute("class").Contains("ui-iggrid-coldesc ui-state-highlight"));
}
}
#endregion // UI verifications
}
}
}
请记住，这只是一个例子。只要符合您的需要，您就可以像对它一样对其进行修改。