Triggering and waiting for UI updates with Cypress

The tests we’ve written up until now are quite simple and only check that the application isn’t crashing on load in the browser.

One of the strengths of E2E tests is testing that the UI behaves as expected when a user interacts with it with high fidelity. We’ll use Cypress’ selection (the .get() function), event triggering (the .click() function), and assertion (the .should() function) functionality to test a Vue.js application in this section.

Cypress’ automatic retries on DOM selection will allow us to write E2E tests without explicit wait or timeout conditions. Waits and timeouts are a staple of other E2E testing systems and tend to be a source of flakiness in tests.

To begin with, we will add a comment editor to our Commentator Pro application. Displaying the editor (a simple textarea) will be toggled by clicking on the Add a New Comment button.

In order to keep writing tests without...