ProvarX™
ProvarX™ is an enhanced feature within Automation 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 the Shadow DOM encapsulates web components. Within the Shadow DOM, the elements within a web component are private, meaning that XPath and CSS locators cannot 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 fearing code collision. As a result of the Shadow DOM, XPath and CSS locators cannot 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 using the 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 element’s value, and Provar will automatically access the Shadow DOM.
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, 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: Use the drop-down menu above the Field Locator field to select By ProvarX to identify the ProvarX™ path using standard XPath syntax within the Test Builder. 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 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 uniquely selects 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 locate elements on a Salesforce FlexiPage.
The suggested locator in this instance is as follows. Provar will automatically generate the ProvarX™ path that uniquely selects 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.