2016-04-12 17 views
1

以下のHTML表の列のソート順を確認する必要があります。完全なHTMLページでは、列ヘッダーをクリックしてascとdescをソートすることができます。テーブル内のデータは動的なので、テストの開始前にハードコードされた値を格納するだけで、そこに何があるのか​​を常に知ることはできません。Selenium Webdriverを使用してInfragisticsグリッドの列のソート順を確認する方法

私はC#とSeleniumの初心者ですので、HTMLテーブルのソート順を確認する方法はわかりません。私のテストには、ソートの検証まですべてが含まれています。私はすでにページ/テーブルに移動するためのコードを用意しており、列見出しの1つをクリックするコードも用意しています。しかし、クリックした列が実際にクリック後に昇順にソートされたことを確認する方法をどこから始めるべきかわかりません。

おそらく2つの文字列配列変数を格納する必要があることは知っています。 1の配列をクリックした後のリストとして表示します。それから私はリストを取って、何らかのC#クラスを使ってソートします。次に比較を行います。しかし、私はちょうどC#を学んでいるので、誰かがセレンと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

UIの列で並べ替えると、DOM内のセルまたは行要素が使用されますか? –

答えて

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

これは単なる例であることに注意してください。あなたのニーズに合っていれば、あなたはそれを変更することができます。

関連する問題