Working in the Shadow (DOM) - How to test Web Components
summary
Explains that Web Components reduce page bloat but break traditional locators and that ad hoc fixes in Playwright, WebdriverIO and SeleniumBase use special selectors that don’t map to DevTools. Describes a new getShadowRoot API added to WebDriver that navigates open vs closed shadow DOM consistently, shows a working Nightwatch demo against MDN, and reports the feature lands in Chrome now with Firefox patches under review so closed roots become automatable.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:22About David
- 2:14Agenda
- 3:55What are Web Components
- 8:27What about frontend frameworks
- 14:55Web Components
- 16:49How Web Components works
- 18:02Testing Web Components
- 18:17Web Apps Working Group
- 18:52Who thinks about testing
- 19:35How to test multiple components
- 22:18Attach Shadow DOM
- 25:07Jim Evans
- 29:03Demo
- 34:45Recap
- 36:36QA
related talks
29mInspector Web and the Mystery of the Shadow DOM
06mUnlocking the Power of Shadow DOM
42mThe Good, The Bad, The Web Components
42mWeb components and the future of web development
51mShining Light on the Shadow DOM
04mTesting native js web components
29mNext level of Front end testing with Devtools and WebDriver
28mFrontend Testing