When working with automated tests, there are two critical pieces:
1. Selecting the right element to interact with and
2. Performing the interaction successfully (clicking, inputing text, etc)
Although we always attempt to select the correct element, websites can be constructed in countless ways where this doesn't always happen as expected (as with every tool). One of our core differentiators from every other kind of automation product is that we do not simply use a selector, or even a dozen selectors to find an element; we use hundreds of thousands of pieces of data, per step, in order to reconstruct what the user's interaction with the website is. This is how we are able to Self-Heal so robustly. Of course, there are times when the user may not want us to try to self-heal, or times when we don't execute as expected due to site changes, or particularly unusual websites. We offer three options to customize and force certain types of selection methods.
What is a Selector?
There are two types of selectors that we support: CSS and XPath. If unfamiliar with how to create selectors to select elements, we have created a video for how to create a selector directly with the Chrome Dev Tools. This method is fine as needed, but can be brittle depending on the selector. Here are a few resources for learning about how to create good selectors.
- CSS Selector Reference: https://www.w3schools.com/cssref/css_selectors.asp
- Try Out How to Use a Selector to Locate an Element here: https://www.w3schools.com/cssref/trysel.asp
- Xpath Syntax: https://www.w3schools.com/xml/xpath_syntax.asp
Again, this is just used as a backup method to the default ML-based selection. You can enter a selector to attempt to try a specific element *first* or to force that specific item to exist. Typically this is just used as a backup option.
We offer a few ways to navigate to these Selector methods.
From Test Details Expanded View
- Expand the test step view.
- See Selector Type.
- Click Edit button to automatically direct user to Override tab in Edit Action Log .
From the Actions Option in Test Step Details
- Hover over any step to reveal the Actions pencil icon. Click on the Actions icon then select Edit Action Log from the dropd down menu.
2. Click on the Override tab.
From the Slider View
- Go to the Slider View, navigate to the cog icon then click on the Action Log button.
2. Click on the Override tab.
Selector Overrides offer more control over elements that should be identified with stricter rules. See also Selector Snippets.
This is the default option that is machine learning based.
This is where you can define a specific CSS selector or XPath Selector. If this option is selected and the input selector cannot be found during execution, the search will fall back to ML selection.
When Force is checked, the test will fail during execution if the selector is not found.
Sample selectors include:
CSS selector: #popover_p4q3jyvdfh > div
XPath Selector: //*[@id="popover_p4q3jyvdfh"]
We also offer the option to auto-populate selector options, so that the user does not need to write them from scratch. A user may want to force selectors to override our self-heal behavior to ensure that a specific element is selected. In that case, instead of having to write the selector from scratch, we provide the option to select from a list of automatically populated unique selector options.
1. Select from the list of unique Selector Snippets in the dropdown menu. This will populate the Selector box with the value chosen.
2. Click Save.
JS Override Selector
When ready, click Save.
Selector Overrides via Architect
Selector Overrides can also be done via Architect during test creation.
To use this feature in Architect,
1. Launch Architect.
2. Open Advanced Settings >>ADV Selector tab. See below for reference:
3. See selector override options:
ML Selector (Architect)
*ML selector is on by default.
Specify Selector (Architect)
Choose Specify Selector radio button to identify another selector to use to locate the element.
If the input selector cannot be found, the search will fall back to ML selection. As noted above, by default Force will be unchecked. When Force is checked, the user is forcing the search to use the input Selector regardless of failure.
The example below has copied the xpath selector from Chrome dev tools for the "SHOP" text element. Once added, the user must validate that selector by clicking the Validate button. If no elements match that query selector, an error message will display. If the validation is confirmed, the element will be highlighted in a light shade of blue. See SHOP highlighted here:
Selector Snippets (Architect)
1. To access Selector Snippets in Architect, click on the </> button.
2. This will open the list of unique selectors to choose from.
3. Click on the desired Selector from the list and it will autopopulate the Selector box.
4. Selecting from the list of uniqiue selectors does not require a validation to be performed.
5. Click Save when ready.
JS Override Selector (Architect)
When ready, click Save to return to ADV Selector tab.
*Remember to click Save in ADV Selector tab before exiting Architect.