Customizing Tests with Selectors

Overview

When working with automated tests, two critical pieces must be addressed:

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

Why Selectors?

While we strive to select the correct element, websites can be constructed in numerous ways, and this doesn't always happen as expected. Unlike other test automation tools, Functionize does not rely solely on a single 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, enabling robust self-healing. However, there are times when the user may not want us to attempt self-healing or 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, self-healing is not available for specific action.
• JS Override Selector: Allows the user to hard-code a custom JS selector for element selection. If used, 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, 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.

Resources for Learning How to Create Effective Selectors:

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

Accessing Selector Options

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

Architect

• Launch Architect to create a new test.
• 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

• Open a test.
• 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

• Open a test in Slider View.
• 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:

• 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 change every time. 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, along with additional options. 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

• Select an element near the target element.
  
• Click the arrow icons to walk the DOM from the current element to your target element. The Current Element box will update as you change your selection on the page. Click Save on the Action Details sidebar panel.
  

Define Selector

• Using Chrome Dev tools, copy the preferred selector (ID, Query Selector, CSS Class, etc.) of the element.
  
• Paste the copied Selector in the text box, click the Search button to verify the element on the screen, and 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 the Specify Selector radio button to identify another selector 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.

Define Selector:

• Choose Specify Selector.
• 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:

• Choose Specify Selector.
• Select the element on the site under test.
• Click the Snippet button to open the list of Selectors provided for the element.
  
• Choose from the list of unique Selectors provided in the Insert Selector window.
  
• 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

• Choose Specify Selector.
• Select an element on the site under test or define your own Selector.
  
• Check the Force box and click Save.
• When the test is executed, if the Forced, hard-coded Selector does not find the element, the action will Fail.
  

JS Override Selector

• Choose JS Override Selector radio button to use a custom JavaScript-based Selector.
  
• Click Edit to write a custom JS Selector. Input JavaScript to select the element to interact with in this action, and ensure it returns the JavaScript element that the test should interact with.
  
• Click the Validate button to confirm the code returns the desired element, and then click Save.
  
• Click Save in the ADV Selector tab details sidebar panel to return to recording the test
  

By using these options, you can ensure that your test cases interact with the correct elements on your web pages, even if those elements change over time or have complex behaviors.