Add e2e and a11y test setup

.gitignore

@@ -22,3 +22,8 @@ logs
 .env
 .env.*
 !.env.example
+
+# Playwright
+test-results/
+playwright-report
+playwright/.cache/

README.md

@@ -9,6 +9,14 @@ A small website that displays how many of your users in Germany statistically ha
 We aim to use the current active [LTS version of nodejs](https://nodejs.dev/en/about/releases/), which is V22 at the time of writing.
 There is a `.node-version` file to simplify setup using [nodenv](https://github.com/nodenv/nodenv).
 
+### Testing
+
+For E2E and a11y testing with [Playwright](https://playwright.dev/docs/intro) you will need to install the supported browsers:
+
+```bash
+npx playwright install
+```
+
 ### Git Hooks
 
 For the provided Git hooks you will need to install [lefthook](https://github.com/evilmartians/lefthook/blob/master/docs/full_guide.md)
@@ -27,12 +35,40 @@ npm install
 
 ## Development
 
+### Run locally
+
 Start the development server on `http://localhost:3000`:
 
 ```bash
 npm run dev
 ```
 
+### Testing
+
+The applications have
+
+- end-to-end tests (using [Playwright](https://playwright.dev/docs/intro))
+- accessibility tests (using [Playwright](https://playwright.dev/docs/intro) and [Axe](https://www.deque.com/axe/))
+
+**Test commands**
+
+- Run all tests: `npm run tests`
+- Run E2E tests: `npm run test:e2e`
+- Run A11y tests: `npm run test:a11y`
+
+### Code quality checks (linting & formatting)
+
+The project uses [ESLint](https://eslint.org/docs/latest/) for linting and [Prettier](https://prettier.io/docs/en/). for formatting.
+
+**Commands**
+
+- Check formatting: `npm run format:check`
+- Autofix formatting issues: `npm run format:fix`
+- Check lint: `npm run lint:check`
+- Autofix lint issues: `npm run lint:fix`
+- Check style (formatting & linting): `npm run style:check`
+- Autofix style issues (formatting & linting): `npm run style:fix`
+
 ## Production
 
 Build the application for production:

nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
+  devtools: { enabled: process.env.DEV_TOOLS !== "false" },
   modules: ["@nuxtjs/tailwindcss", "@nuxt/eslint"],
   css: ["~/assets/css/main.css"],
   postcss: {

package.json

@@ -7,6 +7,9 @@
     "build": "nuxt build",
     "build:pages": "nuxt build --preset github_pages",
     "dev": "nuxt dev",
+    "test:e2e": "playwright test --config=test/e2e/playwright.config.ts",
+    "test:a11y": "playwright test --config=test/a11y/playwright.config.ts",
+    "tests": "npm run build && npm run test:e2e && npm run test:a11y",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
@@ -27,13 +30,17 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "license-checker": "^25.0.1",
+    "@axe-core/playwright": "^4.9.0",
+    "@playwright/test": "^1.43.0",
     "@nuxt/devtools": "^1.3.1",
     "@nuxt/eslint": "^0.3.7",
     "@nuxtjs/tailwindcss": "^6.11.4",
+    "axe-playwright": "^2.0.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "license-checker": "^25.0.1",
+    "playwright": "^1.41.2",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.13",

test/a11y/example.spec.ts

@@ -0,0 +1,17 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+test.describe("index", () => {
+  test("should not have any automatically detectable accessibility issues", async ({
+    page,
+  }) => {
+    await page.goto("/");
+    await expect(
+      page.locator("h1:has-text('Wie viele Menschen?')"),
+    ).toBeVisible();
+
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

test/a11y/playwright.config.ts

@@ -0,0 +1,34 @@
+import { devices } from "@playwright/test";
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+const port = parseInt(process.env.VITE_PORT ?? "3001"); // not 3000 to not interfere with local deployment
+const timeout = parseInt(process.env.WAIT_ON_TIMEOUT ?? `${20 * 1000}`);
+
+const config: PlaywrightTestConfig = {
+  testDir: ".",
+  timeout: 10000,
+  retries: process.env.CI === "true" ? 1 : 0,
+  use: {
+    viewport: { width: 1280, height: 720 },
+    acceptDownloads: true,
+    baseURL: `http://localhost:${port}`,
+    screenshot: "only-on-failure",
+  },
+  reporter: [
+    [process.env.CI ? "github" : "list"],
+    ["html", { outputFolder: "./playwright-report" }],
+  ],
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"], channel: "chrome" },
+    },
+  ],
+  webServer: {
+    command: `DEV_TOOLS=false npm run dev -- --port ${port}`,
+    port,
+    timeout,
+  },
+};
+
+export default config;