Add Playwright e2e tests and GitHub Actions workflow

[Copilot]

Adds minimal, maintainable e2e test infrastructure using Playwright with CI automation for smoke testing the web build.

Changes

• Dependencies: @playwright/test, wait-on, serve added to devDependencies
• Scripts: test:e2e and test:e2e:ci npm scripts for local and CI execution
• Config: playwright.config.ts with CI-friendly defaults (2 retries, single worker, trace on retry, chromium only)
• Tests:
  • tests/home.spec.ts — resilient smoke tests for page load, branding, content structure
  • tests/health.spec.ts — endpoint availability checks with fallback logic
• Workflow: .github/workflows/playwright.yml builds web bundle, serves it, runs tests, uploads artifacts on failure
• Gitignore: Excludes test-results/, playwright-report/, playwright/.cache/

Usage

# Local
npm run web:build
npx serve dist -l 3000 &
npm run test:e2e

# CI runs automatically on push/PR to main

Notes

• Workflow uses --legacy-peer-deps due to existing peer dependency conflicts in the repo
• Tests are intentionally tolerant of UI changes (checks structure, not text)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com//advisories
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Add Playwright-based end-to-end tests and a GitHub Actions workflow so CI can run basic smoke tests for the app. The goal is to provide a minimal, maintainable e2e test setup that CI can run without heavy maintenance. The PR should add the following files and changes:

1. Dev dependencies and npm scripts

• Add @playwright/test, wait-on to devDependencies (prefer using latest semver).
• Add scripts to package.json:
  • "test:e2e": "playwright test"
  • "test:e2e:ci": "npx playwright install && wait-on http://localhost:3000 && playwright test --reporter=github"

(If package.json already contains a devDependencies block or scripts, merge sensibly. Do not remove unrelated scripts.)

2. Playwright config

• Add playwright.config.ts at repo root with CI-friendly defaults:
  • testDir: 'tests'
  • timeout defaults, retries: 2 in CI (use process.env.CI)
  • use: baseURL from process.env.PLAYWRIGHT_BASE_URL or 'http://localhost:3000', headless true
  • projects for chromium, and trace on first retry

3. Basic tests

