{"id":226,"date":"2021-02-02T20:02:11","date_gmt":"2021-02-02T20:02:11","guid":{"rendered":"https:\/\/fde.cat\/?p=226"},"modified":"2021-02-02T20:02:12","modified_gmt":"2021-02-02T20:02:12","slug":"automation-made-easy-for-web-components-shadow-roots","status":"publish","type":"post","link":"https:\/\/fde.cat\/index.php\/2021\/02\/02\/automation-made-easy-for-web-components-shadow-roots\/","title":{"rendered":"Automation made easy for Web Components #shadow-roots"},"content":{"rendered":"

Automate Shadow DOM with WebDriver & Playwright<\/h3>\n

Locate elements in Shadow DOM of Web Components directly through CSS query engine.<\/h4>\n
\"\"<\/figure>\n

This document shows how to use the simpler CSS\/xPaths that calls through document.querySelector to locate elements within #shadow-root of your Web Components<\/strong> or Salesforce LWC <\/strong>Applications. This solution can be extended to LitElements, Lighting Fast Templates etc.<\/p>\n

The wish is to locate your #shadow-root elements directly through CSS query engine (whic you cannot do it with current WebDriver implementation) e.g,<\/p>\n

https:\/\/medium.com\/media\/688072c871ac827da34895057bf6731f\/href<\/a><\/p>\n

\ud83d\udd0e If you\u2019re building your app with the Web Components or Salesforce\u2019s LWC<\/a>, and if you try to use document.querySelector (in the console), it will not find anything in the document though you see the element in the Browser DOM. The reason is that the elements of Web Component are not in the Main DOM<\/em> but rather in the Shadow DOM<\/a>.<\/p>\n

\u201cThe Shadow DOM shield becomes the pain for developers in writing integration\/component\/E2E automated tests for Web Components.\u201d<\/p>\n<\/blockquote>\n

\u26a0\ufe0f THE PROBLEM<\/h3>\n

Shadow DOM prevents<\/strong> your components from easily being e2e tested because normal Selenium commands fail, due to the element actually not being in the main document. Rather, they are encapsulated under Shadow DOM.<\/p>\n<\/blockquote>\n

Selenium uses querySelector to find an element; Shadow DOMs prevent this.<\/p>\n

The selector engines like css\/xpath do not work on the shadow DOM by default.<\/p>\n

Example<\/h4>\n

Let\u2019s take a look at chrome:\/\/download page. It implements the Shadow DOM. As you see, the #searchInput is a scoped element under #shadow-root (open), and so the document.querySelector command fails<\/strong> to locate the #searchInput element,<\/p>\n

\"\"<\/figure>\n

The below query fails to return the element because #searchInput is encapsulated under Shadow Dom,<\/p>\n

https:\/\/medium.com\/media\/1ff87622bc29dfc8144da9648c48c0bb\/href<\/a><\/p>\n

and as a result the below Selenium WebDriver Command<\/em> will also fail <\/strong>to find an element \u274e<\/p>\n

https:\/\/medium.com\/media\/af4785ce5cb48633e734444fbcfac807\/href<\/a><\/p>\n

So what is needed is a very complex nested CSS<\/strong> [not recommended] <\/strong>\u2193<\/p>\n

https:\/\/medium.com\/media\/96b5abde6d915960e9f8180b727f50f6\/href<\/a><\/p>\n

\ud83e\udd14 now imagine, you add one more element in the nested route. Then, you are unknowingly breaking the automation tests. You will need to track and update all the existing nested CSS\u200a\u2014\u200awhich is a pain!!<\/p>\n

Can I get the support from WebDriver?<\/h4>\n

Yes. Codeceptjs-BDD<\/a> Framework provides out-of-the-box support to locate Shadow DOM elements at ease. Though, there is an existing feature request to have the support in W3C\/Webdriver<\/a>, but thru Codeceptjs-BDD Framework, you can locate elements like, document.query,<\/p>\n

I.click('.any-shadow-elements-in-dom'); \/\/ no dom hierarchy<\/pre>\n
[..] most end-to-end testing frameworks rely on [..] calls to querySelector through CSS\/xPaths. Elements in Shadow DOM are selectable by neither. But, we have a Solution at framework level.<\/p>\n<\/blockquote>\n
\ud83d\ude80 THE SOLUTION<\/h3>\n
The solution is Codeceptjs-BDD Webdriver implementations <\/strong>\ud83c\udf89 \ud83c\udf89 \ud83c\udf89, <\/strong>which provides automatic support for the Shadow DOM , and Playwright already has in-built support.<\/p>\n
Let\u2019s talk about the real scenarios built with framework CodeceptJS<\/strong>!<\/p>\n
salesforce\/codeceptjs-bdd<\/a><\/p>\n
Example: <\/strong>As you see in line #6 in below gif, the CSS is pretty simplified in test.<\/em><\/p>\n
\"\"<\/figure>\n
\u2705 As you see in a below example, you would just define a very simple CSS #searchInput . The Playwright driver will find an element(s) for you. No need to mention about any of the hierachy of #shadow-roots!<\/p>\n
\ud83d\ude4c No Nested\/Complex CSS required!<\/strong><\/p>\n
https:\/\/medium.com\/media\/3f3eeeb821abf23a84d6614f87725159\/href<\/a><\/p>\n
Simply inspect the element in DOM, and grab the unique attribute. It is as simple as that with Playwright because Playwright does rest of the plumbing work for us.<\/p>\n
\u2763\ufe0f WebDriver Exclusive Support for Shadow Dom <\/strong>\u2b07<\/p>\n
salesforce\/codeceptjs-bdd<\/a><\/p>\n
\u2705 The Framework Documentations: https:\/\/gkushang.github.io\/<\/a><\/h4>\n
Demo Time<\/h3>\n
Let\u2019s take a look some real examples with scenarios<\/h4>\n
The examples in this doc are built with Codeceptjs-BDD<\/a> framework with Playwright!<\/p>\n
A Complete Example Test<\/strong><\/p>\n
\"\"<\/figure>\n
As you see in above example, the #searchInput is a scoped element (#shadow-root) but it does not require you to have nested CSS of #shadowRootsto locate the element but it still finds an element!<\/p>\n
Salesforce\u2019s LWC Page Object, the Another Example<\/strong><\/h4>\n
The Salesforce Lighting Web Components (LWC) is another great example of Shadow DOM elements. LWC Recipes<\/a> is build with LWC. Below is the Page Object on how to query Shadow DOM elements with simple CSS.<\/p>\n
A complete E2E automation Example of Salesforce\u2019s Lighting Web Components Application<\/a> is available here:<\/p>\n\"\"\n
salesforce\/codeceptjs-bdd<\/a><\/p>\n
\ud83c\udf89 The Codeceptjs-BDD<\/a> makes it easy to Automate Web Components in any of the below mentioned automation test layers:<\/p>\n