Ga naar hoofdinhoud

End to End testing guide

We use cypress for end-to-end testing.

Getting started

Running cypress can be done in two ways:

  • Locally: By starting docker (docker-compose up backend client) and running cypress in client folder with npx cypress open.
  • Docker: docker-compose run --rm cypress

Login as a role

It is necessary to login in almost every end to end test. In order to do this we recommend to use the cypress helper loginAs. Here you can pass a user type, which can be found in client/cypress/fixtures/users.json.

Interacting with elements

We wrote a usefull getter, so we don't have to work with classes or ids. First you have to add an e2e data attribute to the HTML element:

<input data-e2e="admin.topics.card.delete">

Then you can interact with that HTML element in cypress by using:

cy.getE2e('admin.topics.card.delete').click();
notitie

If you cannot add the e2e attribute to the HTML element (perhaps because it is injected by a dependency), then you can do the following:

<div data-e2e="admin.topics.card.delete">
<some-dependency-that-injects-an-input \>
</div>

And select it as:

cy.getE2e('admin.topics.card.delete', 'input').click();
tip
  • Use detailed and unique data-e2e names, so we won't use the same name in other places.
  • When editing an object, please reset it afterwards in the spec. This will make the spec reusable.