diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index 7a7d20f8092f..e2e4a4d28310 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -38,7 +38,7 @@
     <div class="focusable" tabindex="1">
       <cy-test-element innerClass="inside-focusable" content="Inside Focusable"></cy-test-element>
     </div>
-    <cy-test-element innerClass="inside-non-visible" content="Not Visible" style="transform-style: preserve-3d; backface-visibility: hidden; transform: rotateY(180deg);"></cy-test-element>
+    <cy-test-element id="shadow-element-10" innerClass="inside-non-visible" content="Not Visible" style="display:block; transform-style: preserve-3d; backface-visibility: hidden; transform: rotateY(180deg);"></cy-test-element>
 
     <script type="text/javascript">
       if (window.customElements) {
diff --git a/packages/driver/cypress/integration/e2e/visibility_spec.js b/packages/driver/cypress/integration/e2e/visibility_spec.js
index 9215cc9b4c2c..d9a036ca1e9e 100644
--- a/packages/driver/cypress/integration/e2e/visibility_spec.js
+++ b/packages/driver/cypress/integration/e2e/visibility_spec.js
@@ -36,9 +36,13 @@ describe('visibility', () => {
       cy.get('.container-2').should('be.visible')
     })
 
+    // TODO: move with tests added in this PR when it merges: https://github.com/cypress-io/cypress/pull/8166
     it('non-visible ancestor causes element to not be visible', () => {
       cy.visit('/fixtures/shadow-dom.html')
-      cy.get('.inside-non-visible', { includeShadowDom: true }).should('not.be.visible')
+      cy
+      .get('#shadow-element-10')
+      .find('.shadow-div', { includeShadowDom: true })
+      .should('not.be.visible')
     })
   })
 })