Understanding How Cypress Works
Let's have a closer look at how Cypress works.
We'll cover the following...
How does Cypress work?
Although the Cypress test seems simple, it’s a tool where the apparent simplicity of the developer commands hides a fair amount of complexity behind the scenes. To effectively write tests in Cypress, it is important to take a step back to understand how Cypress works to avoid a lot of confusion later on. Cypress’ asynchronous structure means that many common JavaScript patterns either won’t work or aren’t recommended in Cypress. For example, using regular variable assignments is problematic.
cy commands
The most important thing to understand about Cypress is that, although Cypress commands appear to be regular JavaScript function calls, all Cypress commands are asynchronous. In effect, each time we use the cy command, we are creating something like a JavaScript promise, and subsequent cy commands are in the then clause of the preceding command. This means that each successive cy command only executes after the previous one has been completed.
When the Cypress command is run as part of the test, it queues itself for a list of commands in the test and returns immediately. What we think of as the actual command, the get or click, only executes as part of this queue of promises once the entire test has loaded.
The most important implication of this behavior is that Cypress needs to be completely insular from other sections of our app. Normal JavaScript assignment or logic that is not mediated through Cypress does not recognize Cypress but, conversely, everything we do in a Cypress test needs to go through the cy command. Cypress has constructs to allow us to do things like variable assignment and logic inside Cypress, but if we write normal variable assignments with let or const, those assignments will happen as the test loads. They ...