forked from codeceptjs/CodeceptJS
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Web Components] Add Shadow DOM Support to CodeceptJS (codeceptjs#2276)
* add shadow dom support to codeceptjs plugin WebdriverIO * Update lib/helper/WebDriver.js Co-authored-by: Kushang Gajjar <[email protected]> Co-authored-by: Michael Bodnarchuk <[email protected]>
- Loading branch information
3 people
authored
Mar 28, 2020
1 parent
d775461
commit e1eaaa6
Showing
7 changed files
with
164 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| --- | ||
| permalink: /shadow | ||
| title: Locating Shadow Dom Elements | ||
| --- | ||
|
|
||
| # Locating Shadow Dom Elements | ||
|
|
||
| Shadow DOM is one of the key browser features that make up web components. Web components are a really great way to build reusable elements, and are able to scale all the way up to complete web applications. Style encapsulation, the feature that gives shadow DOM it's power, has been a bit of a pain when it comes to E2E or UI testing. Things just got a little easier though, as CodeceptJS introduced built-in support for shadow DOM via locators of type `shadow`. Let's dig into what they're all about. | ||
|
|
||
| Generated HTML code may often look like this (ref: [Salesforce's Lighting Web Components](https://github.com/salesforce/lwc)): | ||
|
|
||
| ```js | ||
| <body> | ||
| <my-app> | ||
| <recipe-hello> | ||
| <button>Click Me!</button> | ||
| </recipe-hello> | ||
| <recipe-hello-binding> | ||
| <ui-input> | ||
| <input type="text" class="input"> | ||
| </ui-input> | ||
| </recipe-hello-binding> | ||
| </my-app> | ||
| </body> | ||
| ``` | ||
|
|
||
| This uses custom elements, `my-app`, `recipe-hello`, `recipe-hello-binding` and `ui-input`. It's quite common that clickable elements are not actual `a` or `button` elements but custom elements. This way `I.click('Click Me!');` won't work, as well as `fillField('.input', 'value)`. Finding a correct locator for such cases turns to be almost impossible until `shadow` element support is added to CodeceptJS. | ||
|
|
||
| ## Locate Shadow Dom | ||
|
|
||
| For Web Components or [Salesforce's Lighting Web Components](https://github.com/salesforce/lwc) with Shadow DOM's, a special `shadow` locator is available. It allows to select an element by its shadow dom sequences and sequences are defined as an Array of `elements`. Elements defined in the array of `elements` must be in the ordered the shadow elements appear in the DOM. | ||
|
|
||
| ```js | ||
| { shadow: ['my-app', 'recipe-hello', 'button'] } | ||
| { shadow: ['my-app', 'recipe-hello-binding', 'ui-input', 'input.input'] } | ||
| ``` | ||
|
|
||
| In WebDriver, you can use shadow locators in any method where locator is required. | ||
|
|
||
| For example, to fill value in `input` field or to click the `Click Me!` button, in above HTML code: | ||
|
|
||
| ```js | ||
| I.fillField({ shadow: ['my-app', 'recipe-hello-binding', 'ui-input', 'input.input'] }, 'value'); | ||
| I.click({ shadow: ['my-app', 'recipe-hello', 'button'] }); | ||
| ``` | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| Feature('Shadow Dom Locators'); | ||
|
|
||
| Scenario('should fill input field within shadow elements', I => { | ||
|
|
||
| // navigate to LWC webpage containing shadow dom | ||
| I.amOnPage('https://recipes.lwc.dev/'); | ||
|
|
||
| // click Click Me! button | ||
| I.click({ shadow: ['my-app', 'recipe-hello', 'button'] }); | ||
|
|
||
| // fill the input field | ||
| I.fillField({ shadow: ['my-app', 'recipe-hello-binding', 'ui-input', 'input.input'] }, 'value'); | ||
|
|
||
| }); | ||
|
|
||
|
|
||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @WebDriverIO @bdd | ||
| Feature: Web Components Shadow Dom Elements | ||
|
|
||
| In order to achieve my goals | ||
| As a persona | ||
| I want to be able to interact with a shadow dom | ||
|
|
||
| Scenario: Interacts with Shadow DOM elements in Web Componenets | ||
| Given I opened "https://recipes.lwc.dev" website | ||
| Then I should be able to fill the value in Hello Binding Shadow Input Element |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters