From a4bc1b1e20bd334cad478cfb5cdda947d88dba5c Mon Sep 17 00:00:00 2001
From: Zach Panzarino <zachary@panzarino.com>
Date: Fri, 24 Jul 2020 04:43:31 -0400
Subject: [PATCH 1/6] fix: prevent XHR requests from getting stuck in an
 infinite retry loop

---
 packages/driver/src/cy/snapshots.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/driver/src/cy/snapshots.js b/packages/driver/src/cy/snapshots.js
index 316ff0514288..cbde8c21638f 100644
--- a/packages/driver/src/cy/snapshots.js
+++ b/packages/driver/src/cy/snapshots.js
@@ -147,7 +147,12 @@ const create = ($$, state) => {
 
       // TODO: throw error here if cy is undefined!
 
-      const $body = $$('body').clone()
+      // for some reason certain libraries (ex. polymer)
+      // get stuck here at cloneNode within $().clone()
+      // so we have to use importNode to prevent hanging
+      // and then re-wrap in jQuery
+      // https://github.com/cypress-io/cypress/issues/1068
+      const $body = $$(document.importNode($$('body')[0], true))
 
       // for the head and body, get an array of all CSS,
       // whether it's links or style tags

From 88f6fb9ce7858b8ec7983c5131101ab7e25ff2de Mon Sep 17 00:00:00 2001
From: Zach Panzarino <zachary@panzarino.com>
Date: Fri, 24 Jul 2020 05:54:52 -0400
Subject: [PATCH 2/6] Fix ownership issues with cloning doc for snapshot

---
 packages/driver/src/cy/snapshots.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/driver/src/cy/snapshots.js b/packages/driver/src/cy/snapshots.js
index cbde8c21638f..de1ceff06119 100644
--- a/packages/driver/src/cy/snapshots.js
+++ b/packages/driver/src/cy/snapshots.js
@@ -147,12 +147,12 @@ const create = ($$, state) => {
 
       // TODO: throw error here if cy is undefined!
 
-      // for some reason certain libraries (ex. polymer)
-      // get stuck here at cloneNode within $().clone()
-      // so we have to use importNode to prevent hanging
-      // and then re-wrap in jQuery
+      // certain frameworks (ex. polymer) which use the shadow DOM
+      // get stuck here if we try to use cloneNode
+      // so we have to use importNode to clone the element
+      // to the outer doc and then reassign ownership to the original doc
       // https://github.com/cypress-io/cypress/issues/1068
-      const $body = $$(document.importNode($$('body')[0], true))
+      const $body = $$(state('document').adoptNode(document.importNode($$('body')[0], true)))
 
       // for the head and body, get an array of all CSS,
       // whether it's links or style tags

From 7c7ccfc2d8b3f8c9380152d7b89b6b336212cef5 Mon Sep 17 00:00:00 2001
From: Zach Panzarino <zachary@panzarino.com>
Date: Sun, 26 Jul 2020 19:25:31 -0400
Subject: [PATCH 3/6] Update comment explanation

---
 packages/driver/src/cy/snapshots.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/driver/src/cy/snapshots.js b/packages/driver/src/cy/snapshots.js
index de1ceff06119..52d4004f5729 100644
--- a/packages/driver/src/cy/snapshots.js
+++ b/packages/driver/src/cy/snapshots.js
@@ -147,10 +147,10 @@ const create = ($$, state) => {
 
       // TODO: throw error here if cy is undefined!
 
-      // certain frameworks (ex. polymer) which use the shadow DOM
-      // get stuck here if we try to use cloneNode
+      // cloneNode can actually trigger functions attached to custom elements
       // so we have to use importNode to clone the element
       // to the outer doc and then reassign ownership to the original doc
+      // https://github.com/cypress-io/cypress/issues/7187
       // https://github.com/cypress-io/cypress/issues/1068
       const $body = $$(state('document').adoptNode(document.importNode($$('body')[0], true)))
 

From febc80ede0cd11b2a50b397265870b5e577f7a7c Mon Sep 17 00:00:00 2001
From: Zach Panzarino <zachary@panzarino.com>
Date: Sun, 26 Jul 2020 21:16:57 -0400
Subject: [PATCH 4/6] Add tests

---
 .../driver/cypress/fixtures/shadow-dom.html   | 18 ++++++++++++++
 .../cypress/integration/cy/snapshot_spec.js   | 24 +++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index ecb3ed20eeef..e6312c027c41 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -20,7 +20,13 @@
     </cy-test-element>
     <cy-test-element id="shadow-element-7" innerClass="in-and-out" content="Shadow Content 7"></cy-test-element>
 
+    <cy-snapshot-element id="snapshot-element"></cy-snapshot-element>
+
     <script type="text/javascript">
+      // define empty functions to stub in tests
+      window.shadowScreenshotConstructor = function () {}
+      window.shadowScreenshotAttributeChanged = function () {}
+
       if (window.customElements) {
         window.customElements.define('cy-test-element', class extends HTMLElement {
           constructor () {
@@ -34,6 +40,18 @@
             root.innerHTML = `<p class="${className}">${content}</p><input /><slot></slot>`
           }
         })
+
+        window.customElements.define('cy-snapshot-element', class extends HTMLElement {
+          constructor () {
+            super()
+
+            window.shadowScreenshotConstructor()
+          }
+
+          attributeChangedCallback () {
+            window.shadowScreenshotAttributeChanged()
+          }
+        })
       }
 
       if (window.location.search.includes('wrap-qsa')) {
diff --git a/packages/driver/cypress/integration/cy/snapshot_spec.js b/packages/driver/cypress/integration/cy/snapshot_spec.js
index 0faa9b7960ca..0e16f8f381c7 100644
--- a/packages/driver/cypress/integration/cy/snapshot_spec.js
+++ b/packages/driver/cypress/integration/cy/snapshot_spec.js
@@ -166,4 +166,28 @@ describe('driver/src/cy/snapshots', () => {
       })
     })
   })
