Understanding test snapshots

We briefly covered the concept of snapshots when we explained the time travel process in Cypress. However, this does not mean we have exhausted the advantages of the Snapshots feature.

Snapshots are powerful as they give us a sneak peek into how the test executes and into the steps that it took, which either lead to a failure state or to a success state in the test. When we pin DOM snapshots, Cypress freezes the test and highlights all the actions that were taken. The pinned snapshots allow us to inspect the state of the DOM, while at the same time view all the events that took place in that particular step. In the preceding screenshot, for example, in step 2, there's an event hitbox that shows that the first todo item was clicked. The following screenshot shows how Cypress interprets events that take place as a test is running:

Figure 5.4 – An event hitbox for a toggled todo item

The preceding screenshot shows the...