Playwright End-to-End Tests

Playwright is an end-to-end testing tool that we use to validate the functionality of the e-Commerce Store. The tests are written in JavaScript and run in a headless browser.

By default, the tests run agains your local development environment which is expected to be running on https://aubrie-app.test. See the Local Development Setup for more information on how to set up your local development environment.

Running the tests

To run the tests, you can either run them native on your machine or use the provided Docker container. While the native setup is a bit faster, doesnt require a Docker installation and allows a nice integration with your IDE, the Docker setup is more reliable and makes sure the tests run on the very same environment as in the CI pipeline.

[!WARNING] Especially the screenshot tests are very picky about the environment they run on and can fail due to the slightest differences in the environment. Even x86 vs ARM can make a difference. It is recommended to always run these tests in the Docker container.

Docker setup

You need to have a docker installation on your machine to run the tests in the Docker container. Execute the following command to run the tests:

./e2e-tests-docker.sh

This will start the Docker container and run the tests inside it. After a few seconds, a browser window will open and allows you to see the tests and their results in real-time. Sometimes, the browser window will open too quickly and the server is not ready yet. In that case, reload the page or wait a few seconds and manually open the URL http://localhost:7074 in your browser.

For debugging purposes, it can be helpful to run the tests not against your local development environment, but against a staging or production environment. You can do this by passing the URL of an environment as an argument to the script:

./e2e-tests-docker.sh https://lila-loves-it.com

[!WARNING] There might be destrucive tests that place orders or delete data. Make sure to only run these tests against a test environment that is not used for production.

As a shortcut, it is supported to just pass a plain string like ‘pr-123’ to run the tests against the corresponding PR environment:

./e2e-tests-docker.sh pr-123

[!NOTE] The script detects if it is running against our development instance setup (with domains ending in aubrie-app.fndr-infra.de) and automatically sets the HTTP auth credentials for the tests.

If you want to update the reference screenshots, this is not yet supported in Playwright UI Mode. For now, you can use the following command to run the tests in headless mode and update the reference screenshots:

./e2e-tests-docker.sh --update \[--workers 1\] \[URL\]

[!WARNING] Please only commit updated screenshots if you are sure that the changes are intended and correct!

Native setup

Execute the tests with the following command:

npx playwright test

You can also run the tests in UI mode which allows you to see the browser while the tests are running:

npx playwright test --ui