How to skip a test in Cypress conditionally?
The code snippet from Mochajs that I’m trying to take to my test in Cypress is:
it(‘should only test in the correct environment’, function() {
if (/* check test environment */) {
// make assertions
} else {
this.skip();
}
});
So what I’ve got in Cypress is:
it(‘shows the list’, function() {
if (queryFailed()) {
this.skip();
} else {
cy.get(‘.list’)
.should(‘be.visible’)
}
Note that I changed the arrow function in my it() to be a function() so that I can make use of this.
queryFailed() is a function that checks if the query succeeded or not.
function queryFailed() {
cy.get(‘.spin’)
.then($container => {
const htmlLoaded = $container[0].innerHTML;
if (htmlLoaded.indexOf('List') !== -1) {
return false;
}
if (htmlLoaded.indexOf('error') !== -1) {
return true;
}
cy.wait(1000);
queryFailed();
});
}
Briefly, if the content of the div element I’m waiting for has “error” then I know the query failed so I return true, otherwise I return false.
What I see in my tests after debugging, is that even though the condition works well, the async nature of JS executes the code in the else statement at the same time than the if. So the final output is as if there is no condition at all, since everything is tested.
Is there a better way of dealing with this async feature of JS?
Hi AriyashKumar,
I hope you are doing well, Your inquiry about the conditional test skipping in Cypress is much appreciated. Your active involvement in understanding our testing procedures is valued, and I’m delighted to furnish you with the relevant information.
To skip a test in Cypress conditionally, you can use the cy.skip() command within a conditional statement. Here’s a basic example:
it(‘Your Test Case’, () => {
// Your condition to skip the test
if (conditionToSkipTest) {
cy.skip();
}
// Rest of your test code
cy.visit(‘https://example.com’);
// … other test steps
});
Replace conditionToSkipTest with the actual condition that, when true, should skip the test. If the condition is met, cy.skip() will skip the test, and the remaining test code won’t be executed.
Keep in mind that skipping tests should be done thoughtfully, and it’s essential to provide clear reasons for skipping specific scenarios in your test suite.
Hi Ariyaskuam,
Thank you for your feedback on the testing code. I appreciate your insights and have made adjustments to leverage the asynchronous callback pattern in Cypress for more controlled testing. Below is the modified code:
I think you are almost there, but instead of the synchronous if () {…} else {…} pattern you need the asynchronous callback pattern.
it(‘shows the list’, function() {
const whenFailed = function() {
this.skip()
}
const whenSucceeded = function() {
cy.get(‘.list’).should(‘be.visible’)
}
queryFailed(whenFailed, whenSucceeded);
}
function queryFailed(whenFailed, whenSucceeded) {
cy.get(‘.spin’)
.then($container => {
const htmlLoaded = $container[0].innerHTML;
if (htmlLoaded.indexOf('List') !== -1) {
whenSucceeded();
return;
}
if (htmlLoaded.indexOf('error') !== -1) {
whenFailed();
return;
}
cy.wait(1000);
queryFailed(whenFailed, whenSucceeded);
});
}
Additionally, the provided code suggests leveraging Cypress’s built-in retries for waiting on content to appear. I’ve restructured the example to demonstrate a cleaner and more controlled testing pattern by splitting the tests into success and failure contexts. Each context handles its specific scenario, making the test more readable and maintainable.