Using Cypress to interact with and inspect a Vue.js UI

In order to E2E test a new application, Commentator Pro, we should start by adding something to test. In this case, we’ll have a heading (h2) with the name of the application. In the App.vue file, we’ll have the following code:

<template>
<h2>Commentator Pro</h2>
</template>

In order to test this with Cypress, we can change the cypress/e2e/example.cy.js file with the following code. We’ll go to the running application using cy.visit('/') and then check that the h2 on the page contains Commentator Pro using cy.contains('h2', 'Commentator Pro'). The cy.contains function is overloaded and can be used with one parameter (the text to match against) or two parameters (the selector for the container and the text to match against):

describe('Commentator Pro', () => {
  it('Has a h2 with "Commentator Pro"', () ...