How do I interact with the elements in a table or list the way I intended?

Let's say you're creating a scenario. You've recorded an action against an element at the top of a table, and the element contains the text "test0001". Later, a new record is added and "test0001" is moved to the second row. Now, the first row is "test0002". When you run the scenario, Autify may target the "test0001" element in the second row, which is not what you intended.

If the intended action is to always click the newest record at the top of the table, the test may fail in a subsequent step.

Currently, if you want to ensure that Autify targets the top, Nth, or bottom element in a list or table, you must use the Locator feature.

Below are some examples of CSS selectors/XPaths that you can set as the Locator. Please note that the CSS selectors/XPaths shown in this article are examples. Be sure to check the actual structure of your site and create an appropriate CSS selector/XPath.

Target the Nth Element With a CSS Selector

If you want to target the Nth element with a CSS selector, you can use the following syntax:

• Nth

:nth-child(N)

• First

:first-child

• Last

:last-child

If you want to target the second item in a list, you can use the following syntax:

ul > li:nth-child(2)

Target an Element in the Nth Row, Mth Column of a Table

To target an item in a table, you must specify the row and column; the tr tag represents the row and the td tag represents the column. Specify the row and column of the element you want to access. The following is a CSS selector that gets the element in the first row of the first column. If the table has the most recent data at the top, this CSS selector will always target the most recent data.

table > tbody > tr:first-child > td:first-child

In the example table below, the element in the red box is the target.

The target element in the red box is a td element, but under this element is a link created with the a tag. If you want to click on this link, add a to the end of the CSS selector.

table > tbody > tr:first-child > td:first-child a

You can also target the last column. To do this, change td:first-child to td:last-child, as shown below.

table > tbody > tr:first-child > td:last-child

Target a Specific Column of a Table Where a Row Contains a Specific Text

Instead of specifying the Nth row/Mth column, you may want to target a specific column, in the row that contains a specific text. For example, below is a table of Autify Scenarios. To target the last element in the row with the scenario name "test0001", you can use the following XPath:

//table/tbody/tr[td//*[text()='test0001']]/td[6]

The target is the td element in the green box:

The target element is a td element, and under this element, there is a menu icon inside a button tag. If you want to target this button tag, change the XPath as follows:

//table/tbody/tr[td//*[text()='test0001']]/td[6]//button

If the text you want to find is not the same each time and is randomly generated for each test run using a JS Step or a dynamic value, you will need to use a JS Step. Get the string you want to find, which was created as an argument in another step, and use it in the following JS Snippet:

• Search for text in a table and operate the specific column of the found row.