Skip to content

Latest commit

 

History

History
47 lines (32 loc) · 1.76 KB

README.md

File metadata and controls

47 lines (32 loc) · 1.76 KB
Raw

Cypress UI Tests

This project uses Cypress to run UI tests for the project.

How to run the tests

Go to CypressIntegrationTest and run it as a normal unit test in IntelliJ. This will start the application as a SpringBootTest which uses Testcontainers to start running the Cypress tests. The test then gathers all the output from the Cypress tests and displays them as normal unit test output in IntelliJ.

The reporting of the tests themselves will be located in target/test-classes/e2e/cypress/reports/mochawesome.

Please note that cypress requires the templates to have been build first.

Run outside of maven

Want to run them outside of maven? Make sure you have node 22 installed and the application running and listening to http://localhost:8080 . Then do:

cd src/test/e2e/cypress
npx cypress run

How to interact with elements

  • To select an element in the UI, add a data-cy attribute to the HTML element and give it a unique value.
  • To interact with the element in the test, use the cy.dataCy() command and pass the value of the data-cy attribute as an argument. For example:
// HTML element
<h1 th:attr="data-cy='spoiler-title'">Spoiling secret</h1>

// Cypress test
cy.dataCy("spoiler-title").click();

How the tests work

  • The tests are located in the src/test/e2e folder.
  • The tests loop through all the enabled challenges and check if they meet the expected criteria.

When to create new tests

  • A new UI test(s) only needs creating when the UI changes, not with each PR.
  • If a new challenge is added or an existing challenge is modified no changes are needed.
  • If a new UI element is added or an existing element is changed, update the data-cy attributes and the tests accordingly.