Add a locator to specify an element

Autify's 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 maintenance AI.

For example:

• 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 a list where the data changes every time the test is executed, you want to always select the Nth element (including the first and last) of the list.
• You want to specify an element that always has a specific attribute (class, ID, etc.) without being affected by other features of the element.

In such cases, you can use the [Locator] function.

How to use [Locator] function

Usage

1. Record a [Scenario].

2. Open the details of the step for which you want to use the [Locator] function, and click [Add a locator].

3. Enter a CSS selector for the element on the page to be tested in the [CSS Selector] field.

Tips on CSS selectors

If you use Chrome Developer Tools, the general way to get the CSS selector is as follows:

1. On the page to be validated, right-click on the element for which you want to get the CSS selector.
2. Select [Inspect] from the context menu
3. Right-click on the highlighted element in the Developer Tools
4. Select [Copy] -> [Copy selector] from the context menu

Here are some examples of CSS selectors.

The key is to use CSS selectors that are as short as possible and uniquely identify the element. For more information on CSS selectors, please refer to the MDN documentation below.

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Selectors

Things to note on using the [Locator] function

• 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, the first element will be selected.
• If no element is found that corresponds to the specified CSS selector, the step will fail.
• Elements in the Shadow DOM can also be selected using [Locator] function by specifying a CSS selector 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.
• Elements in iframes cannot be selected by [Locator] function. Please use the JS step instead.

If you find it difficult to select the desired element using [Locator] function, or if you have any questions, please feel free to contact our support team!

Related articles

• What does Autify Maintenance AI do?
• What does [Review Needed] mean?