Add a locator to specify an element
  • 17 Jul 2024
  • 2 Minutes to read
  • Contributors
  • Dark

Add a locator to specify an element

  • Dark

Article summary

Autify Maintenance AI makes a comprehensive judgment based on the multiple features of an element to find the element that has the best match with the one that was selected in the last test or recording. It can continue to select elements even when there are changes in the website.

On the other hand, there could be a situation where you may want to select a specific element to click, input, or make an assertion without relying on AI.

For example:

  • In a list or table where the data changes every time the test is executed, you want to always select the Nth element of the list or table.
  • You want to specify an element that always has a specific attribute (class, ID, etc.) without being affected by other features of the element.
  • It is common for AI to misjudge an element due to the following reasons:
    • There are multiple elements that have the same class, id, or other attributes.
    • The element does not have any class, id, or other attributes to characterize itself.
    • The values of attributes such as class and id assigned to an element change frequently.

In such cases, you can use the [Locator].
The locator is available to select elements using [CSS Selector] or [XPath].
Please use either one depending on the test.

How to use [Locator]

1. Record a [Scenario].

2. Open the details of the step for which you want to use the [Locator], and click [Add a locator].
スクリーンショット 2023-07-05 111706.png

3. Select [CSS Selector] or [XPath] from the pull-down menu.
スクリーンショット 2023-07-05 111751.png

4. Fill in the [CSS selector] or [XPath] for the element on the page to be tested in the field.
スクリーンショット 2023-07-05 111958.png

If an invalid value is set, an error message will be displayed.
スクリーンショット 2023-07-05 111859.png

スクリーンショット 2023-07-05 111923.png

Here are some examples of CSS selectors.

ElementCSS selector
A <div> element with the data-test attribute 'abc'div[data-test='abc']
A <span> element with class 'caution' which is a direct child of <p> element with ID attribute 'def'.p#def > span.caution
The first <li> item directly under the <ul> element with the 'sample-list' classul.sample-list > li:first-child
A <a> element with the href attribute ''a[href='']

The key is to use CSS selectors that are as short as possible and uniquely identify the element.

Things to note on using the [Locator]

  • Steps using [Locator] function are not maintainable by AI. Use the [locator] function only where it is necessary to select the intended element.
  • If more than one element corresponds to a given CSS selector/XPath, the first element will be selected.
  • If no element is found that corresponds to the specified CSS selector/XPath, the step will fail.
  • About elements in the ShadowDOM
    • CSS selector: it can be selected by specifying the elements in the shadow-root. However, if an element matching the specified CSS selector is found in the normal DOM, the element in the normal DOM will be selected.
    • XPath: It can’t select an element inside of a ShadowDOM.

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.