Add Playwright E2E test setup

Author: Srishti-j18

.github/workflows/ci.yml

@@ -39,3 +39,21 @@ jobs:
       - run: uv run ./manage.py check
       - run: uv run ./manage.py makemigrations --check --noinput
       - run: uv run ./manage.py test
+  test-client-integration:
+    runs-on: ubuntu-latest
+    env:
+      DJANGO_SETTINGS_MODULE: bakerydemo.settings.test
+      PLAYWRIGHT_WEB_SERVER_COMMAND: uv run python manage.py runserver 127.0.0.1:8000 --noreload
+    steps:
+      - uses: actions/checkout@v6
+      - uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+      - run: uv venv
+      - run: uv pip install -r requirements/development.txt
+      - run: uv run ./manage.py migrate
+      - run: uv run ./manage.py load_initial_data
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium
+      - run: npm run test:e2e

.gitignore

@@ -15,6 +15,9 @@ bakerydemo/settings/local.py
 bakerydemodb
 *.db
 node_modules
+playwright-report
+test-results
+uvenv
 venv
 .venv
 __pycache__

.prettierignore

@@ -1,5 +1,8 @@
 # Irrelevant files ignored for performance reasons.
 node_modules
+playwright-report
+test-results
+uvenv
 venv
 .venv
 *.min.css

.stylelintignore

@@ -1,4 +1,7 @@
 node_modules
+playwright-report
+test-results
+uvenv
 venv
 .venv
 *.min.css

CONTRIBUTING.md

@@ -37,6 +37,19 @@ You can also run the project test suite with:
 ./manage.py test
 ```
 
+The browser integration tests use Playwright and the demo fixture data:
+
+```bash
+npm ci
+npx playwright install chromium
+./manage.py migrate
+./manage.py load_initial_data
+npm run test:e2e
+
+# To open HTML report run below commmand
+npx playwright show-report
+```
+
 ### Demo data management
 
 If you change content or images in this repo and need to prepare a new fixture file for export, do the following on a branch:

eslint.config.mjs

@@ -3,7 +3,15 @@ import globals from 'globals';
 
 export default [
   {
-    ignores: ['node_modules', 'venv', '.venv', 'bakerydemo/collect_static'],
+    ignores: [
+      'node_modules',
+      'playwright-report',
+      'test-results',
+      'uvenv',
+      'venv',
+      '.venv',
+      'bakerydemo/collect_static',
+    ],
   },
   {
     ...js.configs.recommended,

package-lock.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
+    "@playwright/test": "^1.61.1",
     "@wagtail/stylelint-config-wagtail": "^2.0.0",
     "eslint": "^9.39.2",
     "globals": "^16.5.0",
@@ -23,6 +24,7 @@
     "lint:js": "eslint --ext .js --report-unused-disable-directives .",
     "lint:css": "stylelint **/*.css",
     "lint:format": "prettier --check \"**/?(.)*.{css,js,json,yaml,yml}\"",
-    "lint": "npm run lint:js && npm run lint:css && npm run lint:format"
+    "lint": "npm run lint:js && npm run lint:css && npm run lint:format",
+    "test:e2e": "playwright test"
   }
 }

package.json

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const port = process.env.PORT || '8000';
+const baseURL = process.env.PLAYWRIGHT_BASE_URL || `http://127.0.0.1:${port}`;
+const webServerCommand =
+  process.env.PLAYWRIGHT_WEB_SERVER_COMMAND ||
+  `python3 manage.py runserver 127.0.0.1:${port} --noreload`;
+
+const webServer =
+  process.env.PLAYWRIGHT_SKIP_WEB_SERVER === '1'
+    ? {}
+    : {
+        webServer: {
+          command: webServerCommand,
+          url: baseURL,
+          reuseExistingServer: !process.env.CI,
+          timeout: 120 * 1000,
+        },
+      };
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  reporter: process.env.CI
+    ? [['github'], ['html', { open: 'never' }]]
+    : [['list'], ['html', { open: 'never' }]],
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  ...webServer,
+});

playwright.config.mjs

@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('fixture-backed pages', () => {
+  test('home page renders demo content', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(
+      page.getByRole('heading', { name: 'Welcome to the Wagtail Bakery!' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('link', { name: 'Learn more about Wagtail' }),
+    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Breads' })).toBeVisible();
+  });
+
+  test('desktop search returns fixture content', async ({ page }) => {
+    await page.goto('/');
+
+    await page.locator('#search-input').fill('Anadama');
+    await page.locator('#search-input').press('Enter');
+
+    await expect(page).toHaveURL(/\/search\/\?q=Anadama/);
+    await expect(
+      page.getByRole('heading', { name: 'Search results' }),
+    ).toBeVisible();
+    await expect(page.getByRole('link', { name: /Anadama/ })).toBeVisible();
+  });
+});