Custom Table Mapping
On websites, tables can be constructed with a variety of HTML tags. Typically, these include tags such as <table>, <tr> for rows, and <td> for columns. However, other tags, such as <div>, can be used to create the appearance of a table for a user. These permutations can make the testing of tables challenging.
If you attempt to test data within a table using simple locators for the individual cells, this will usually lead to brittle and high-maintenance tests. The reasons for this include the following:
- Tables can be re-sorted, resulting in the unique row of data in the table having a new locator
- The data in the table can be unique each time you visit the web page, producing different HTML
- Table HTML can be very repetitive, making it challenging to find an element
Defining a custom table is a one-time activity. Once completed, it can reduce future maintenance on brittle locators.
Access world-class customer support at the Provar Success Portal
If you face any issues when mapping a particular table, please get in touch with us, and we would be happy to help. To raise a case, simply log into the Provar Success Portal and click View/Raise Case. Providing ongoing support is part of our promise to help you deliver robust, scalable, and repeatable testing to achieve release agility, drive down system errors, and get the maximum return on your Salesforce investment. Please contact us for more information.
Add table mapping
First, create a Selenium UI connection using UI Connect to follow this example. The example below is taken from the HTML Tables page on w3schools.com.
To construct a custom table in Automation, select Add a Table Mapping from the Test Palette in Test Builder.
This will display a few fields which can be used to define a table.
How to complete the fields
There are two methods to complete the data to define a table.
Option A: Choose the Start Selection button next to Table Locator. This is highlighted in red in the screenshot above. 
Option B: Inspect the HTML using right-click and Inspect in Chrome.
Add Table Mapping Start Selection
Step 1: Launch Test Builder and navigate to the table in your browser.
Step 2: Select the Start Selection option, and the icon color will change to blue.
Step 3: Click on the table’s first cell and drag it to a cell on the outer limits. This does not need to be in the final row but should include the final column.
Step 4: If successful, you should see the cells in red. Automation cannot work out some table XPaths. You will need to inspect the HTML to fill out the fields. See the Understanding table mapping in page objects support article to help you define those types of tables.
Note: The fields for Add Table Mapping should not be populated with XPaths.
Step 5: If you are familiar with XPaths, you can verify what Automation has derived. You may update the XPaths manually.
Step 6: Add a Table Name and click Add. Automation will now write this definition into the page object you have selected, and no test step has been added. Ensure that the new page name is set to a unique name, or select the existing page object if one exists already.
Add Columns to the table.
It is necessary to select each column one at a time.
Step 1: Map the first column you want to reference in your test. Choose the data row, not the header row. If the table definition was successful, you will notice that the table is mentioned in Test Builder. If an incorrect page object is defaulted, select the correct existing one from the drop-down menu.
Step 2: Now, we need to add the relative XPath for the column. The initial XPath presented will usually need amending to refer to all elements in that column. In the example below, this means removing the text from the XPath and adding 1 to signify the first <td>.
Test Builder will assist using highlighting. If the column you are mapping is fully highlighted in red, that is correct.
Before
After modifying the field locator
Step 3: Provide a Field Name and choose Add and Do. This will add a test step called With Row to the test case, plus a nested test step referring to the column. You should expect a warning message that the XPath matches multiple elements.
What does With Row do?
The With Row test step will identify which row to interact with. When you first add the step, it will default to Row Number 1. You will most likely want to update this. Otherwise, you will constantly interact with the first row of the table. To update this, you can edit the With Row test step in Test Builder or Automation.
In the image above, you’ll notice that 1 is listed in the Row Locator field. This can be replaced with a comparison statement enclosed with curly braces {}. The comparison is typically:
{ColumnName = 'Island Trading'}
Or, if using a local variable, use a dollar sign ahead of that variable.
{ColumnName = $IslandTrainingVariable}
When the With Row is executed, it will search the full table to match the criteria. Once located, it knows that all child test steps will only operate on that row of data. If you want to test the comparison, update the Row Locator and choose Step Backwards to rerun the test steps.
To complete the table mapping, keep adding the columns you require.
Check out the Understanding Table Mappings support article to become familiar with the Java syntax Automation used to persist the table definition.