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
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)
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.
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:
|Text Input Field||Read/assert, Set|
|Checkbox||Check, Uncheck, toggle|
|Picklist||Set, Set by Index|
|Buttons||Click, Read Assert|
|Hyperlink||Click, Read Assert|
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 email@example.com.
- General information
- Licensing Provar
- Provar trial guide and extensions
- Using Provar
- API testing
- Behavior-driven development
- Creating and importing projects
- Creating test cases
- Debugging tests
- Defining a namespace prefix on a connection
- Defining proxy settings
- Environment management
- Exporting test cases
- Exporting test projects
- Managing test steps
- Namespace org testing
- Provar desktop
- Provar Test Builder
- Refresh and Recompile
- Reload Org Cache
- 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
- Test Palette introduction
- Control test steps
- List compare
- Read test step
- String test steps
- UI Test Steps
- Using custom APIs
- Callable tests
- Data-driven testing
- Page objects
- Applications testing
- Database testing
- Document testing
- Email testing
- Mobile testing
- OrchestraCMS Testing
- Salesforce CPQ testing
- ServiceMax testing
- Skuid testing
- Vlocity testing
- Webservices testing
- Introduction to test scheduling
- Apache Ant
- Configuration for sending emails via the Provar Command Line Interface (CLI)
- Continuous integration
- Azure DevOps
- Running a Provar CI task in Azure DevOps
- Configuring the Provar 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
- Circle CI
- GitLab CI
- Travis CI
- Parallel Execution
- Running Provar on Linux
- Salesforce DX
- Team foundation server
- Version control
- Zephyr Cloud and Server (Beta)
- Salesforce testing
- Adding a Salesforce connection
- Assert Page Error Messages on Add/Edit Product
- Internationalization support
- List and table testing
- Salesforce critical updates
- Salesforce Lightning Testing
- Salesforce Lightning Web Component (LWC) locator support
- Service Cloud console testing
- Visualforce Testing
- Testing best practices
- Configurations and permissions
- Error messages
- Licensing, installation and firewalls
- Test Builder and test cases
- Release notes