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.
- Provar Automation
- Installing Provar Automation
- Updating Provar Automation
- Using Provar Automation
- API testing
- Behavior-driven development
- Creating and importing projects
- Creating test cases
- Custom table mapping
- Functions
- Debugging tests
- Defining a namespace prefix on a connection
- Defining proxy settings
- Environment management
- Exporting test cases into a PDF
- Exporting test projects
- Override auto-retry for Test Step
- Managing test steps
- Namespace org testing
- NitroX
- Provar desktop
- Provar Test Builder
- Refresh and Recompile
- Reintroduction of CLI license Check
- Reload Org Cache
- Reporting
- Running tests
- Searching Provar with find usages
- Secrets management and encryption
- Setup and teardown test cases
- Tags and Service Level Agreements (SLAs)
- Test cycles
- Test plans
- Testing browser options
- Tooltip testing
- Using the Test Palette
- Using custom APIs
- Callable tests
- Data-driven testing
- Page objects
- Block locator strategies
- Introduction to XPaths
- Creating an XPath
- JavaScript locator support
- Label locator strategies
- Maintaining page objects
- Mapping non-Salesforce fields
- Page object operations
- ProvarX™
- Refresh and reselect field locators in Test Builder
- Using Java method annotations for custom objects
- Applications testing
- DevOps
- Introduction to test scheduling
- Apache Ant
- Configuration for Sending Emails via the Automation Command Line Interface
- Continuous integration
- AutoRABIT Salesforce DevOps in Provar Test
- Azure DevOps
- Running a Provar CI Task in Azure DevOps Pipelines
- Configuring the Automation secrets password in Microsoft Azure Pipelines
- Parallel Execution in Microsoft Azure Pipelines Using Multiple build.xml Files
- Parallel Execution in Microsoft Azure Pipelines using Targets
- Parallel execution in Microsoft Azure Pipelines using Test Plans
- Bitbucket Pipelines
- CircleCI
- Copado
- Docker
- Flosum
- Gearset DevOps CI/CD
- GitHub Actions
- Integrating GitHub Actions CI to Run Automation CI Task
- Remote Trigger in GitHub Actions
- Parameterization using Environment Variables in GitHub Actions
- Parallel Execution in GitHub Actions using Multiple build.xml Files
- Parallel Execution in GitHub Actions using Targets
- Parallel Execution in GitHub Actions using Test Plan
- Parallel Execution in GitHub Actions using Job Matrix
- GitLab Continuous Integration
- Travis CI
- Jenkins
- Execution Environment Security Configuration
- Provar Jenkins Plugin
- Parallel Execution
- Running Provar on Linux
- Reporting
- Salesforce DX
- Git
- Team Foundation Server
- Version control
- Provar Automation trial guide and extensions
- Salesforce Testing
- Provar Manager
- Best Practices
- Troubleshooting
- Release Notes