fix: AUT Redirect bug on form / anchor target

packages/driver/cypress/fixtures/issue-1244.html

@@ -0,0 +1,71 @@
+<script>
+  let setCounter = 0
+  let getCounter = 0
+  const { getAttribute, setAttribute } = HTMLElement.prototype
+  HTMLElement.prototype.getAttribute = function() {
+    if (this.tagName === 'FORM' || this.tagName === 'A') {
+      getCounter++
+    }
+    return getAttribute.apply(this, arguments)
+  }
+  HTMLElement.prototype.setAttribute = function(name) {
+    if (this.tagName === 'FORM' || this.tagName === 'A' && !name.startsWith('data-cypress')) {
+      setCounter++
+    }
+    return setAttribute.apply(this, arguments)
+  }
+  function handleEventTarget(e) {
+    if (e.target.target !== '_top') {
+      e.target.target = '_top'
+    }
+    if (e.target.target !== '_top') {
+      throw new Error('target property must be top')
+    }
+  }  
+  function handleEventAttribute(e) {
+    if (e.target.getAttribute('target') !== '_top') {
+      e.target.setAttribute('target', '_top')
+    }
+    if (e.target.getAttribute('target') !== '_top') {
+      throw new Error('Get Attribute must have top')
+    }
+  }
+  window.getCounters = () => {
+    return {
+      getCounter,
+      setCounter
+    }
+  }
+</script>
+<div>
+  <form method="GET" action="/fixtures/dom.html" onsubmit="handleEventTarget(event)">
+    <button class="setTarget" type="submit">Submit setTarget</button>
+  </form>
+  <form method="GET" action="/fixtures/dom.html" onsubmit="handleEventAttribute(event)">
+    <button class="setAttr" type="submit">Submit setAttribute</button>
+  </form>
+  <form target="_top" method="GET" action="/fixtures/dom.html">
+    <button class="inline_top" type="submit">Submit inline top</button>
+  </form>
+  <form target="_parent" method="GET" action="/fixtures/dom.html">
+    <button class="inline_parent" type="submit">Submit inline parent</button>
+  </form>
+  <form target="_self" method="GET" action="/fixtures/dom.html">
+    <button class="inline_self" type="submit">Submit inline self</button>
+  </form>
+  <form target="_blank" method="GET" action="/fixtures/dom.html">
+    <button class="inline_blank" type="submit">Submit blank</button>
+  </form>
+  <form target="invalid" method="GET" action="/fixtures/dom.html">
+    <button class="inline_invalid" type="submit">Submit invalid</button>
+  </form>
+  <div>
+    <a class="setTarget" href="/fixtures/dom.html" onclick="handleEventTarget(event)">Link setTarget</a>
+    <a class="setAttr" href="/fixtures/dom.html" onclick="handleEventAttribute(event)">Link setAttribute</a>
+    <a class="inline_top" href="/fixtures/dom.html" target="_top">Link top</a>
+    <a class="inline_parent" href="/fixtures/dom.html" target="_parent">Link parent</a>
+    <a class="inline_self" href="/fixtures/dom.html" target="_self">Link self</a>
+    <a class="inline_blank" href="/fixtures/dom.html" target="_blank">Link _blank</a>
+    <a class="inline_invalid" href="/fixtures/dom.html" target="invalid">Link invalid</a>
+  </div>
+</div>

packages/driver/cypress/integration/issues/1244_spec.js

@@ -0,0 +1,56 @@
+describe('issue 1244', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/issue-1244.html').then(() => {
+      cy.on('window:before:unload', (e) => {
+        const win = cy.state('window')
+
+        expect(win.getCounters()).to.deep.equal({ getCounter: 0, setCounter: 0 })
+      })
+    })
+  })
+
+  for (const [el, target, action] of [['button', 'form', 'submit'], ['a', 'a', 'click']]) {
+    // <form> submit, <a> click
+    describe(`<${target}> ${action}`, () => {
+      it('correctly redirects when target=_top with target.target =', () => {
+        cy.get(`${el}.setTarget`).click()
+        cy.get('#dom').should('contain', 'DOM')
+        cy.url().should('include', 'dom.html')
+      })
+
+      it('correctly redirects when target=_top with setAttribute', () => {
+        cy.get(`${el}.setAttr`).click()
+        cy.get('#dom').should('contain', 'DOM')
+        cy.url().should('include', 'dom.html')
+      })
+
+      it('correctly redirects when target=_top inline in dom', () => {
+        cy.get(`${el}.inline_top`).click()
+        cy.get('#dom').should('contain', 'DOM')
+        cy.url().should('include', 'dom.html')
+      })
+
+      it('correctly redirects when target=_parent inline in dom', () => {
+        cy.get(`${el}.inline_parent`).click()
+        cy.get('#dom').should('contain', 'DOM')
+        cy.url().should('include', 'dom.html')
+      })
+
+      it('maintains behavior when target=_self', () => {
+        cy.get(`${el}.inline_self`).click()
+        cy.get('#dom').should('contain', 'DOM')
+        cy.url().should('include', 'dom.html')
+      })
+
+      it('maintains behavior when target=_blank,invalid', () => {
+        cy.get(`${el}.inline_blank`).click().then(() => {
+          cy.url().should('not.include', 'dom.html')
+        })
+
+        cy.get(`${el}.inline_invalid`).click().then(() => {
+          cy.url().should('not.include', 'dom.html')
+        })
+      })
+    })
+  }
+})

