Add a locator to specify an element
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.
- 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].
3. Select [CSS Selector] or [XPath] from the pull-down menu.
4. Fill in the [CSS selector] or [XPath] for the element on the page to be tested in the field.
If an invalid value is set, an error message will be displayed.
Here are some examples of CSS selectors.
|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' class||ul.sample-list > li:first-child|
|A <a> element with the href attribute 'https://autify.com'||a[href='https://autify.com']|
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.