+
+  context('shadow dom', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/shadow-dom.html')
+    })
+
+    // https://github.com/cypress-io/cypress/issues/7187
+    it('does not trigger shadow dom constructor', () => {
+      const constructor = cy.stub(cy.state('window'), 'shadowScreenshotConstructor')
+
+      cy.createSnapshot()
+
+      expect(constructor).not.to.be.called
+    })
+
+    // https://github.com/cypress-io/cypress/issues/7187
+    it('does not trigger shadow dom attributeChangedCallback', () => {
+      const attributeChanged = cy.stub(cy.state('window'), 'shadowScreenshotAttributeChanged')
+
+      cy.createSnapshot()
+
+      expect(attributeChanged).not.to.be.called
+    })
+  })
 })

From 8cd1c399650b93e34556a554ad62a892d872a1bc Mon Sep 17 00:00:00 2001
From: Zach Panzarino <zachary@panzarino.com>
Date: Mon, 27 Jul 2020 17:27:59 -0400
Subject: [PATCH 5/6] Make clear custom elements

---
 .../cypress/fixtures/custom-elements.html     | 29 +++++++++++++++++++
 .../driver/cypress/fixtures/shadow-dom.html   | 18 ------------
 .../cypress/integration/cy/snapshot_spec.js   |  4 +--
 3 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 packages/driver/cypress/fixtures/custom-elements.html

