Documentation

Looking for something in particular?

JavaScript Locator Support

Using Test Builder and Automation, you can set up relatively simple locators using JavaScript to find elements on a web page using JavaScript code to locate an element. This is particularly useful when locating elements within a Shadow DOM that cannot be accessed by standard XPath and CSS locators.  You can also use locators generated using Salesforce’s LWC Shadow Path Generator Chrome extension, though we do find these are more brittle when changes are made to your Salesforce Lightning FlexiPage layouts.

The benefits of using Automation’s JavaScript locator


This feature offers additional flexibility for Automation users in creating and managing tests. It also provides a mechanism for switching from other testing frameworks already using JavaScript locators so they can be reused in Provar. 

This also provides an additional locator to select elements within a web component by generating a Shadow DOM-compliant JavaScript locator.

How to use Automation JavaScript locators in the Test Builder


It’s easy to use JavaScript locators within the Test Builder. Simply use the drop-down menu above the Field Locator to select By Javascript to identify the JavaScript path using standard JavaScript syntax. Automation will automatically suggest a default JavaScript path. 

Currently, you can use JavaScript locators to test the following elements:

Elements Interaction
Text Input Field Read/assert, Set
Labels Read/assert
Checkbox Check, Uncheck, toggle
Picklist Set, Set by Index
Buttons Click, Read Assert
Hyperlink Click, Read Assert

Testing a standard website using the native Shadow DOM


In the following example, we will locate an element on the https://recipes.lwc.dev/ website, which utilizes the native Shadow DOM. In this scenario, the standard XPath and CSS locators cannot find elements with the shadow tree because these locators cannot cross the shadow boundary.

Step 1: Using Automation, create a Selenium UI testing connection. Then, create a new test case and test step to use the UI test connection.

Step 2: Launch the Test Builder. 

Step 3: Once the browser and Test Builder are launched, select the First Name field on the page, right-click the element, and select Add To Test Case

Above: View of the default JavaScript path within the Field Locator field. 

Step 4: Within the Test Builder, use the drop-down menu above the Field Locator field to select By Javascript to identify the JavaScript path using standard JavaScript syntax. Automation will automatically suggest a default JavaScript path. 

Step 5: The suggested locator in this instance is as follows. (You will notice that Automation automatically identifies the Shadow DOM elements within the Shadow Tree to generate the relevant locator.)

 document.querySelector(‘my-app’).shadowRoot.querySelector(‘recipe-hello-expressions’).shadowRoot.querySelector(‘ui-input’).shadowRoot.querySelector(‘input’)

Testing a Salesforce page with a custom Page Object


The By Javascript locator can also be used when constructing a custom page object for a Salesforce page to locate an element. 

Step 1: Simply select the Page Object for the page structure.

Step 2: Within the Test Builder, use the drop-down menu above the Field Locator field to select By Javascript to identify the JavaScript path using standard JavaScript syntax. Automation will automatically suggest a default JavaScript path.

Above: View when mapping a custom page object. 

The suggested locator in this instance is as follows. Provar will automatically generate the JavaScript path that uniquely selects the page element.

Testing a Salesforce Flexi component


The By Javascript locator can also locate elements on a Salesforce FlexiPage.

The suggested locator in this instance is as follows. Provar will automatically generate the JavaScript path that uniquely selects the page element. You will notice that Provar will also prefix “{provarContext}” to the path so that we’re narrowing the search area for the query rather than searching the entire DOM.

{provarContext}.querySelector(‘c-lds-create-record’).shadowRoot.querySelectorAll(‘lightning-input’)[1].shadowRoot.querySelector(“lightning-primitive-input-simple’).shadowRoot.querySelector(‘input.slds-input’).

Alternatively, you don’t have to use the {provarContext} to assist with locating the element; you can use a standard JavaScript path to locate the element instead.

How to use JavaScript locators in Automation


To use JavaScript locators within Automation, simply switch to the Java Source tab to edit the information. We highly recommend that you use Test Builder for a more seamless experience.

Limitations


There is a limitation in using the By Javascript locator on generic web pages (non-salesforce pages) on the following browsers when interacting with web components using the native Shadow DOM: IE 11.

If you want to learn about using JavaScript locators for web component testing, please contact us to discuss your testing strategy and requirements at support@provartesting.com.


Feedback

Was this article helpful for you?
Documentation library

Trying to raise a case with our support team?

We use cookies to better understand how our website is used so we can tailor content for you. For more information about the different cookies we use please take a look at our Privacy Policy.

Scroll to Top