fix (#19262)

sainthkh · emilyrohrbough · mjhenkes · web-flow · commit 09bcc5b0ff6b · 2021-12-10T09:17:03.000-08:00
Co-authored-by: Emily Rohrbough &lt;emilyrohrbough@users.noreply.github.com&gt;
Co-authored-by: Matt Henkes &lt;mjhenkes@gmail.com&gt;
diff --git a/packages/driver/cypress/fixtures/issue-17512.html b/packages/driver/cypress/fixtures/issue-17512.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+</head>
+<body>
+  <script>
+    function defaultBehavior(e) {
+      document.getElementById('result').innerHTML = JSON.stringify(e.target.getAttribute('target'))
+    }
+
+    function setAttributeBehavior(e) {
+      e.target.setAttribute('target', '_top')
+      document.getElementById('result2').innerHTML = JSON.stringify(e.target.getAttribute('target'))
+    }
+
+    function removeAttributeBehavior(e) {
+      e.target.setAttribute('target', '_top')
+      e.target.removeAttribute('target')
+      document.getElementById('result3').innerHTML = JSON.stringify(e.target.getAttribute('target'))
+    }
+  </script>
+
+  <div>
+    <a href="#" id="link" onclick="defaultBehavior(event)">link 1</a>
+    <div id="result"></div>
+  </div>
+
+  <div>
+    <a href="#" id="link2" onclick="setAttributeBehavior(event)">link 2</a>
+    <div id="result2"></div>
+  </div>
+
+  <div>
+    <a href="#" id="link3" onclick="removeAttributeBehavior(event)">link 3</a>
+    <div id="result3"></div>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/integration/issues/17512_spec.js b/packages/driver/cypress/integration/issues/17512_spec.js
@@ -0,0 +1,16 @@
+describe('issue 17512', () => {
+  beforeEach(() => {
+    cy.visit('fixtures/issue-17512.html')
+  })
+
+  it('returns null when target is not defined', () => {
+    cy.get('#link').click()
+    cy.get('#result').should('have.text', 'null')
+
+    cy.get('#link2').click()
+    cy.get('#result2').should('have.text', '"_top"')
+
+    cy.get('#link3').click()
+    cy.get('#result3').should('have.text', 'null')
+  })
+})
diff --git a/packages/driver/src/cy/top_attr_guards.ts b/packages/driver/src/cy/top_attr_guards.ts
@@ -8,16 +8,24 @@ const invalidTargets = new Set(['_parent', '_top'])
  */
 export function handleInvalidEventTarget (e: Event & {target: HTMLFormElement | HTMLAnchorElement}) {
   let targetValue = e.target.target
+  let targetSet = e.target.hasAttribute('target')
 
   if (invalidTargets.has(e.target.target)) {
     e.target.target = ''
   }
 
-  const { getAttribute, setAttribute } = e.target
+  const { getAttribute, setAttribute, removeAttribute } = e.target
   const targetDescriptor = Object.getOwnPropertyDescriptor(e.target, 'target')
 
   e.target.getAttribute = function (k) {
     if (k === 'target') {
+      // https://github.com/cypress-io/cypress/issues/17512
+      // When the target attribute doesn't exist, it should return null.
+      // @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute#non-existing_attributes
+      if (!targetSet) {
+        return null
+      }
+
       return targetValue
     }
 
@@ -26,6 +34,7 @@ export function handleInvalidEventTarget (e: Event & {target: HTMLFormElement |
 
   e.target.setAttribute = function (k, v) {
     if (k === 'target') {
+      targetSet = true
       targetValue = v
 
       return $elements.callNativeMethod(this, 'setAttribute', 'cyTarget', v)
@@ -34,6 +43,16 @@ export function handleInvalidEventTarget (e: Event & {target: HTMLFormElement |
     return setAttribute.call(this, k, v)
   }
 
+  e.target.removeAttribute = function (k) {
+    if (k === 'target') {
+      targetSet = false
+      targetValue = ''
+
+      // We're not using `$elements.callNativeMethod` here because it disallows `removeAttribute`.
+      return removeAttribute.call(this, k)
+    }
+  }
+
   if (!targetDescriptor) {
     Object.defineProperty(e.target, 'target', {
       configurable: false,