packages/driver/src/cy/listeners.js

@@ -1,4 +1,5 @@
 const _ = require('lodash')
+const { handleInvalidEventTarget, handleInvalidAnchorTarget } = require('./top_attr_guards')
 
 const HISTORY_ATTRS = 'pushState replaceState'.split(' ')
 
@@ -9,9 +10,9 @@ const removeAllListeners = () => {
   listenersAdded = false
 
   for (let e of events) {
-    const [win, event, cb] = e
+    const [win, event, cb, capture] = e
 
-    win.removeEventListener(event, cb)
+    win.removeEventListener(event, cb, capture)
   }
 
   // reset all the events
@@ -20,10 +21,10 @@ const removeAllListeners = () => {
   return null
 }
 
-const addListener = (win, event, fn) => {
-  events.push([win, event, fn])
+const addListener = (win, event, fn, capture) => {
+  events.push([win, event, fn, capture])
 
-  win.addEventListener(event, fn)
+  win.addEventListener(event, fn, capture)
 }
 
 const eventHasReturnValue = (e) => {
@@ -101,6 +102,11 @@ module.exports = {
       return callbacks.onSubmit(e)
     })
 
+    // Handling the situation where "_top" is set on the <form> / <a> element, either in
+    // html or dynamically, by tapping in at the capture phase of the events
+    addListener(contentWindow, 'submit', handleInvalidEventTarget, true)
+    addListener(contentWindow, 'click', handleInvalidAnchorTarget, true)
+
     contentWindow.alert = callbacks.onAlert
     contentWindow.confirm = callbacks.onConfirm
   },

packages/driver/src/cy/top_attr_guards.ts

@@ -0,0 +1,61 @@
+import * as $elements from '../dom/elements'
+
+const invalidTargets = new Set(['_parent', '_top'])
+
+/**
+ * Guard against target beting set to something other than blank or self, while trying
+ * to preserve the appearance of having the correct target value.
+ */
+export function handleInvalidEventTarget (e: Event & {target: HTMLFormElement | HTMLAnchorElement}) {
+  let targetValue = e.target.target
+
+  if (invalidTargets.has(e.target.target)) {
+    e.target.target = ''
+  }
+
+  const { getAttribute, setAttribute } = e.target
+  const targetDescriptor = Object.getOwnPropertyDescriptor(e.target, 'target')
+
+  e.target.getAttribute = function (k) {
+    if (k === 'target') {
+      return targetValue
+    }
+
+    return getAttribute.call(this, k)
+  }
+
+  e.target.setAttribute = function (k, v) {
+    if (k === 'target') {
+      targetValue = v
+
+      return $elements.callNativeMethod(this, 'setAttribute', 'cyTarget', v)
+    }
+
+    return setAttribute.call(this, k, v)
+  }
+
+  if (!targetDescriptor) {
+    Object.defineProperty(e.target, 'target', {
+      configurable: false,
+      set (value) {
+        return targetValue = value
+      },
+      get () {
+        return targetValue
+      },
+    })
+  }
+}
+
+/**
+ * We need to listen to all click events on the window, but only handle anchor elements,
+ * as those might be the ones where we have an incorrect "target" attr, or could have one
+ * dynamically set in subsequent event bubbling.
+ *
+ * @param e
+ */
+export function handleInvalidAnchorTarget (e: Event & {target: HTMLAnchorElement}) {
+  if (e.target.tagName === 'A') {
+    handleInvalidEventTarget(e)
+  }
+}

packages/driver/src/dom/elements.ts

@@ -256,6 +256,7 @@ const nativeMethods = {
   addRange: window.Selection.prototype.addRange,
   execCommand: window.document.execCommand,
   getAttribute: window.Element.prototype.getAttribute,
+  setAttribute: window.Element.prototype.setAttribute,
   setSelectionRange: _nativeSetSelectionRange,
   modify: window.Selection.prototype.modify,
   focus: _nativeFocus,