Testing a Vuetify v-simple-checkbox with Cypress

Prerequisities

• A project with Cypress and v-simple-checkbox

The introduction

Let’s say we have a v-simple-checkbox with some value, looking like this:

<v-simple-checkbox
    :value="isSelected"
></v-simple-checkbox>

It can contain other arguments as well, but for the sake of simplicity, let’s keep it this way. These can for example be inside a v-data-table as well, if you want to modify the default one.

Now let’s say you’d like to write a simple test that clicks this checkbox. The first thing we have to do in this case, is add test-id to, so let’s do that:

<v-simple-checkbox
    :value="isSelected"
    data-testid="v-simple-checkbox"
></v-simple-checkbox>

The next step would then be to write a Cypress test for clicking this checkbox.

The problem

Let’s outline the test steps first:

1. Find the checkbox in the component
2. Click it

Quite easy. But it’s not. The first thing I tried doing was this:

describe('An easy v-simple-checkbox test', () => {
    beforeEach('Visit the page', () => {
        ...
    })

    it('Opens the page and checks the checkbox', () => {
      cy.get('[data-testid="v-simple-checkbox"]').click()
    })
})

However, that doesn’t work, and the reason for that is in how the component is built.

The fix

Click the parent! Voila, everything works as it should.

describe('An easy v-simple-checkbox test', () => {
    beforeEach('Visit the page', () => {
        ...
    })

    it('Opens the page and checks the checkbox', () => {
      cy.get('[data-testid="v-simple-checkbox"]').parent().click()
    })
})

Wrapup

In this post we’ve shortly gone through how you should test the v-simple-checkbox with Cypress, since it contains a small problem.