So überprüfen Sie die Sortierreihenfolge von Spalten in einem Infragistics-Raster mithilfe von Selenium Webdriver

Ich muss die Sortierreihenfolge der folgenden HTML-Tabellenspalten überprüfen. In der vollständigen HTML-Seite können die Spaltenüberschriften angeklickt werden, um asc und desc zu sortieren. Beachten Sie, dass die Daten in der Tabelle dynamisch sind. Daher weiß ich nicht immer, was dort drin sein wird und kann nicht einfach fest codierte Werte speichern, bevor der Test beginnt.So überprüfen Sie die Sortierreihenfolge von Spalten in einem Infragistics-Raster mithilfe von Selenium Webdriver

Ich bin ein Anfänger mit C# und Selen, also weiß ich nicht, wie Sortierreihenfolge einer HTML-Tabelle zu überprüfen ist. Mein Test enthält alles bis zur Überprüfung der Art. Ich habe bereits Code, um zur Seite/Tabelle zu navigieren, und habe auch Code, der auf einen der Spaltenköpfe klickt. Aber dann weiß ich nicht, wo ich anfangen soll zu überprüfen, dass die Spalte, auf die ich geklickt habe, tatsächlich aufsteigend nach dem Klick sortiert hat.

Ich weiß, dass ich wahrscheinlich 2 String-Array-Variablen speichern muss. 1 Array als Liste, so wie nach dem Klick. Dann 1 Array, wo ich die Liste nehme und sie mit einer C# -Klasse irgendeiner Art sortiere. Dann vergleiche. Aber ich lerne gerade C#, also kann mir jemand helfen, Selens und C# zu erreichen.

Ich habe etwas gefunden, das ähnlich ist, was ich erreichen muss (http://grokbase.com/t/gg/selenium-users/125g89zssv/selenium-webdriver-how-to-verify-whether-list-containing-rows-from-a-table-is-sorted), aber ich denke, dass in Java codiert ist.

<!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>

Quelle

2016-04-12 Mike Johnston

Werden die Zellen- oder Zeilenelemente im DOM neu sortiert, wenn Sie nach einer Spalte in der Benutzeroberfläche sortieren? –

Tat der Ansatz in der Verbindung scheint Ihnen zur Verfügung gestellten zu arbeiten, aber wenn die Daten sortiert ist, bedeutet nicht, dass die Säule selbst sortiert ist (es zunächst sortiert werden könnte). Es gibt einige andere Überprüfungen, die Sie durchführen müssen, um zu überprüfen, ob die Spalte sortiert ist. Zuerst sind die UI-Teile - die Reihenfolge der Daten (um die Sortierrichtung zu bestimmen, ist aufsteigend oder absteigend), das richtige Styling der Zellen, das richtige Styling der Header-Zelle, der richtige Indikator. Zweitens sollten Sie überprüfen, ob der korrekte Ausdruck im Datenquellenobjekt hinzugefügt wurde. Ich habe einen einfachen Testfall mit einer Testseite vorbereitet, um die Dinge zu demonstrieren, von denen ich rede. Dies ist der Code der Testseite - ein einfaches Raster mit aktivierter Sortierung.

<!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>

Und dies ist der Code des Tests selbst.

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 
     } 
    } 
}

Beachten Sie, dass dies nur ein Beispiel ist. Sie können es so lange ändern, wie es Ihren Bedürfnissen entspricht.

Quelle

2016-04-14 12:29:06

So überprüfen Sie die Sortierreihenfolge von Spalten in einem Infragistics-Raster mithilfe von Selenium Webdriver

Antwort

Verwandte Themen