如何使用Selenium Webdriver驗證Infragistics網格上的列的排序順序

我需要驗證下面的HTML表格列的排序順序。在完整的HTML頁面中，可以單擊列標題對asc和desc進行排序。請注意，表中的數據是動態的，所以我不會知道那裏面會有什麼，並且在測試開始之前不能存儲硬編碼值。如何使用Selenium Webdriver驗證Infragistics網格上的列的排序順序

我是C＃和Selenium的初學者，所以我不知道如何驗證HTML表格的排序順序。我的測試包含了所有內容，直到驗證完成爲止。我已經有適當的代碼導航到頁面/表格，並且有代碼單擊其中一個列標題。但後來我不知道從哪裏開始如何驗證點擊後我點擊的列確實按升序排列。

我知道我可能必須存儲2個字符串數組變量。 1數組作爲列表，就像在點擊之後一樣。然後，我有一個數組，在列表中使用某種類的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>

來源

2016-04-12 Mike Johnston

當您按UI中的列進行排序時，DOM中的單元格或行元素是否會得到處理？ –

事實上，在你所提供的鏈接的辦法似乎是工作，但如果該數據的排序並不意味着列本身進行排序（它可以被初步排序）。您需要執行一些其他檢查來驗證列是否已排序。首先是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> 
 
\t <title>Sample</title> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 

 
\t <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> 
 
\t <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" /> 
 

 
\t <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> 
 
\t <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
\t <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 
 

 
\t <!-- Ignite UI Required Combined JavaScript Files --> 
 
\t <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script> 
 
\t <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script> 
 

 
\t <script type="text/javascript"> 
 
\t \t $(function() { 
 
\t \t \t var products = new Array(), i = 0; 
 
\t \t \t for (i = 0; i < 10; i++) { 
 
\t \t \t \t products.push({ 
 
\t \t \t \t \t "ProductID": i, 
 
\t \t \t \t \t "Number": i, 
 
\t \t \t \t \t "ProductDescription": "Water" + i, 
 
\t \t \t \t \t "UnitPrice": "$ " + i, 
 
\t \t \t \t \t "InStock": i % 2 === 0 
 
\t \t \t \t }); 
 
\t \t \t } 
 

 
\t \t \t $('#grid1').igGrid({ 
 
\t \t \t \t virtualization: false, 
 
\t \t \t \t autoGenerateColumns: false, 
 
\t \t \t \t dataSource: products, 
 
\t \t \t \t columns: [ 
 
\t \t \t \t \t { headerText: "ProductID", key: "ProductID", width: "200px", dataType: "number" }, 
 
\t \t \t \t \t { headerText: "Number", key: "Number", width: "200px", dataType: "number" }, 
 
\t \t \t \t \t { headerText: "Description", key: "ProductDescription", width: "200px", dataType: "string" }, 
 
\t \t \t \t \t { headerText: "InStock", key: "InStock", width: "200px", dataType: "bool" } 
 
\t \t \t \t ], 
 
\t \t \t \t features: [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t name: "Sorting" 
 
\t \t \t \t \t } 
 
\t \t \t \t ], 
 
\t \t \t \t primaryKey: "ProductID" 
 
\t \t \t }); 
 
\t \t }); 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <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 
     } 
    } 
}

請記住，這僅僅是示例。只要滿足您的需求，您可以隨意修改它。

來源

2016-04-14 12:29:06

如何使用Selenium Webdriver驗證Infragistics網格上的列的排序順序

回答

相關問題