Customizing Tests with Selectors

Customizing Tests with Selectors

When working with automated tests, there are two critical pieces:

• Selecting the right element to interact with during automated test execution
• Performing the interaction successfully (clicking, inputting text, etc)

 

Why Selectors? 

Although we always strive to select the correct element, websites can be constructed in countless ways where this doesn't always happen as expected (as is the case with any test automation tool). One of our core differentiators from every other kind of test automation tool is that we do not simply use a selector, or even a dozen selectors, to find an element; we utilize hundreds of thousands of pieces of data per step to reconstruct the user's interaction with the website. This is how we are able to self-heal so robustly. Of course, there are times when the user may not want us to attempt self-healing, or occasions when we do not execute as expected due to site changes or particularly unusual websites. We offer three options to customize and enforce certain types of selection methods:

• ML Select (Default): uses Functionize's AI machine learning-based selection with hundreds of thousands of pieces of data per test action
• Selector: uses hard coded CSS or XPath selectors for element selection, if used then self-healing is not available for specific action
• JS Override Selector: gives the user the ability to hard code a custom JS selector for element selection, if used then self-healing is not available for specific action

 

What is a Selector?

There are two types of selectors that we support: CSS and XPath. If you are unfamiliar with how to create selectors to select elements, we have created a video titled 'How to Create a Selector Directly with the Chrome Dev Tools' feature. This method is suitable as needed but can be brittle depending on the selector.

Here are a few resources for learning how to create effective selectors:

• CSS Selector Reference
• How to Use a Selector to Locate an Element
• XPath Syntax 

Note: This serves as a backup method to the default machine learning-based selection. You can enter a hard coded Selector to target a specific element first or to ensure the existence of a particular item. Typically, it is used as a backup option.

 

Accessing Selector Options

Users can access our Selector options when recording your tests in Architect, when editing on the Test Detail page, or while viewing execution results in Slider View.

 

Architect

1. Launch Architect to create a New Test
2. While recording, open an action by clicking the white circle on the left, select the ADV Selector tab and click the Override tab to access the different Selector options
   
   
   

Test Detail

1. Open a Test
2. While on the Actions tab or a Browser Results tab, expand the action to see the action Settings and select the Advanced tab
   
   
   

Slider View

1. Open a Test in Slider View
2. Click the gear icon on an action to open the action Settings window and select the Advanced tab
   
   
   

Selector Options in Action Settings

Selectors offer more control over elements that should be identified with stricter rules. The Selector Type tile has three options: ML Selection (default), Selector and JS Override Selector.

ML Selection

This is Functionize's machine learning based selector which is enabled by default.

 

Selector

Define a specific CSS or XPath Selector for an element. If the user has specified a hard coded selector and it cannot be found during execution, at runtime the Functionize test case will fall back to ML Selection to search for the element. When the Force checkbox is checked, the test will fail during execution if the hard coded selector is not found.

Sample Selectors include:

• CSS selector:
  

  #popover_p4q3jyvdfh > div

• XPath Selector:
  

  //*[@id="popover_p4q3jyvdfh"]

Selector Snippets

Functionize also provides a list of automatically populated unique Selector Snippet options rather than writing Selectors from scratch. As with writing your own Selector, if a snippet is used and cannot be found during execution, the Functionize test case will fall back to ML Selection to search for the element.

When the Force checkbox is checked, the test will fail during execution if the hard coded selector is not found.

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 scenario behavior to data that needs to be calculated. In these cases, we support writing your own JavaScript to return the desired element to interact with.

Selector Options in Architect

Architect test creation offers the same options as found in the action Settings on the Test Details page or Slider View - as well as a few other options that will be detailed below. Plus the user has the advantage of seeing if their Selectors need adjustment as the user sets them to interact with exactly the right element.

Note: Users may want to open the Chrome Developer Tools panel to assist in capturing XPath or CSS Selectors for the elements, if needed.

1. Launch Architect to create a New Test
2. While recording, open an action by clicking the white circle on the left
   
   
   
3. Select the ADV Selector tab
4. Select the DOM panel or the Override panel

 

DOM Panel

The DOM panel holds two options for fine-tuning your element selection which can be used in concert with each other to aid in precision, Manual DOM Walk and Define Selector.

Manual DOM Walk

1. Select an element near the target element
   
   
   
2. Click the arrow icons to walk the DOM from the current element to your target element regardless of size or other overlapping elements, the Current Element box will update as you change your selection on the page and click Save on the Action Details sidebar panel
   
   
   

Define Selector

1. Using Chrome Dev tools, Copy the preferred selector (ID, Query Selector, CSS Class, etc.) of the element
   Note: If the specified hard coded Selector cannot be found during execution, the Functionize test case will fall back to ML Selection to search for the element.
   
   
2. In the text box, paste the copied Selector, click the Search button to verify the element on the screen and click Save
   
   
   

Define Selector + Manual DOM Walk

Use them together! Enter a nearby element's selector in the text box, click Search to verify the correct element is found on the screen. Then use the DOM walk arrows to manually walk the DOM to the target element and finally click Save.

 

Override Panel

The Override panel holds three options which can be used to override our machine learning selector if needed.

ML Selector

ML Selector radio button is enabled by default, which is Functionize's machine-learning based Selector.

 

Specify Selector

Choose Specify Selector radio button to identify another selector to use to locate the element. Define a specific CSS or XPath Selector for the element in the provided text box. If the Specified Selector cannot be found during execution, the Functionize test case will fall back to ML Selection to search for the element.

Where this differs from the DOM panel, is the additional options of Snippet and Force. The Snippet button provides a list of automatically populated unique Selector Snippet options rather than writing Selectors from scratch. When the Force checkbox is checked, the test will fail during execution if the Selector is not found.

 

• Define Selector:
  1. Choose Specify Selector
  2. Enter the desired element's Selector in the text box, click Validate to ensure you have the correct hard coded selector and click Save
     
     
     

• Selector Snippets:
  1. Choose Specify Selector
  2. Select the element on the site under test
  3. Click the Snippet button to open the list of Selectors provided for the element
     
     
     
  4. Choose from the list of unique Selectors provided in the Insert Selector window
     
     
     
  5. The snippet will populate the text box and then click Save
     Note: Selecting from the list of unique selectors does not require validation.
     
     
     
• Force Selector
  1. Choose Specify Selector
  2. Select an element on the site under test or define your own Selector
     
     
     
  3. Check the Force box and click Save
  4. When the test is executed, if the Forced, hard coded Selector does not find the element, the action will Fail
     
     
     

JS Override Selector 

1. Choose JS Override selector radio button to use a custom JavaScript-based Selector
   
   
   
2. Click Edit to write a custom JS Selector - the default code supports the element that you have selected as a starting point, and Functionize offers dynamic code here to assist in a JavaScript Override if there is ever an element selection issue
   
   
   
3. Input JavaScript to select the element to interact with in this action, the example below has copied the JS path selector into the JavaScript Override field and must return the JavaScript element that the test should interact with
   
   
   
4. Click on the Validate button to confirm the code returns the desired element, which will highlight in the site under test, click Close in the modal that appears and click Save to return to the ADV Selector tab
   
   
   
5. Click Save in the ADV Selector tab details sidebar panel to return to recording the test