CODEWITHSUNDEEP
cypress
Jérémy Gaultier
Jérémy Gaultier

Reputation: 11

Cypress testing element existence

I have an error with Cypress, i need to test for the presence of an element, i use cy.find(selector).length" but this command returns an error.

if (cy.find('.mdl-textfield__error').length > 0 || cy.find('.mdl-selectfield__error').length > 0) {

        }

Do you have an idea of the origin of the problem ?

Thanks in advance,

Upvotes: 0

Views: 396

Answers (3)

Fody
Fody

Reputation: 32148

Aside from the basic syntax errors as mentioned, if you look at the DOM you'll see that the error elements are always present, so testing for length > 0 or .should('exist') does nothing useful.

If you want to check if errors occurred test the inner text(s)

cy.get('.mdl-textfield__error').invoke('text').then(textfieldError => {
  cy.get('.mdl-selectfield__error').invoke('text').then(selectfieldError => {

    if (textfieldError || selectfieldError) {
      ... an error has occurred in one of the fields
    }
  })
})

You can also check for the is-invalid class which is used to control the error message and the red color

cy.get('.mdl-textfield').then($textfield => {
  cy.get('.mdl-selectfield').then($selectfield => {

    if ($textfield.hasClass(is-invalid) || $selectfield.hasClass(is-invalid)) {
      ... an error has occurred in one of the fields
    }
  })
})

Upvotes: 0

agoff
agoff

Reputation: 7151

Your exact usage would be a bit weird to actually use in Cypress. The closest equivalent would be a Cypress chain like...

/**
* Both `.should('exist')`s are implied by the `.get()`, but explicitly
* stating what you are doing is good.
*/
cy.get('.mdl-textfield__error').should('exist')
  .get('.mdl-selectfield__error').should('exist')
  // rest of your code

The above will work even if there are multiple elements matching those selectors. Additionally, the test will fail if either of those selectors does not yield any elements. That may not be your intended use, but Cypress does endorse conditional testing except under specific uses. (If you know you'll have these errors present, then just test that they are present!)

Upvotes: 0

Alex Izbas
Alex Izbas

Reputation: 625

It happens because of incorrect usage. As documentation says: .find() requires being chained off a command that yields DOM element(s). Please go through cypress and jquery documentations for more detailed explanations.

Related to your code example, you have to locate the parent element(which usually is always rendered), then search for its descendants:

cy.get('.parentSelector').then($parent => {
    if ($parent.find('.mdl-textfield__error ').length > 0) {

    // your code

    }
})

Upvotes: 1

Related Questions