test(e2e): add automated end-to-end tests

[ronjalh]

Summary

Adds automated end-to-end tests, which the assignment asks for ("a form of automated end-to-end testing, in practice a longer sequence of interactions, and testing of the API"). Until now the repository had component tests (Vitest) and API tests in backend/, but nothing that drives the whole application in a real browser.

This pull request is built on #135 (the filters and the sort of the Elements page) and targets dev. The tests exercise what #135 adds (the filters, the sort, the vault bands, the page titles and Apparatus.difficultyValues), so the commits of #135 are in this branch too: until #135 is merged, the diff of this pull request also shows them. The end-to-end changes are the last 5 commits (git log origin/dev.. lists them) and the files in e2e/, playwright.config.ts, tsconfig.e2e.json, package.json, package-lock.json, .gitignore and the docs. Merge #135 first; this pull request then shows only the end-to-end tests.

What is in it

• Playwright (@playwright/test) with the official axe-core integration. npm run e2e runs the tests, and npm run e2e:report opens the report with a screenshot and a trace of what failed. The tests are in e2e/ and end in .e2e.ts, so Vitest does not pick them up.
• They run against a local app or any address. By default Playwright starts the backend and the frontend from the repository (the database must be running and seeded). With E2E_BASE_URL=http://it2810-XX.idi.ntnu.no/project2 nothing is started and the same tests check the virtual machine, including the Apache proxy of /project2/graphql. Ports, browser and API address are environment variables (see the README).
• e2e/elements-flow.e2e.ts: one long flow: search, filter by apparatus, "Load more", sort, filter by group, open an element, go back, "Clear filters". It checks the address, the results, the title and the focus at each step.
• e2e/vault.e2e.ts: the vault difficulty bands (the two bands together are the two bands apart) and sorting vault by its D-score in both directions.
• e2e/atypical.e2e.ts: atypical use: an address with filters that do not exist, a group of another apparatus, a search without a result, the 80-character limit, a structure that fails to load (the request is made to fail), the disabled group filter, and keyboard-only use.
• e2e/accessibility.e2e.ts: axe-core (WCAG 2.0, 2.1 and 2.2 A and AA) on the page filtered and sorted, with a filter or sort menu open, with the reason for a disabled filter shown, vault, no result, dark mode and a phone, plus reflow at 320 px and the size of the touch targets. A violation fails the test.
• e2e/api.e2e.ts: the API over HTTP: search is case insensitive, filtering and sorting over the whole result, cursor pages without skipping or repeating, vault filtered on the D-score, Apparatus.difficultyValues, the BAD_USER_INPUT cases, GRAPHQL_VALIDATION_FAILED and UNAUTHENTICATED. The detailed API tests stay in backend/.
• tsconfig.e2e.json is part of tsc -b, so the tests are type-checked. The README has a new section "End-to-end tests" (what each file tests, how to run, the settings, and the choices and limits), and docs/AI_USAGE.md describes how AI was used.

Choices

• Playwright, not Cypress: made for end-to-end tests, drives real Chromium, retries an expectation until it is true (so a test says what it expects and not how long to wait), and has an official axe-core integration. TypeScript like the rest of the project.
• No new runtime dependency: both packages are devDependencies and are not in the bundle.
• Not Docker: the tests use the same PostgreSQL and backend as the rest of the project.
• Limits, written in the README: the tests assume the seeded catalog; axe-core finds what a program can find, so a screen reader and the order of the focus still have to be tested by hand; and they are not run on every pull request, because the course server has no runners (chore: CI and end-to-end tests #76).

Testing

• 33 tests, 3 full runs in a row, all passed (about 1.3 minutes), against the real backend and the real catalog in a local PostgreSQL, with Playwright's own Chromium (npx playwright install chromium, the way the README says) and with Edge (E2E_CHANNEL=msedge).
• The tests were checked by breaking the application in four places (a failed structure no longer blocks the search, the vault bands sent wrongly, the group filter no longer aria-disabled, the title removed): a test failed each time.
• Flaky tests were found and fixed, not retried. A test that read the address, a menu or a total right after a click could see the page one step behind: the page keeps the old results and the old menu on the screen until the new render. The tests now wait for the state they mean (expectSearch polls the address, and the vault test compares totals).
• tsc -b (which now includes e2e/; a deliberate type error was caught), eslint ., npm run build and the 442 Vitest tests pass, and Vitest lists no file in e2e/.
• Not done: the tests have not been run against the virtual machine, because it was not available to me. Run E2E_BASE_URL=http://it2810-XX.idi.ntnu.no/project2 npm run e2e there once the backend is updated (the page needs Apparatus.difficultyValues from feat: connect the filters and the sort on the Elements page #135).

Closes #139

🤖 Generated with Claude Code

[anettkva]

looks good! Ready to merge when conflicts are solved