ProvarX™

ProvarX is an enhanced feature within Provar that is designed to make it easier to test custom and standard web components within a web app where traditional locators like XPath and CSS (used by other test automation frameworks) are unable to find elements within a web component without using a JavaScript locator.

 

The limitations of XPath and CSS locators 


In some instances, you may attempt to test web components within a web app and find that traditional XPath and CSS locators are not able to locate an element. This is because web components are encapsulated by the Shadow DOM. Within the Shadow DOM, the elements within a web component are private which means that XPath and CSS locators are unable to access their elements.

 

How the Shadow DOM renders code uniquely 


Encapsulating the code from the rest of the web app enables a web component to be rendered, scripted and styled separately from the main web app. This also allows web components to be reused wherever you like on a web page without the fear of code collision. As a result of the Shadow DOM, XPath and CSS locators are unable to pierce the Shadow DOM because it is hidden from these locators and a JavaScript locator is needed to locate elements within the Shadow DOM instead.

 

How to use ProvarX to test web components


This feature simplifies the testing of web components by providing the capability to locate elements within a web component using an XPath query. This is achieved by using the Provar Test Builder to create a test step and map an element in a web component using an XPath locator and standard XPath syntax. This enables you to set/read/assert the value of the element and Provar will automatically access the Shadow DOM for you. 

 

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, 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

 

Step 4: Within the Test Builder, use the drop-down menu above the Field Locator field to select By ProvarX in order to identify the ProvarX™ path using standard XPath syntax. Provar will automatically suggest a default ProvarX™ 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 to traverse the Shadow Tree)

 

//recipe-hello-expressions//ui-input[1]//label[normalize-space(.)=’First Name’]/following-sibling::div//input

 

Testing a Salesforce page with a custom Page Object


The By ProvarX 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 ProvarX in order to identify the ProvarX™ path using standard XPath syntax. Provar will automatically suggest a default ProvarX™ path.

 

The suggested locator in this instance is as follows. Provar will automatically generate the ProvarX™ path that will uniquely select the element on the page.

//div[contains(@class, ‘active’) and contains(@class, ‘open’) and (contains(@class, ‘forceModal’) or contains(@class, ‘uiModal’))][last()]//label[normalize-space(.)=’Opportunity Name*’]/following-sibling::input

 

Testing a Salesforce Flexi component


The By ProvarX 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 ProvarX™ path that will uniquely select the element on the page. You will notice that Provar will also prefix “.” (which we’ll refer to as the provarContext) to the path so that we’re narrowing the search area for the query rather than searching the entire DOM.

 

.//c-lds-create-record//label[normalize-space(.)=’Name’]/following-sibling::div//input

Alternatively, you don’t have to use the provarContext to assist with locating the element, you can use a standard ProvarX™ path to locate the element instead.

 

//div[contains(@class,’active’) and contains(@class,’oneWorkspace’) and (ancestor::div[contains(@class,’active’) and contains(@class,’main-content’)]//div[contains(@class, ‘oneGlobalNav’)]//div[contains(@class, ‘tabContainer’) and contains(@class, ‘active’)] )]//input[@id=’input-1794′]

 

Currently, you can use ProvarX™ to test the following:


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

 

Limitations


There is a limitation in using the ProvarX™ 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’d like to learn about using ProvarX™ for web component testing, please contact us to discuss your testing strategy and requirements at support@provartesting.com.

 

Documentation library

Other available resources

Looking for something different?

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.