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