End-to-end Testing

We use playwright for end-to-end testing. Tests are located in the /e2e folder and are separated by page.

Configuration

In the playwright.config.ts file you can see the setup configuration, including the browsers to test against.

Currently we include mobile browsers in normal tests, and exclude them in accessibility tests using the @a11y tag.

Accessibility

Playwright test cases include accessibility validation. These tests have their own tag @a11y so that they can be filtered in or out.

test("Home a11y", { tag: ["@a11y"] }, async ({ page }) => {
  // ...
});

Page Objects Models

In playwright, Page Object Models are a way to structure test by creating a high-level API of flows that are recurrent in your test cases. They essentially are classes with functions for repeated processes to simplify maintentance in the code.

This keeps basic flows centralized and simplify refactoring test cases. If you see an opportunity to extend current models or create new ones, do so.

Scripts

pnpm e2e

This will run all tests against the browsers in the configuration file. Running this from your local machine will output an inline and HTML report displaying any failed tests and their stacktrace.

pnpm e2e:codegen

This will run playwright’s codegen command. Useful to generate test cases and generating the proper locators.