fix

sainthkh · sainthkh · commit 04d087aba723 · 2021-11-22T09:23:05.000+09:00
diff --git a/packages/driver/cypress/fixtures/shadow-dom-button.html b/packages/driver/cypress/fixtures/shadow-dom-button.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+      <title>Shadow DOM Button test</title>
+    </head>
+
+    <body>
+      <cy-test-element id='element'>Click me!</cy-test-element>
+      <script>
+        class CyTestElement extends HTMLElement {
+          constructor() {
+            super();
+
+            this.attachShadow({ mode: 'open' });
+            const button = document.createElement('button');
+            const slot = document.createElement('slot');
+
+            button.setAttribute('data-test-id', 'my-button')
+
+            button.appendChild(slot);
+
+            button.addEventListener('click', () => {
+              const div = document.createElement('div');
+              div.textContent = 'Clicked'
+
+              this.shadowRoot.appendChild(div);
+            });
+
+            this.shadowRoot.appendChild(
+                button
+            );
+          }
+        }
+
+        customElements.define('cy-test-element', CyTestElement);
+      </script>
+    </body>
+</html>
diff --git a/packages/driver/cypress/integration/commands/actions/click_spec.js b/packages/driver/cypress/integration/commands/actions/click_spec.js
@@ -3985,6 +3985,13 @@ describe('shadow dom', () => {
 
     cy.get('#shadow-element-1').click()
   })
+
+  // https://github.com/cypress-io/cypress/issues/18008
+  it('ignores the covering shadow host', () => {
+    cy.visit('/fixtures/shadow-dom-button.html')
+
+    cy.get('#element').shadow().find('[data-test-id="my-button"]').click()
+  })
 })
 
 describe('mouse state', () => {
diff --git a/packages/driver/src/cy/ensures.ts b/packages/driver/src/cy/ensures.ts
@@ -328,11 +328,20 @@ export const create = (state, expect) => {
     const cmd = state('current').get('name')
 
     if (!$dom.isDescendent($el1, $el2)) {
+      // https://github.com/cypress-io/cypress/issues/18008
+      // when an element inside a shadow root is covered by its shadow host
+      if (
+        $dom.isWithinShadowRoot($el1.get(0)) &&
+          $el1.get(0).getRootNode() === $el2.get(0).shadowRoot
+      ) {
+        return
+      }
+
       if ($el2) {
         const element1 = $dom.stringify($el1)
         const element2 = $dom.stringify($el2)
 
-        $errUtils.throwErrByPath('dom.covered', {
+        return $errUtils.throwErrByPath('dom.covered', {
           onFail,
           args: { cmd, element1, element2 },
           errProps: {
