cy.type() failed because it requires a DOM element. The subject received was: <window> The previous command that ran was: > cy.get()

[anywaynotme]

Current behavior

I use the following custom command:

Cypress.Commands.add('dropdown', {
 prevSubject: ['element', 'document', 'window', 'optional'],   
  }, (subject) => {
    cy.get(subject).type(`{downarrow}{enter}`)
  })

After I run the script in TypeScript format, i get the following error:

type
{downarrow}{enter}
CypressError
cy.type() failed because it requires a DOM element.

The subject received was:

  > <window>

The previous command that ran was:

  > cy.get()

Because this error occurred during a before all hook we are skipping the remaining tests in the current suite: Common PMP workflow

Although you have test retries enabled, we do not retry tests when before all or after all hooks fail

Desired behavior

No errors, everything should work like in a regular JS file, which works just fine

Test code to reproduce

launch the above mentioned command in a file with TS extension

Versions

Cypress version: the latest 7.3.0

[jennifer-shehane]

Can you provide the test code and an application to run this against to see the error (HTML file to visit). Thanks.

[anywaynotme]

Unfortunately, I cannot provide an application as it is highly confidential, but it doesn’t not depend on application, you can easily try it yourself by using the custom command I provided here for drop down type of input.

…

On Mon, May 24, 2021 at 9:43 PM Jennifer Shehane ***@***.***> wrote: Can you provide the test code and an application to run this against to see the error (HTML file to visit). Thanks. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16624 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQSIXWS3P4DI5C7AJGFSAN3TPKM3TANCNFSM45JLBBGA> .

[boneysaju]

I'm getting a similar error whilst using the withinIframe command

cy.type() failed because it requires a DOM element.
The subject received was:
  > jQuery{0}
The previous command that ran was:
  > cy.getInDocument()

The test code is
<input class="InputElement is-empty Input Input--empty" autocomplete="cc-number" autocorrect="off" spellcheck="false" type="text" name="cardnumber" data-elements-stable-field-name="cardNumber" inputmode="numeric" aria-label="Credit or debit card number" placeholder="Card number" aria-invalid="false" value="">

^^above solved by adding a wait

[atomar09]

This is failing if I add should() before find():

Complete Code:

describe('Cypress Asynchronous Nature', () => {
    it('should understand asynchronous nature of cypress', () => {
      cy.visit('https://courses.letskodeit.com/practice')

      cy.get('#product')
      .should('have.class', 'table-display')
      .and('have.attr', 'name')
      .find('tbody')
    })
  })

Error message:
cy.find() failed because it requires a DOM element.

The subject received was:

courses

The previous command that ran was:

cy.and()

All 2 subject validations failed on this subject.

[samnittala]

This is failing if I add should() before find():

Complete Code:

describe('Cypress Asynchronous Nature', () => {
    it('should understand asynchronous nature of cypress', () => {
      cy.visit('https://courses.letskodeit.com/practice')

      cy.get('#product')
      .should('have.class', 'table-display')
      .and('have.attr', 'name')
      .find('tbody')
    })
  })

Error message: cy.find() failed because it requires a DOM element.

The subject received was:

courses

The previous command that ran was:

cy.and()

All 2 subject validations failed on this subject.

Was this resolved. I ran into a similar issue
cy.get('table.class')
.find('tbody tr td')
.should('have.attr','title')
.and('contain','Some Text')
.find('input[type="text"]')

[letskodeit]

@samnittala no reply on this from Cypress folks.

@jennifer-shehane , were you able to check my code above and try it out?

[samnittala]

The workaround I did was to convert the 2 lines into i.e should & and now becomes contains('title','Some Text').
Cant see a reason why the should & and don't work.

[letskodeit]

Now you are using this?

cy.get('table.class')
.find('tbody tr td')
.should('have.attr','title')
.contains('title','Some Text')
.find('input[type="text"]')

[IswaryaSekar1510]

CypressError
cy.type() failed because it requires a DOM element.

The subject received was:

jQuery{0}

The previous command that ran was:

cy.getInDocument()

On testing stripe test card
cy.getWithinIframe('[name="cardnumber"]').type('5454545454545454');

[BlueWinds]

So there are a lot of different people commenting in here with different and unrelated issues, so it's hard to keep track of everything.

I'm going to try and respond to people individually, but generally please make sure your comment is actually related to the original report, and doesn't simply happen to have the same error message for different reasons.

@anywaynotme (original report)

Current behavior

I use the following custom command:

Cypress.Commands.add('dropdown', {
 prevSubject: ['element', 'document', 'window', 'optional'],   
  }, (subject) => {
    cy.get(subject).type(`{downarrow}{enter}`)
  })

cy.get() does not accept a DOM element as an argument - it's used for finding DOM elements on the page. You probably want cy.wrap() instead. https://docs.cypress.io/api/commands/wrap

---

@boneysaju

I'm getting a similar error whilst using the withinIframe command

cy.type() failed because it requires a DOM element.
The subject received was:
  > jQuery{0}
The previous command that ran was:
  > cy.getInDocument()

The test code is <input class="InputElement is-empty Input Input--empty" autocomplete="cc-number" autocorrect="off" spellcheck="false" type="text" name="cardnumber" data-elements-stable-field-name="cardNumber" inputmode="numeric" aria-label="Credit or debit card number" placeholder="Card number" aria-invalid="false" value="">

^^above solved by adding a wait

This is a "Detached DOM error" - I'll direct you to #7306 for lots of discussion and related workarounds. We'll be resolving this sort of thing more permanently in Cypress 12, coming out later this month.

---

@samnittala

This is failing if I add should() before find():

Complete Code:

describe('Cypress Asynchronous Nature', () => {
    it('should understand asynchronous nature of cypress', () => {
      cy.visit('https://courses.letskodeit.com/practice')

      cy.get('#product')
      .should('have.class', 'table-display')
      .and('have.attr', 'name')
      .find('tbody')
    })
  })

Error message: cy.find() failed because it requires a DOM element.

The subject received was:

courses

The previous command that ran was:

cy.and()

All 2 subject validations failed on this subject.

This is because some assertions change the subject. https://docs.cypress.io/api/commands/should#Yields:

In most cases, .should() yields the same subject it was given from the previous command.
However, some chainers change the subject. In the example below, the second .should() yields the string sans-serif because the chainer have.css, 'font-family' changes the subject.

You've run into this - .and('have.attr', 'name') changed the subject to "courses" rather than the DOM element.

This is super confusing behavior, I agree. I'd suggest opening a new issue to discuss changing this - I'm 100% on board that it shouldn't work like this, but it currently does. 🤷‍♀️

---

@IswaryaSekar1510

CypressError cy.type() failed because it requires a DOM element.

The subject received was:

jQuery{0}

The previous command that ran was:

cy.getInDocument()

On testing stripe test card cy.getWithinIframe('[name="cardnumber"]').type('5454545454545454');

This is another detached DOM error. Pointing you to #7306 again. We have a fix for this which will go out in Cypress 12.

[cypress-bot]

Released in 12.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.0.0, please open a new issue.