0
108
ViewsHow to find elements which are not visible in cypress?
I am checking the functionalities of cypress in the Facebook in sign up page of Facebook. I am getting the error element not found.
//Now checking the Create new account inputs
cy.get('[name="firstname"]').click();//i)-> Click on the firstname
cy.get('#u_5_a_BG > ._5dbc').should('not.be.visible');//ii)-> Check that error message is not displayed--> not working
cy.get('[name="lastname"]').click();//iii)-> Click on the last name to make the error message in the first name to be displayed
cy.get('#u_5_a_BG > ._5dbc').should('be.visible');//iv)-> Check that error message is diplayed--> not working
Could you tell me how to get the error image element because I tried using css selectors and it is not working? i have used the class of tag but it is still not working
Juan Pablo Isaza
2 answers
Answer question0
If you just want to check that element is present in the DOM but not visible you can use should('exist').
cy.get('selector').should('exist')
Or you can directly use the contains() to check that the error message is first not existent and then visible.
cy.get('[name="firstname"]').click()
cy.contains('What\'s your name?').should('not.exist')
cy.get('[name="lastname"]').click()
cy.contains('What\'s your name?').should('be.visible')
0
My approach, navigate relative to the named fields.
Other class selectors are likely to be generated and will change on next release.
There's still a possibility that the structure changes (or you get it wrong to start with), so as extra insurance add a check that the element is type <i>.
cy.get('[name="firstname"]').click()
cy.get('[name="firstname"]')
.parent()
.next() // icon is next from input's parent
.should('not.be.visible')
.should('have.prop', 'tagName', 'i') // double check navigating is successful
cy.get('[name="lastname"]').click();
cy.get('[name="firstname"]')
.parent()
.next()
.should('be.visible')