The tests from 0401 run in jsdom. Whether the page works together in the browser is shown only by an end-to-end test: it starts the running application, operates it like a person and checks what can be seen. This lesson writes the "Book appointment" test and checks the pages automatically for accessibility. You know Playwright for .NET from K2 2.7.7; here it is Playwright for TypeScript.

State of the checks. Everything ran except the sign-in: in a copy of the project from 0401 (Angular 22.2, Node 24.22.3) ng add playwright-ng-schematics (22.1.4), npx playwright install chromium, ng e2e and npx playwright test ran against ng serve (@playwright/test 1.65.0, @axe-core/playwright 4.14.0), with Chromium only. Result of the solution: ng e2e exit code 0, 3 tests; ng test --no-watch afterward exit code 0, 8 tests. The failure outputs (timeout at getByLabel, the three findings from axe) are output of these runs. The Booking page is a minimal version; yours from 0204 differs. The response of GET /api/booking/slots?day= is assumed here to be a list of times (ISO 8601 with offset): check against K2. Not run: Firefox, WebKit, the real API, every sign-in with Entra ID, a screen reader, the manual check. Statements about Playwright come from playwright.dev ("Authentication", "Accessibility testing"), about ng e2e from angular.dev (read on the day of writing).

Adding Playwright

According to angular.dev, ng e2e has no runner of its own: if there is no e2e target, the CLI asks which package you want (Playwright, Cypress, Nightwatch, WebdriverIO, Puppeteer); the cursor is on "No", there is no default. For Playwright the page names ng add playwright-ng-schematics. The package (Apache-2.0 according to the registry, requires Angular 22) is maintained by a third party. The run in the copy wrote, among other things:

CREATE playwright.config.ts (1933 bytes)
CREATE e2e/example.spec.ts (208 bytes)
UPDATE angular.json (2484 bytes)
UPDATE package.json (927 bytes)

Afterward angular.json contains an e2e target with the builder playwright-ng-schematics:playwright and devServerTarget: "kladde-angular:serve": ng e2e therefore starts the dev server itself and then runs the tests. The generated configuration knows three browsers; in the Kladde one stays for now (shorten projects), installed with npx playwright install chromium. If CI is set, the template repeats failed tests twice and uses one process: wanted in the pipeline, annoying locally. e2e/example.spec.ts waits for the title "MyApp": delete it. ng test does not pick up the files in e2e/.