fix(wdio): properly construct the shadow root selector if there are multiple elements (#8354)

packages/browser/src/client/tester/locators/webdriverio.ts

@@ -60,7 +60,15 @@ class WebdriverIOLocator extends Locator {
     if (!selectors.length) {
       throw getElementError(this._pwSelector, this._container || document.body)
     }
-    return selectors.join(', ')
+    let hasShadowRoot = false
+    const newSelectors = selectors.map((selector) => {
+      if (selector.startsWith('>>>')) {
+        hasShadowRoot = true
+        return selector.slice(3)
+      }
+      return selector
+    })
+    return (hasShadowRoot ? '>>>' : '') + newSelectors.join(', ')
   }
 
   public override click(options?: UserEventClickOptions): Promise<void> {

test/browser/test/dom.test.ts

@@ -1,5 +1,5 @@
 import { createNode } from '#src/createNode'
-import { page } from '@vitest/browser/context'
+import { page, server } from '@vitest/browser/context'
 import { afterAll, beforeEach, describe, expect, test } from 'vitest'
 import '../src/button.css'
 
@@ -115,6 +115,25 @@ describe('dom related activity', () => {
       /__screenshots__\/dom.test.ts\/dom-related-activity-svg-screenshot-1.png/,
     )
   })
+
+  test.runIf(server.provider === 'webdriverio')('shadow dom works with multiple elements', async () => {
+    const wrapper = createWrapper()
+    const div = createNode()
+    wrapper.appendChild(div)
+
+    const shadow = div.attachShadow({ mode: 'open' })
+    const shadowDiv1 = createNode()
+    shadowDiv1.role = 'tab'
+    const shadowDiv2 = createNode()
+    shadowDiv2.role = 'tab'
+    shadow.appendChild(shadowDiv1)
+    shadow.appendChild(shadowDiv2)
+
+    expect(
+      page.getByRole('tab').selector,
+      'there is only a single >>> in the selector',
+    ).toBe('>>>html > body > div > div > div, html > body > div > div > div')
+  })
 })
 
 function createWrapper() {