QA PRACTICE•SHADOW

Locator Practice HubTopics / Shadow DOM

Lesson 13 / 20 · Advanced

Shadow DOM

Understand open roots and component boundaries.

15 min

Not completed

Concept

Shadow DOM component iç yapısını sınırlar. Open root otomasyon araçlarınca erişilebilir; closed root doğrudan query edilemez. Slot ile light DOM içeriği shadow template içinde görünür olabilir.

Prerequisites: DOM basics

Live demo

Try the locator

Scoped to lesson demo

Try the locator against the live demo.

Good

Component test hook veya public accessibility contract tasarla.

Avoid

XPath ile shadow boundary’yi geçmeye çalışma.

Why

Shadow boundary’nin teknik sınırını bilmek doğru araç ve ürün kararını sağlar.

Real-world trap

XPath shadow DOM’a girmez; Playwright’ın locator davranışı da component root türüne bağlıdır.

Framework comparison

Playwright

page.locator("[data-testid='shadow-action']")

Selenium

driver.findElement(By.cssSelector("[data-testid='shadow-action']"))

Cypress

cy.get("[data-testid='shadow-action']")

Mini quiz

Closed shadow root için doğru çözüm hangisidir?