Plugin for webdriver.io to transparently make CSS selectors "just work" with shadow DOM
npm install wdio-shadowdom-service
This is a plugin for WebDriverIO that transparently makes CSS selectors "just work" with the
shadow DOM.
With this plugin, APIs like $('.foo') and $$('.foo')will automatically query inside the shadow DOM to find elements. This can help avoid
complicated or hard-to-maintain test code.
Before:
``js`
// 😞
const element = $('.foo')
.shadow$('.bar')
.shadow$('.baz')
.shadow$('.quux')
After:
`js`
// 🥳
const element = $('.quux')
Features:
- APIs like $, $$, and even some basic usage of execute all "just work" with the shadow DOM. document.querySelector
- Doesn't override the global or document.querySelectorAll. Only touches your test code, not your production code.
- Uses kagekiri under the hood – a rigorously-tested utility containing a full CSS selector parser.
`sh`
npm install wdio-shadowdom-service
Modify your wdio.conf.js like so:
`js
const ShadowDomService = require('wdio-shadowdom-service')
exports.config = {
// ...
services: [ [ShadowDomService, {}] ],
// ...
}
`
Due to an open bug on WebDriverIO,
you will also need to use the webdriver protocol, not the devtools protocol. Set this in your wdio.conf.js:
`js`
exports.config = {
// ...
automationProtocol: 'webdriver',
path: '/wd/hub',
// ...
}
Now you can use selector queries that pierce the shadow DOM:
`js`
const element = await browser.$('.foo')
const elements = await browser.$$('.foo')
Some simple usages of document.querySelector/querySelectorAll are also supported:
`js`
const element = await browser.execute(() => document.querySelector('.foo'))
const elements = await browser.execute(() => document.querySelectorAll('.foo'))
All selectors are able to pierce the shadow DOM, including selectors like '.outer .inner' where .outer is in the.inner
light DOM and is in the shadow DOM. See kagekiri for more details
on how it works.
- $
- $$
- execute \*
- executeAsync \*
- findElement
- findElements
\* execute and executeAsync only work with simple usages of document.querySelector/querySelectorAll element.querySelector
or /querySelectorAll.
Currently, WebDriverIO v6 and v7 are supported.
To lint:
`sh`
npm run lint
To fix most lint issues automatically:
`sh`
npm run lint:fix
To run the tests:
`sh`
npm test
To run the tests in debug mode:
`sh`
DEBUG=true npm test
Then open chrome:inspector` in Chrome and open the dedicated DevTools for Node.