Encountering tagName.toLowerCase is not a function. Please help

[nimmala89]

Hi, I'm trying to automate a web application built on Angular on the front end.
I have a form where I need to click a button.

Html Code :

Javascript code to click :

cy.get('.modal-body.container > .mat-dialog-content > :nth-child(1) > form > :nth-child(2) > :nth-child(4) > :nth-child(1) > div > a')
  .click()

Error in Cypress runner :

I do not understand why I see the tagName.toLowerCase() function while executing a click on the ADD BUTTON of the form page.There is no function with that name in my code.

STEPS TO REPRODUCE

1. Login into the application
2. Navigate to the page.
3. Click to open form.
4. Click Add Context button as shown below.

Expected : The element must be clicked.

Actual : I see the error in Cypress Runner as above.

NOTE :
Seems like a bug to me as I consulted my developer and there is no such method in his code.

[jennifer-shehane]

This is being thrown from within Cypress at this line, so is a bug: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/dom/elements.ts#L357:L357

This code hasn't really been changed since 3.5.0, so it's strange that it's just now occurring as I haven't seen anyone else with this error.

This seems to be implying that Element.tagName is returning something other than a String (not undefined or null though). But the very definition of this is that it returns a String.

Is there any way you can provide an example to reproduce this? Or some hints on something outside of regular DOM elements that you're using in your web application (shadow dom, web components, etc)? I can't reproduce it with the information provided which means we can't exactly track down how to go about fixing it. You can also email any info needed to reproduce to support@cypress.io if you don't want to publicly post.

[nimmala89]

Hi @jennifer-shehane , I have sent a detailed email to the address provided. Please look into it and let me know if there is a solution.

Thanks !

[jennifer-shehane]

Closing as a reproducible example was never provided.

Please comment if there is new information to provide concerning the original issue and we can reopen.

[Phillipe-Bojorquez]

@jennifer-shehane When moving from cypress 4.8 to cypress 4.9-5.3 I am seeing this error.

Previously this block of code ran and produced a result:

it('Allows you to reselect a customer', () => {
      let initialAddress = '';
      let initialOrderId = '';

      // confirm the address is populated
      cy.get(selectors.addressInput)
        .invoke('val')
        .then((val) => {
          initialAddress = val;
        })
        .should('not.have.value', '');

After upgrading to version 4.9 or attempting an upgrade to the latest I get these errors when the test runs:

It errors out on the .should() portion of the code. I have tried getting rid of the .then and use a .should against the invoke but the same error occures.

Error:       TypeError: Cannot read property 'tagName' of undefined
    at getTagName (http://localhost:8000/__cypress/runner/cypress_runner.js:178614:22)
    at Module.isValueNumberTypeElement (http://localhost:8000/__cypress/runner/cypress_runner.js:178597:35)
    at Proxy.<anonymous> (http://localhost:8000/__cypress/runner/cypress_runner.js:167884:20)
    at Proxy.methodWrapper (http://localhost:8000/__cypress/runner/cypress_runner.js:80897:25)
    at applyChainer (http://localhost:8000/__cypress/runner/cypress_runner.js:154578:32)
    at http://localhost:8000/__cypress/runner/cypress_runner.js:154632:16
    at arrayReduce (http://localhost:8000/__cypress/runner/cypress_runner.js:25494:21)
    at Function.reduce (http://localhost:8000/__cypress/runner/cypress_runner.js:34518:14)
    at applyChainers (http://localhost:8000/__cypress/runner/cypress_runner.js:154609:24)
From previous event:
    at Context.shouldFn (http://localhost:8000/__cypress/runner/cypress_runner.js:154638:23)
    at Context.should (http://localhost:8000/__cypress/runner/cypress_runner.js:154656:23)
    at Context.<anonymous> (http://localhost:8000/__cypress/runner/cypress_runner.js:169673:21)
    at http://localhost:8000/__cypress/runner/cypress_runner.js:169097:15
From previous event:
    at runCommand (http://localhost:8000/__cypress/runner/cypress_runner.js:169076:8)
    at next (http://localhost:8000/__cypress/runner/cypress_runner.js:169222:14)
    at http://localhost:8000/__cypress/runner/cypress_runner.js:169250:16

[WSINTRA]

Getting same error, unable to provide a reproducible code snippet.

[WSINTRA]

Getting same error, unable to provide a reproducible code snippet.

One thing to note. In this code I am also using the variable called tagName as a property in my codebase. Could be a reference issue.

[cacieprins]

A minimal reproduction that likely points to a root cause:

form.html:

<!DOCTYPE html>

<body>
  <form>
    <input id="tagName" type="text" />
  </form>
</body>

spec.cy.js:

describe('page', () => {
  it('works', () => {
    cy.visit('cypress/fixtures/form.html')

    cy.get('#tagName').should('exist')
    cy.get('form').should('exist')
  })
})

This is due to how inputs with IDs interact with the form element itself: All input IDs that are children of a form become properties on that HTMLFormElement, keyed to that id. Such that:

const form = document.createElement('form')
console.log(form.tagName === 'FORM') // true
const input = document.createElement('input')
input.id = 'tagName'
form.appendChild(input)
console.log(form.tagName === 'FORM') // false
console.log(form.tagName === input) // true

The primary workaround is to not give input elements IDs that will overwrite properties of the HTMLFormElement, or otherwise overwrite properties of the HTMLFormElement.

[utkarshxplor]

Hello @jennifer-shehane - do we have any update on this issue?