Customizing Tests with Selectors

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)

Why Selectors? 

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. 

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.

Selection Methods

We offer a few ways to navigate to these Selector methods. 

From Test Details Expanded View

  1. Expand the test step view.
  2. Next to Selector Type, Click Edit.
    mceclip0.png
  3. The Edit Action Log window will open to the Override tab where you can make Selector Override changes.
    mceclip1.png

OR

From the Actions Option in Test Step Details

  1. 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.
    mceclip1.png
  2. Click on the Override tab.
    mceclip2.png

OR

From the Slider View

  1. Open the Slider View, navigate to the step you wish to change.
  2. Click the Settings cog icon >> click on the Action Log button.
    mceclip3.png
  3. Click on the Override tab.
    mceclip3.png

 

Selector Overrides

Selector Overrides offer more control over elements that should be identified with stricter rules. See also Selector Snippets.

ML selection 

This is the default option that is machine learning based.

Selector

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"]

mceclip4.png

Selector Snippets

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.
mceclip5.png

JS Override Selector

Sometimes a basic selector is not enough to find an element on the page. In some scenarios you may want to calculate what to select or look for something that may not just jump around on the page, but change every time! Examples could range from drastically different A/B behavior to data that needs to be calculated. In these cases, we support JavaScript to allow you to select the element. Simply return the element you'd like to select. The default code in Architect supports the element that you have selected in comments as a starting point.
mceclip0.png

Selector Overrides via Architect

Selector Overrides can also be done via Architect during test creation.

  1. Launch Architect.
  2. Open Advanced Settings >> ADV Selector tab.
  3. Choose from the three options: ML selector, Specify Selector, or JS Override selector.
    mceclip6.png

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:

mceclip9.png

Selector Snippets (Architect) 

  1. To access Selector Snippets in Architect, click the Specify Selector radio button, then click on the </> button.
    mceclip10.png
  2. The Insert Selector window will open the list of unique selectors to choose from.
    mceclip11.png
  3. Click on the desired Selector from the list, it will auto-populate the Selector box.
    mceclip12.png
  4. Selecting from the list of unique selectors does not require a validation to be performed.
  5. Click Save.

JS Override Selector (Architect) 

  1. Choose JS Override Selector radio button to use a JavaScript selector.
    mceclip5.png
  2. Either click the Edit button or click directly into the field to input the JS selector. Functionize offers dynamic code here to assist in a JavaScript Override if there is ever an element selection issue.
    mceclip8.png
  3. Input JavaScript to select the element used in this action. The example below has copied the JS path selector into the JavaScript Override field. This must return the JavaScript element that the script should interact with. Click Validate button to confirm the element is present.
    mceclip7.png
  4. Click Save to return to ADV Selector tab.
  5. Click Save in ADV Selector tab before exiting Architect.