JavaScript locator support

Using Provar Test Builder and Provar Desktop, 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 which 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 Provar’s JavaScript locator

This feature offers additional flexibility for Provar users in how tests can be created and managed. 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 Provar 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 in order to identify the JavaScript path using standard JavaScript syntax. Provar will automatically suggest a default JavaScript path. 

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

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 are unable to find elements with the shadow tree because these locators cannot cross the shadow boundary.

Step 1: Using Provar, 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 in order to identify the JavaScript path using standard JavaScript syntax. Provar will automatically suggest a default JavaScript path. 

Step 5: The suggested locator in this instance is as follows. (You will notice that Provar has automatically identified 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 in order to identify the JavaScript path using standard JavaScript syntax. Provar 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 will uniquely select the element on the page.

document.querySelector(“div:nth-child(1) > div > div > div:nth-child(2) > div:nth-child(1) > div > div > div > input”)

Testing a Salesforce Flexi component

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

The suggested locator in this instance is as follows. Provar will automatically generate the JavaScript path that will uniquely select the element on the page. 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(‘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.

In this example, the JavaScript locator would appear as the following to select the element: 

document.querySelector(‘one-record-home-flexipage2’).shadowRoot.querySelector(‘forcegenerated-flexipage_account_record_page1_account__view_js’).shadowRoot.querySelectorAll(‘c-lds-create-record’)[1].shadowRoot.querySelectorAll(‘lightning-input’)[1].shadowRoot.querySelector(‘input’)

How to use Provar JavaScript locators in Provar Desktop

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

Above: View of JavaScript within Provar Desktop. 

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 would like to learn about using JavaScript locators for web component testing, please contact us to discuss your testing strategy and requirements at [email protected].