Automation in Salesforce Shadow Document Object Model
When automating UI, one challenge is that it needs exposure to control identifiers and objects. The Salesforce Shadow Document Object Model (DOM) can help overcome this challenge, providing a way to attach a hidden separated DOM to an element. One important aspect of web components is encapsulation, so being able to keep the markup structure, style, and behavior hidden and separate from other code on the page prevents parts from clashing, and the code can be kept nice and clean.
Salesforce Lightning Web Components use Shadow DOM as an isolation mechanism to prevent components from affecting each other. The Shadow DOM boundaries between components break traditional methods of locating elements on a page. This feature helps developers encapsulate their code, but it can be difficult for some automated testing tools that are not built for the purpose of Shadow DOM interrogation because of encapsulation. This is especially true for tests that rely on globally searching the DOM or reaching into the internals of custom elements.
The Shadow DOM keeps the child node and the CSS separate from the DOM of the main document, which in turn hides the identifier of the control in order to test from the automation tool. This methodology helps with the naming convention and overall improvement of code and separates content from presentation.
Best practice is to inspect the DOM before attempting to make any changes that might not be permissible with Shadow DOM. This can easily be done with your browser’s development tools. For example, if you are using Chrome, you can use Chrome DevTools, a set of free web developer tools built directly into the browser. Simply right-click on an element, and select Inspect. The ChroPath will provide an absolute path for that object.
The #shadow-root element represents a shadow root. All elements inside this shadow root are considered separate from the current DOM document.
Katalon Studio has made it even easier to use Salesforce for UI automation, allowing the user to work within the Shadow DOM and use attributes and XPath to capture objects that are needed for automation. In addition, it allows the engineer to use groovy in scripts or manually input the information for Test Cases. Katalon Studio is a powerful automation tool — combating the challenges of the Shadow DOM.
Citation: “Automation Testing of Shadow DOM Elements with Katalon Studio.” Https://Docs.katalon.com, 8 Mar. 2021, docs.katalon.com/katalon-studio/docs/shadow_dom_elements_testing.html
About Cervello, a Kearney company
Cervello, a Kearney company is a data and analytics consulting firm and part of Kearney, a leading management consulting firm. We help our leading clients win by offering unique expertise in data and analytics, and in the challenges associated with connecting data. We focus on performance management, customer and supplier relationships, and data monetization and products, serving functions from sales to finance. We are a Salesforce partner and help our clients implement, customize, and optimize the platform into the best solution for their needs.
