Transcripted Summary
In here we're looking at a standard Cypress test.
You can see that we open a detail of a board and then check cart text one by one. In the application we can see that the cart texts are milk bread and juice and that's exactly what we are testing in our test. We'll check the text milk bread and juice.
The test works correctly but there's one little problem. We're kind of repeating ourselves over and over again. We're selecting the cart text then we are using the eq command to filter out the cart that we want and then we are checking the proper text.
Repeating yourself in the test is not the worst thing you can do especially if you have the benefit of better readability but we're not really getting that in here. What we can do is to couple these assertions together. The way we can do that is by using the then command. After my first get command I'm going to use command then and this command as an argument takes a function. The argument of that function is going to be whatever the previous command has returned.
So let's call this cards. Inside my function I can work with these cards. So for example I can write a Chai assertion and expect that the cart number zero is going to have a certain text and that text is going to be milk. I'll copy that twice to select the second and the third cart check for bread and juice and now we can delete all the rest of the code.
When I save my test now we can see that it's essentially doing the same thing as before but instead of selecting each cart separately I'm using the first get command that's going to select all of our three elements and write assertions for all of them. This is great if we want to check multiple things at once but there's one little caveat. Let's say we break this test and instead of juice we're going to say apples. Of course when I save my test it's going to fail but the interesting thing here is how fast it has failed. You can see that it has only taken 600 milliseconds to fail this test which is quite fast compared to the default four seconds which we usually have.
So what's going on here? Well in Cypress usually commands retry for four seconds until they eventually fail but not every command has this and our then command is a great example of that. Basically it's going to work with whatever the previous command has passed and it's going to execute that code immediately. This is a good thing to have in mind.
Now of course in modern applications we can get into timing issues. Let's say for example we're going to switch the order of these two items. So we'll say that the item with index number one it's going to be juice and the third item is going to be bread. Basically we are switching these two carts. You may have witnessed a situation where the application shows one thing for a split second and then it re-renders and shows the right thing. In this theoretical scenario we might get into a situation where these two items would be flipped for a split second and then finally get to the right order. Since we don't have our retry-ability with our then command we're going to run into a problem with this. The way we can benefit both from writing multiple assertions and still have that retry-ability is to rewrite this then command into a should command. Once I save this I see that the test is retrying for our four seconds. Now the test has still failed but it has taken four seconds. So if I rerun this test and eventually reorder the carts my test is going to pass.
Since things are always re-rendering and changing in our applications it's good to have our retry-ability at our disposal. One more thing you might have noticed as I refactored this code. When we use should command we would use an assertion that would look something like this. Have text milk which looks very similar to the assertions that we are writing over here. Basically when we are using should command we're actually calling these expect assertions which come from Chai library. This is an assertion library that is bundled within Cypress. So a should command is basically a wrapper around this expect function. In essence they're basically the same but they're just using different syntax. Of course you can mix and match this syntax as you need.
Resources
- cy.then() command docs
- Common assertions
- List of different assertions bundled within Cypress
- My blog post on the topic of testing lists
- Chai