• Add tests/home.spec.ts with simple smoke checks:
  • Visit baseURL (use page.goto('/') so baseURL applies)
  • Expect the page to have a title containing 'MagicMeal' or expect there to be an

    element; make assertions tolerant: check for a main heading or known text like 'Magic Meal' (case-insensitive) but if not present assert that the page served a 200 status and contains any element (so tests won't be brittle)

• Add tests/health.spec.ts (optional) which attempts to fetch '/api/health' or '/' and verify 200 (use page.request.fetch or node fetch via test.step)

4. GitHub Actions workflow

• Add .github/workflows/playwright.yml which:
  • Runs on push and pull_request on main and default branches
  • Uses actions/checkout and actions/setup-node to install Node
  • Runs npm ci
  • Starts the app in background using a heuristics: try npm run start or npm run dev and background the process (bash with &) and then uses wait-on to wait for http://localhost:3000
  • Runs npx playwright install --with-deps to ensure browsers are installed
  • Runs npm run test:e2e or npm run test:e2e:ci
  • Uses actions/upload-artifact to upload Playwright reports/artifacts (test-results and traces/window recordings) on failure

Notes and constraints for the coding agent:

• Do not assume the repo uses yarn/pnpm; use npm commands so they work in most repos. If the repo already uses pnpm or yarn, the maintainer can adjust later.
• Do not modify other source code beyond adding test and config files and package.json script/devDependency changes.
• If package.json is not present or cannot be edited, create a small README.md in a new .github/playwright/ directory explaining how to run the tests locally (npx playwright test after installing deps) and add the tests and config anyway.
• Keep tests minimal and resilient to minor UI text changes. Prefer structural checks (status code, presence of or

  ) and avoid deep flows (authentication, payments).

Deliverables in the PR:

• New files: playwright.config.ts, tests/home.spec.ts, tests/health.spec.ts, .github/workflows/playwright.yml
• package.json modifications to add scripts and devDependencies (merge safely)
• A short README snippet or docs/playwright.md explaining how to run tests locally (npx playwright install && npm run test:e2e)

Please create a single pull request in repository phishy/magicmeal implementing these changes. Make the PR title concise: 'Add Playwright end-to-end tests and CI workflow'. In the PR description include a short summary of what was added and how to run tests locally (commands).

This pull request was created as a result of the following prompt from Copilot chat.

Add Playwright-based end-to-end tests and a GitHub Actions workflow so CI can run basic smoke tests for the app. The goal is to provide a minimal, maintainable e2e test setup that CI can run without heavy maintenance. The PR should add the following files and changes:

1. Dev dependencies and npm scripts

• Add @playwright/test, wait-on to devDependencies (prefer using latest semver).
• Add scripts to package.json:
  • "test:e2e": "playwright test"
  • "test:e2e:ci": "npx playwright install && wait-on http://localhost:3000 && playwright test --reporter=github"

(If package.json already contains a devDependencies block or scripts, merge sensibly. Do not remove unrelated scripts.)

2. Playwright config

• Add playwright.config.ts at repo root with CI-friendly defaults:
  • testDir: 'tests'
  • timeout defaults, retries: 2 in CI (use process.env.CI)
  • use: baseURL from process.env.PLAYWRIGHT_BASE_URL or 'http://localhost:3000', headless true
  • projects for chromium, and trace on first retry

3. Basic tests

• Add tests/home.spec.ts with simple smoke checks:
  • Visit baseURL (use page.goto('/') so baseURL applies)
  • Expect the page to have a title containing 'MagicMeal' or expect there to be an

    element; make assertions tolerant: check for a main heading or known text like 'Magic Meal' (case-insensitive) but if not present assert that the page served a 200 status and contains any element (so tests won't be brittle)

• Add tests/health.spec.ts (optional) which attempts to fetch '/api/health' or '/' and verify 200 (use page.request.fetch or node fetch via test.step)

4. GitHub Actions workflow

• Add .github/workflows/playwright.yml which:
  • Runs on push and pull_request on main and default branches
  • Uses actions/checkout and actions/setup-node to install Node
  • Runs npm ci
  • Starts the app in background using a heuristics: try npm run start or npm run dev and background the process (bash with &) and then uses wait-on to wait for http://localhost:3000
  • Runs npx playwright install --with-deps to ensure browsers are installed
  • Runs npm run test:e2e or npm run test:e2e:ci
  • Uses actions/upload-artifact to upload Playwright reports/artifacts (test-results and traces/window recordings) on failure

Notes and constraints for the coding agent:

• Do not assume the repo uses yarn/pnpm; use npm commands so they work in most repos. If the repo already uses pnpm or yarn, the maintainer can adjust later.
• Do not modify other source code beyond adding test and config files and package.json script/devDependency changes.
• If package.json is not present or cannot be edited, create a small README.md in a new .github/playwright/ directory explaining how to run the tests locally (npx playwright test after installing deps) and add the tests and config anyway.
• Keep tests minimal and resilient to minor UI text changes. Prefer structural checks (status code, presence of or

  ) and avoid deep flows (authentication, payments).

Deliverables in the PR:

• New files: playwright.config.ts, tests/home.spec.ts, tests/health.spec.ts, .github/workflows/playwright.yml
• package.json modifications to add scripts and devDependencies (merge safely)
• A short README snippet or docs/playwright.md explaining how to run tests locally (npx playwright install && npm run test:e2e)

Please create a single pull request in repository phishy/magicmeal implementing these changes. Make the PR title concise: 'Add Playwright end-to-end tests and CI workflow'. In the PR description include a short summary of what was added and how to run tests locally (commands).

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
magicmeal	Error			Nov 29, 2025 1:39am

[supabase]

This pull request has been ignored for the connected project rzkubkgeegcrbelrnvbv because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.