cypress-if
Easy conditional if-else logic for your Cypress tests
Tested with cy.get
, cy.contains
, cy.find
, .then
, .within
commands in Cypress v9 and v10+.
-
📝 Conditional Commands For Cypress -
📺 Introduction To Using cypress-if Plugin to Write Conditional Cypress Commands -
📺 Confirm Cypress Command Execution Order Using Sinon.js Spies -
🎓 Covered in my Cypress Plugins course
Install
Add this package as a dev dependency
$ npm i -D cypress-if
# or using Yarn
$ yarn add -D cypress-if
Include this package in your spec or support file
import 'cypress-if'
Types for the .if()
and .else()
commands are described in the src/index.d.ts file.
Use
Let's say, there is a dialog that might sometimes be visible when you visit the page. You can close it by finding it using the cy.get command follows by the .if()
command. If the dialog really exists, then all commands chained after .if()
run. If the dialog is not found, then the rest of the chain is skipped.
cy.get('dialog#survey').if().contains('button', 'Close').click()
Assertions
By default, the .if()
command just checks the existence of the element returned by the cy.get
command. You might use instead a different assertion, like close a dialog if it is visible:
cy.get('dialog#survey').if('visible').contains('button', 'Close').click()
If the dialog was invisible, the visibility assertion fails, and the rest of the commands was skipped
You can use assertions with arguments
cy.wrap(42).if('equal', 42)...
You can use assertions with not
cy.get('#enrolled').if('not.checked').check()
Callback function
You can check the value yourself by writing a callback function, similar to the should(callback) and its many examples. You can use predicate and Chai assertions, but you cannot use any Cypress commands inside the callback, since it only synchronously checks the given value.
// predicate function returning a boolean
const isEven = (n) => n % 2 === 0
cy.wrap(42).if(isEven).log('even').else().log('odd')
// a function using Chai assertions
const is42 = (n) => expect(n).to.equal(42)
cy.wrap(42).if(is42).log('42!').else().log('some other number')
For more examples, see the cypress/e2e/callback.cy.js spec
Combining assertions
If you want to right complex assertions that combine other checks using AND, OR connectors, please use a callback function.
// AND predicate using &&
cy.wrap(42).if((n) => n > 20 && n < 50)
// AND connector using Chai "and" connector
cy.wrap(42).if((n) => expect(n).to.be.greaterThan(20).and.to.be.lessThan(50))
// OR predicate using ||
cy.wrap(42).if((n) => n > 20 || n < 10)
Unfortunately, there is no Chai OR connector.
For more examples, see the cypress/e2e/and-or.cy.js spec file
else command
You can chain .else()
command that is only executed if the .if()
is skipped.
cy.contains('Accept cookies')
.if('visible')
.click()
.else()
.log('no cookie banner')
The subject from the .if()
command will be passed to the .else()
chain, this allows you to work with the original element:
cy.get('#enrolled')
.if('checked')
.log('**already enrolled**')
// the checkbox should be passed into .else()
.else()
.check()
Multiple commands
Sometimes it makes sense to place the "if" or "else" commands into .then()
block
cy.get('#survey')
.if('visible')
.then(() => {
cy.log('closing the survey')
cy.contains('button', 'Close').click()
})
.else()
.then(() => {
cy.log('Already closed')
})
Within
You can attach .within()
command to the .if()
cy.get('#survey')
.if('visible')
.within(() => {
// fill the survey
// click the submit button
})
finally
You might want to finish if/else command chains and continue afterwards. This is the purpose for the .finally()
child command:
cy.get('#agreed')
.if('not.checked')
.check()
.else()
.log('already checked')
.finally()
.should('be.checked')
More examples
Check out the spec files in cypress/e2e folder. If you still have a question, open a GitHub issue.
Debugging
This module uses debug module to output verbose browser console messages when needed. To turn the logging on, open the browser's DevTools console and set the local storage entry:
localStorage.debug = 'cypress-if'
If you re-run the tests, you should see the messages appear in the console
See also
Small print
Author: Gleb Bahmutov <[email protected]> © 2022
- @bahmutov
- glebbahmutov.com
- blog
- videos
- presentations
- cypress.tips
- Cypress Tips & Tricks Newsletter
- my Cypress courses
License: MIT - do anything with the code, but don't blame me if it does not work.
Support: if you find any problems with this module, email / tweet / open issue on Github
MIT License
Copyright (c) 2022 Gleb Bahmutov <[email protected]>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.