How do I interact with the elements in a table or list the way I intended?
  • 24 Aug 2023
  • 2 Minutes to read
  • Contributors
  • Dark
    Light

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

  • Dark
    Light

Article summary

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.

moved_record

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.

td_a

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:

td_with_specific_text

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:


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.