When working with automated tests, there are two critical pieces:
- Selecting the right element to interact with and
- 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: 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
NOTE: This is 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.
- Next to Selector Type, Click Edit.
- The Edit Action Log window will open to the Override tab where you can make Selector Override changes.
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 drop-down menu.
- Click on the Override tab.
From the Slider View
- Open the Slider View, navigate to the step you wish to change.
- Click the Settings cog icon >> click on the Action Log button.
- 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.
JS Override Selector
Selector Overrides via Architect
Selector Overrides can also be done via Architect during test creation.
- Launch Architect.
- Open Advanced Settings >> ADV Selector tab.
- Choose from the three options: ML selector, Specify Selector, or JS Override selector.
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)
- To access Selector Snippets in Architect, click the Specify Selector radio button, then click on the </> button.
- The Insert Selector window will open the list of unique selectors to choose from.
- Click on the desired Selector from the list, it will auto-populate the Selector box.
- Selecting from the list of unique selectors does not require a validation to be performed.
- Click Save.
JS Override Selector (Architect)
- Click Save to return to ADV Selector tab.
- Click Save in ADV Selector tab before exiting Architect.