Ignore dangling node in DOM tree. (#6787)

sainthkh · brian-mann · web-flow · commit ee74c0132813 · 2020-03-25T13:52:50.000-04:00
* Fix

* content -&gt; p for clarity.

* Fix comment.

* Add comments for future reference.

* Simplify condition.

* Update packages/driver/src/dom/transform.ts

cleanup ternary stylistically and cache `backface-visibility` value

* fix backfacevisibility types

Co-authored-by: Brian Mann &lt;brian.mann86@gmail.com&gt;
diff --git a/packages/driver/src/dom/transform.ts b/packages/driver/src/dom/transform.ts
@@ -11,7 +11,7 @@ export const detectVisibility = ($el: any) => {
   return elIsTransformedToZero(list) ? 'transformed' : 'visible'
 }
 
-type BackfaceVisibility = 'hidden' | 'visible'
+type BackfaceVisibility = 'hidden' | 'visible' | ''
 type TransformStyle = 'flat' | 'preserve-3d'
 type Matrix2D = [
   number, number, number,
@@ -33,7 +33,11 @@ interface TransformInfo {
 }
 
 const extractTransformInfoFromElements = ($el: any, list: TransformInfo[] = []): TransformInfo[] => {
-  list.push(extractTransformInfo($el))
+  const info = extractTransformInfo($el)
+
+  if (info) {
+    list.push(info)
+  }
 
   const $parent = $el.parent()
 
@@ -44,12 +48,23 @@ const extractTransformInfoFromElements = ($el: any, list: TransformInfo[] = []):
   return extractTransformInfoFromElements($parent, list)
 }
 
-const extractTransformInfo = ($el): TransformInfo => {
+const extractTransformInfo = ($el): TransformInfo | null => {
   const el = $el[0]
   const style = getComputedStyle(el)
 
+  const backfaceVisibility = style.getPropertyValue('backface-visibility') as BackfaceVisibility
+
+  // When an element is not in the DOM tree, getComputedStyle() returns empty string.
+  // In an edge case from frameworks like `vue-fragment`
+  // `parentNode` is modified and out of the DOM tree.
+  // @see https://github.com/cypress-io/cypress/pull/6787
+  // @see https://github.com/cypress-io/cypress/issues/6745
+  if (backfaceVisibility === '') {
+    return null
+  }
+
   return {
-    backfaceVisibility: style.getPropertyValue('backface-visibility') as BackfaceVisibility,
+    backfaceVisibility,
     transformStyle: style.getPropertyValue('transform-style') as TransformStyle,
     transform: style.getPropertyValue('transform'),
   }
diff --git a/packages/driver/test/cypress/fixtures/dangling-element.html b/packages/driver/test/cypress/fixtures/dangling-element.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dangling element</title>
+  </head>
+  <body>
+    <div>Some content</div>
+  </body>
+  <script>
+    // Simplified version of what vue-fragment do.
+    // https://github.com/y-nk/vue-fragment/blob/master/src/component.js
+
+    const freeze = (object, property, value) => {
+      Object.defineProperty(object, property, {
+        configurable: true,
+        get () {
+          return value
+        },
+        set (v) {
+          // eslint-disable-next-line no-console
+          console.warn(`tried to set frozen property ${property} with ${v}`)
+        },
+      })
+    }
+
+    // If you want to see what's going on here visually, 
+    // check https://github.com/cypress-io/cypress/pull/6787
+
+    // 1. What vue does by default: 
+    // Create component and append it to the DOM tree.
+    const parent = document.getElementsByTagName('body')[0]
+
+    const container = document.createElement('div')
+
+    container.classList.add('container')
+
+    const p = document.createElement('p')
+
+    p.innerText = 'hello world'
+    p.classList.add('hello')
+
+    parent.appendChild(container)
+    container.appendChild(p)
+
+    // 2. vue-fragment adds the p to the parent.
+    // but forcefully set the p's parentNode to container.
+    parent.appendChild(p)
+    freeze(p, 'parentNode', container)
+
+    // 3. vue-fragment removes container from the parent.
+    // but forcefully set the container's parentNode to parent.
+    parent.removeChild(container)
+    freeze(container, 'parentNode', parent)
+  </script>
+</html>
diff --git a/packages/driver/test/cypress/integration/dom/visibility_spec.ts b/packages/driver/test/cypress/integration/dom/visibility_spec.ts
@@ -835,6 +835,12 @@ describe('src/cypress/dom/visibility', () => {
           expect(el).to.be.visible
         })
 
+        // https://github.com/cypress-io/cypress/issues/6745
+        it('is visible even if there is a dangling element in the tree', () => {
+          cy.visit('/fixtures/dangling-element.html')
+          cy.get('.hello')
+        })
+
         it('is hidden when an element is scaled to X axis in 0', () => {
           const el = add(`<div style="transform: scaleX(0)">ScaleX(0)</div>`)
 
