54 lines
2.0 KiB
Markdown
54 lines
2.0 KiB
Markdown
|
# Support for Shadow DOM in CodeceptJS
|
||
|
|
|
||
|
|
- Supported CodeceptJS Helpers: *Playwright* only.
|
||
|
|
- CodeceptJS 2.6.0 released webdriver.io support as an alternative if you don't want to use Playwright
|
||
|
|
|
||
|
|
Support for this plugin is currently limited to Playwright, this is mostly due to the fact that playwright
|
||
|
|
allows for the addition of `custom selector engines`.
|
||
|
|
|
||
|
|
Goal/Example: To be able to write a test that works easily with shadow dom web components.
|
||
|
|
See Issues for what currently works and what doesn't
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
Feature("The chrome downloads page");
|
||
|
|
Scenario("Can interact with the search box", async I => {
|
||
|
|
I.amOnPage("chrome://downloads");
|
||
|
|
I.see("Files you download appear here", {shadow: "#no-downloads span"});
|
||
|
|
I.waitForVisible({shadow: "#no-downloads"}, 5);
|
||
|
|
I.click({shadow: `[title="Search downloads"]`});
|
||
|
|
I.waitForVisible({shadow: '#searchInput'}, 5);
|
||
|
|
I.fillField({shadow: '#searchInput'}, "A download")
|
||
|
|
I.waitForValue({shadow: '#searchInput'}, "A download", 5)
|
||
|
|
I.waitForText("No search results found", 3, {shadow: "#no-downloads span"});
|
||
|
|
I.clearField({shadow: '#searchInput'})
|
||
|
|
I.waitForValue({shadow: '#searchInput'}, "", 5)
|
||
|
|
});
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
Setup:
|
||
|
|
|
||
|
|
1. `npm install query-selector-shadow-dom codeceptjs playwright`
|
||
|
|
2. Setup a codeceptjs project: https://codecept.io/quickstart/
|
||
|
|
3. In `codecept.config.js` add this shadow dom plugin
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
plugins: {
|
||
|
|
shadowDom: {
|
||
|
|
enabled: true,
|
||
|
|
locator: "shadow",
|
||
|
|
require: "query-selector-shadow-dom/plugins/codeceptjs"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
4. Start using the custom locator `{shadow: "..."}` You may rename the locator in the config file from "shadow" to something else.
|
||
|
|
5. Read issues below as not everything currently works.
|
||
|
|
|
||
|
|
Issues:
|
||
|
|
|
||
|
|
## What works
|
||
|
|
- Most of the APIs listed here should work with shadow dom https://codecept.io/helpers/Playwright/#playwright
|
||
|
|
|
||
|
|
### The following methods are not supported as of right now:
|
||
|
|
- waitForNoVisibleElements (looking for help should be do-able, feel free to PR to CodeceptJS)
|