https://cypress.io logo
Powered by
Using conditionals (if else)
# i-need-help
g
I have a simple test that I cannot seem to solve. I want to basically check if an element is visible or not. If element is visible, do xyz. Else do something else. The problem I’m facing is that cypress times out in the if block. It will try to look for the element and fail. It never reaches the else block like I want it to. I’ve tried using jquery but none of the elements have any static properties. All properties and classes are generated. And we don’t use id properties either. So I’m stuck in a hole. I’m not sure what the best way to tackle this. Any advice is appreciated.
g
Search for conditional testing at https://glebbahmutov.com/cypress-examples
p
The man aboves site and/or blog surely has better solutions than me, he is the reason I was even able to learn how to correctly use app actions for react and developed react app actions app that I use in my tests now! Please someone correct me if i'm wrong here with syntax because I havent had to do this myself but I do use cy.window() a fair amount when I want to force style changes and things on elements and I would definitely try and avoid conditional testing you could just split it into 2 seperate tests, one for visible and one for not visible by forcing the visibility. if you are checking for existance then thats different test 1
Copy code
// setting alias
cy.window().document.getElementById('myElement').as('myEl')
// check for existance
cy.get('@myEl').should('exist');
// setting display to none
cy.get('@myEl').style.display = 'none';
// assert visibility
cy.get('@myEl').should('not.be.visible')
// do xyz because the element is now not visible
test 2
Copy code
// setting alias
cy.window().document.getElementById('myElement').as('myEl')
// check for existance
cy.get('@myEl').should('exist');
// setting display to whatever it should be probably flex or block
cy.get('@myEl').style.display = 'flex';
// assert visibility
cy.get('@myEl').should('be.visible')
// do xyz because the element is visible
Please note you arent limited to getElementById here you could also use query selector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
A lot of current frameworks generate classes and such. I know that often i'll need to select by using wildcards or begins with selectors for gets like
Copy code
javascript
cy.get(`[class*="Style__Nav_"]`)
// this will give me all elements who have a class that contains Style__Nav_
cy.get(`[class^="Style__Nav_"]`)
// this will give me all elements who have a class that  begin with Style__Nav_
https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list and here is more tools for selectors when using querySelector if you need
a third option for selection and possibly even a solution to a conditional using the already bundled with cypress bluebird would be to use testing-library cypress which gives you access to the core testing-library and DOM library and some added cypress commands for querying, events and such https://testing-library.com/docs/cypress-testing-library/intro
g
what is the situation that the testing library supports that you cannot get using CSS and jQuery selectors?
p
Cant think of any, but some people might prefer the syntax so thought I could offer alternatives
g
nah, those people are mistaken, plus if you use plain CSS or even jQuery, you can try it out from DevTools
p
Fair enough, I also personally like using dev tools to confirm my selectors and get more information
g
Thank you all for all the suggestions
Just to confirm. Cypress charges by the number of ‘it’ blocks correct?
b
@green-elephant-92285 you got it!
PreviousNext
Powered by