Pathwise

Manuals / Playwright with Python / Chapter 29

Part 4 · Advanced Techniques · advanced · ~40 min · Chapter 29 of 61

21. Shadow DOM & Complex Components

Piercing shadow DOM Playwright's locators automatically pierce open shadow DOM by default — no special syntax needed in most cases: # Works transparently even if "custom-button" uses shadow DOM internally page.locator("custom-button").get_by_text("Submit").click() Pointers: This "just works" behavior is a genuine advantage over older tools, which often required manually accessing .shadowRoot via J

Path progress
47%

Step 1 of 2

Piercing shadow DOM

Playwright's locators automatically pierce open shadow DOM by default — no special syntax needed in most cases: Pointers: This "just works" behavior is a genuine advantage over older tools, which often required manually accessing .shadowRoot via JavaScript execution to reach shadow DOM content at all.

Piercing shadow DOMDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Page under testdrag · tap →Multi-browserdrag · tap →Automation pathdrag · tap →Tooling nodedrag · tap →
Docs

Try it

Run / study this snippet

# Works transparently even if "custom-button" uses shadow DOM internally
page.locator("custom-button").get_by_text("Submit").click()
Was this step clear?
Chapter learning outcomes
  • Piercing shadow DOM
  • Handling custom web components

Clear these before you leave

Side quest

21. Shadow DOM & Complex Components deliverable

Apply one idea from “Piercing shadow DOM” in a small script or note.