This document describes the testing development workflow. End-to-end tests are run using the Playwright testing library. Unit tests are run using the Vitest library.
All end-to-end tests assume a production build of the project is available if run from CI:
npm run buildIf you are running the tests locally, then the above step is not needed. Playwright will be using your local dev server rather than starting up its own node server that uses the /build directory.
All end-to-end tests also assume all PlanDev services are running and available on localhost. See the example docker-compose-test.yml for an example of how to run the complete PlanDev system. Notice we disable authentication for simplicity when running our end-to-end tests. You can reference the PlanDev deployment documentation for more detailed deployment information.
To execute end-to-end tests normally (i.e. not in debug mode), use the following command:
npm run test:e2eIf this is your first time running the tests you may need to install the Playwright browser drivers:
npx playwright installIf a new backend service has been added to PlanDev, make sure to update the docker-compose-test.yml in order for the CI to be able to spin up the backend correctly.
If something fails, read the Playwright error carefully as it usually describes a quick fix. You can also look for the error in the Playwright GitHub Issues if you need more help.
If you continue to get unexplained failures another thing you can try is limit the number of workers in playwright.config.ts:
{
"workers": 1
}The ui test script runs the Playwright UI, which allows you to choose which e2e tests to run and visually observe the state of the UI as the test progresses.
npm run test:e2e:with-uiThe debug test script runs the Playwright inspector, which runs in headed debug mode so you can step through tests and watch them as they execute.
npm run test:e2e:debugThe codegen test script runs the Playwright test generator, which automatically generates locators as you click elements on the page. It can greatly save test development time. The generator requires an instance of the application already running to select against.
npm run preview # Starts production build of plandev-ui
npm run test:e2e:codegen # Starts codegenTo execute unit tests use the following command:
npm run test:unit