diff --git a/packages/driver/cypress/fixtures/custom-elements.html b/packages/driver/cypress/fixtures/custom-elements.html
new file mode 100644
index 000000000000..611bddc44f48
--- /dev/null
+++ b/packages/driver/cypress/fixtures/custom-elements.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Custom Elements</title>
+  </head>
+  <body>
+    <cy-snapshot-element id="snapshot-element"></cy-snapshot-element>
+
+    <script type="text/javascript">
+      // define empty functions to stub in tests
+      window.shadowScreenshotConstructor = function () {}
+      window.shadowScreenshotAttributeChanged = function () {}
+
+      if (window.customElements) {
+        window.customElements.define('cy-snapshot-element', class extends HTMLElement {
+          constructor () {
+            super()
+
+            window.shadowScreenshotConstructor()
+          }
+
+          attributeChangedCallback () {
+            window.shadowScreenshotAttributeChanged()
+          }
+        })
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index e6312c027c41..ecb3ed20eeef 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -20,13 +20,7 @@
     </cy-test-element>
     <cy-test-element id="shadow-element-7" innerClass="in-and-out" content="Shadow Content 7"></cy-test-element>
 
-    <cy-snapshot-element id="snapshot-element"></cy-snapshot-element>
-
     <script type="text/javascript">
-      // define empty functions to stub in tests
-      window.shadowScreenshotConstructor = function () {}
-      window.shadowScreenshotAttributeChanged = function () {}
-
       if (window.customElements) {
         window.customElements.define('cy-test-element', class extends HTMLElement {
           constructor () {
@@ -40,18 +34,6 @@
             root.innerHTML = `<p class="${className}">${content}</p><input /><slot></slot>`
           }
         })
-
-        window.customElements.define('cy-snapshot-element', class extends HTMLElement {
-          constructor () {
-            super()
-
-            window.shadowScreenshotConstructor()
-          }
-
-          attributeChangedCallback () {
-            window.shadowScreenshotAttributeChanged()
-          }
-        })
       }
 
       if (window.location.search.includes('wrap-qsa')) {
diff --git a/packages/driver/cypress/integration/cy/snapshot_spec.js b/packages/driver/cypress/integration/cy/snapshot_spec.js
index 0e16f8f381c7..69e6dec2d00a 100644
--- a/packages/driver/cypress/integration/cy/snapshot_spec.js
+++ b/packages/driver/cypress/integration/cy/snapshot_spec.js
@@ -167,9 +167,9 @@ describe('driver/src/cy/snapshots', () => {
     })
   })
 
-  context('shadow dom', () => {
+  context('custom elements', () => {
     beforeEach(() => {
-      cy.visit('/fixtures/shadow-dom.html')
+      cy.visit('/fixtures/custom-elements.html')
     })
 
     // https://github.com/cypress-io/cypress/issues/7187

From d28d2882ab5cad9b65b1734bcf5f9b410ca8eba3 Mon Sep 17 00:00:00 2001
From: Zach Panzarino <zachary@panzarino.com>
Date: Tue, 28 Jul 2020 12:15:52 -0400
Subject: [PATCH 6/6] Update comments

---
 packages/driver/cypress/integration/cy/snapshot_spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/driver/cypress/integration/cy/snapshot_spec.js b/packages/driver/cypress/integration/cy/snapshot_spec.js
index 69e6dec2d00a..0e916033351b 100644
--- a/packages/driver/cypress/integration/cy/snapshot_spec.js
+++ b/packages/driver/cypress/integration/cy/snapshot_spec.js
@@ -173,7 +173,7 @@ describe('driver/src/cy/snapshots', () => {
     })
 
     // https://github.com/cypress-io/cypress/issues/7187
-    it('does not trigger shadow dom constructor', () => {
+    it('does not trigger constructor', () => {
       const constructor = cy.stub(cy.state('window'), 'shadowScreenshotConstructor')
 
       cy.createSnapshot()
@@ -182,7 +182,7 @@ describe('driver/src/cy/snapshots', () => {
     })
 
     // https://github.com/cypress-io/cypress/issues/7187
-    it('does not trigger shadow dom attributeChangedCallback', () => {
+    it('does not trigger attributeChangedCallback', () => {
       const attributeChanged = cy.stub(cy.state('window'), 'shadowScreenshotAttributeChanged')
 
       cy.createSnapshot()