added shadow dom support

Author: DavertMik

lib/helper/Playwright.js

@@ -4096,6 +4096,11 @@ function buildLocatorString(locator) {
   if (locator.isXPath()) {
     return `xpath=${locator.value}`
   }
+  if (locator.isShadow()) {
+    // Convert shadow locator to CSS with >>> deep descendant combinator
+    // { shadow: ['my-app', 'recipe-hello', 'button'] } => 'my-app >>> recipe-hello >>> button'
+    return locator.value.join(' >>> ')
+  }
   return locator.simplify()
 }
 

lib/helper/Puppeteer.js

@@ -2900,10 +2900,17 @@ async function findElements(matcher, locator) {
   if (isReactLocator) return findReactElements.call(this, locator)
 
   locator = new Locator(locator, 'css')
-  
+
   // Check if locator is a role locator and call findByRole
   if (locator.isRole()) return findByRole.call(this, matcher, locator)
 
+  // Handle shadow DOM locators with >>> deep descendant combinator
+  // { shadow: ['my-app', 'recipe-hello', 'button'] } => 'my-app >>> recipe-hello >>> button'
+  if (locator.isShadow()) {
+    const shadowSelector = locator.value.join(' >>> ')
+    return matcher.$$(shadowSelector)
+  }
+
   // Use proven legacy approach - Puppeteer Locator API doesn't have .all() method
   if (!locator.isXPath()) return matcher.$$(locator.simplify())
 
@@ -2967,6 +2974,13 @@ async function findElement(matcher, locator) {
     return elements[0]
   }
 
+  // Handle shadow DOM locators with >>> deep descendant combinator
+  if (locator.isShadow()) {
+    const shadowSelector = locator.value.join(' >>> ')
+    const elements = await matcher.$$(shadowSelector)
+    return elements[0]
+  }
+
   // Use proven legacy approach - Puppeteer Locator API doesn't have .first() method
   if (!locator.isXPath()) {
     const elements = await matcher.$$(locator.simplify())

test/helper/webapi.js

@@ -517,6 +517,32 @@ export function tests() {
     })
   })
 
+  describe('#shadow DOM', () => {
+    it('should click button inside shadow DOM', async () => {
+      await I.amOnPage('/form/shadow_dom')
+      await I.click({ shadow: ['my-button', 'button'] })
+      await I.see('my-button > button', '#clicked-element')
+    })
+
+    it('should click button in nested shadow DOM', async () => {
+      await I.amOnPage('/form/shadow_dom')
+      await I.click({ shadow: ['my-app', 'my-form', 'button'] })
+      await I.see('my-app > my-form > button', '#clicked-element')
+    })
+
+    it('should fill field inside nested shadow DOM', async () => {
+      await I.amOnPage('/form/shadow_dom')
+      await I.fillField({ shadow: ['my-app', 'my-form', 'input'] }, 'Shadow Test')
+      await I.see('Shadow Test', '#input-value')
+    })
+
+    it('should work with shadow locator as JSON string', async () => {
+      await I.amOnPage('/form/shadow_dom')
+      await I.click('{"shadow": ["my-button", "button"]}')
+      await I.see('my-button > button', '#clicked-element')
+    })
+  })
+
   describe('#executeScript', () => {
     it('should execute synchronous script', async () => {
       await I.amOnPage('/')