C# / ATATA / Selenium: Using ControlList to store multiple tables

Question

I am authoring a Page Object for my company that represents a HTML page which contains many tables (and is badly structured). I am only interested in certain tables on this page, and would like to have a single table to reference on my Page Object for simplicity.

Problems

1. This page is dynamic and loads various amounts of tables.
2. The "displayed table" of a single workflow is split into 3 tables in HTML.
   1. Table 1 contains the unique identifier.
   2. Table 2 contains buttons I am not concerned with.
   3. Table 3 (wrapped in a div) contains the actual table data I need to retrieve.
3. Tables are not organized, grouped, or nested in any fashion.
   1. Only organization is the repeating flat structure of the "displayed table". Structure does not change (generated from ASP.Net)

Goals

1. Have a ControlList that represents each of the "displayed tables".
2. Stick with ATATA (I have a Selenium solution for this, but the majority of our Page Objects use ATATA and do not want to deviate)
3. Store the Name of the Workflow as a variable on each of the Table objects (WorkflowName variable)

Here is an abstraction of the HTML code I am working with.

<div>
  <table> <!-- Start of Displayed Table. Shows as a single row header -->
    <tbody>
      <tr>
        <td>
          <h2 id='WorkflowHeader'> Workflow Identifier </h2>
        </td>
      </tr>
    </tbody>
  </table>
  <table> 
    <!-- This table contains buttons that I am not concerned with -->
  </table>
  <div>
    <table> <!-- Start of multi row table that contains data to be retrieved -->
      <tr>
        <td>Value I want in a table</td>
        <td>Value I want in a table</td>
      </tr>
    </table>
  <br /> <!-- End of "Displayed Table" -->
  <!-- The above structure repeats for every Workflow type. basic structure below -->
  <table></table>
  <table></table>
  <div>
    <table></table>
  </div>
  <br />
  <!-- Basic repeating table structure above -->
</div>

In my ATATA Page Object, I have the following:

using Atata;
using _ = ProjectNameSpace.WorkflowPageObject;

namespace ProjectNameSpace
{
    public class WorkflowPageObject : Page<_>
    {    
        public ControlList<WorkflowTable, _> WorkflowTables { get; private set; }

        [ControlDefinition("h2[contains(@id, 'WorkflowHeader')]/../../../../following-sibling::div/table", ComponentTypeName = "table")]
        public class WorkflowTable: Table<WorkflowRow, _>
        {
          [FindByXPath("h2[contains(@id, 'WorkflowHeader')]")]
          public H2<_> WorkflowName { get; private set; }
        }

        [ControlDefinition("h2[contains(@id, 'WorkflowHeader')]/../../../../following-sibling::div/table/tbody/tr"), ComponentTypeName = "row")]
        public class WorkflowRow: TableRow<_>
        {
            [FindByColumnHeader(HeaderName1)]
            public Content<string, _> TableData1 { get; private set; }

            [FindByColumnHeader(HeaderName2)]
            public Content<string, _> TableData2 { get; private set; }

            [FindByColumnHeader(HeaderName3)]
            public Content<string, _> TableData3 { get; private set; }

            [FindByColumnHeader(HeaderName4)]
            public Content<string, _> TableData4 { get; private set; }

            [FindByColumnHeader(HeaderName5)]
            public Content<string, _> TableData5 { get; private set; }

            [FindByColumnHeader(HeaderName6)]
            public Content<string, _> TableData { get; private set; }
        }
    }
}

When I get to this page and attempt to access any of the TableData, I get the following error:

{"Unable to locate element: By.XPath: (.//h2[contains(@id, 
'WorkflowHeader')]/../../../../following-sibling::div/table/tbody/tr) 
[1]\r\nContext element:\r\nTag: table\r\nLocation: {X=X,Y=Y}\r\nSize: 
{Width=Width, Height=Height}\r\nText: HeaderName1 HeaderName2 HeaderName3 
HeaderName4 HeaderName5 HeaderName6\r\nTableData1 TableData2 TableData3 
TableData4 TableData5 TableData6"}

I feel like I am not using the ControlDefinitions correctly. My XPath is sound and is returning multiple elements. If I extract the XPath that is being used to find the element and use AtataContext.Current.Driver.FindElementsByXPath(".//h2[contains(@id, 'WorkflowHeader')]/../../../../following-sibling::div/table/tbody/tr")[1] the correct rows are returned.

Note: This code was obfuscated and any misspellings of variables or typos are most likely due to hand typing portions of code in this post. The code builds and runs.

Any help is greatly appreciated.

Answer 1

I assume that you don't need ControlDefinition at WorkflowRow class. Just remove it and try. When you do find rows of table it is already scoped to appropriate <table> element and looks for the children (rows) inside that element, not the whole page.

I can also recommend you to update ControlDefinition of WorkflowTable to the following:

[ControlDefinition("table[.//h2[contains(@id, 'WorkflowHeader')]]", ComponentTypeName = "table")]