Add Playwright E2E testing with MCP configuration #85

Copilot · 2025-11-02T03:56:36Z

Implements Playwright end-to-end testing framework and configures Playwright MCP for the repository.

Changes

Test Suite (15 tests across 4 files)

e2e/home.spec.ts - Home page, canvas, controls, diagnostics
e2e/game-interactions.spec.ts - Navigation and external links
e2e/patterns-and-controls.spec.ts - Pattern selection and game state
e2e/theme.spec.ts - Theme toggle

Configuration

playwright.config.ts - Chromium browser, auto dev server startup
.github/mcp.json - MCP server configuration
.github/workflows/playwright.yml - CI workflow with artifact upload

Package Scripts

"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"test:e2e:headed": "playwright test --headed",
"test:e2e:debug": "playwright test --debug"

Test Pattern
Uses proper wait strategies instead of fixed timeouts:

// Wait for dynamic content changes
await expect(async () => {
  const text = await element.textContent();
  expect(text).not.toBe(initialValue);
}).toPass({ timeout: 2000 });

// Wait for style changes
await page.waitForFunction(
  (expected) => window.getComputedStyle(document.body).backgroundColor !== expected,
  initialColor
);

Documentation

Updated README with installation instructions, test organization, and configuration details.

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:

esm.ubuntu.com
- Triggering command: /usr/lib/apt/methods/https (dns 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

This section details on the original issue you should resolve

<issue_title>Add Playwright tests</issue_title>
<issue_description>- Also configure Playwright MCP for repo</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Add Playwright tests #84

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

netlify · 2025-11-02T03:58:36Z

❌ Deploy Preview for fancy-buttercream-bb99cb failed.

Name	Link
🔨 Latest commit	`5c93dbd`
🔍 Latest deploy log	https://app.netlify.com/projects/fancy-buttercream-bb99cb/deploys/6906d6772a21e400076abf8d

Copilot

Pull Request Overview

This PR adds end-to-end testing infrastructure using Playwright to the Game of Life project. The changes introduce comprehensive E2E test coverage for the UI, automated testing workflows, and development tooling.

Adds Playwright E2E testing framework with configuration and browser automation
Creates 4 test suites covering home page, navigation, game controls, and theme toggling
Sets up GitHub Actions workflow for automated E2E testing on CI
Updates project documentation to include E2E testing instructions and MCP configuration

Reviewed Changes

Copilot reviewed 9 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
playwright.config.ts	Configures Playwright test runner with Chromium browser and dev server settings
package.json	Adds Playwright dependency and E2E test npm scripts
package-lock.json	Locks Playwright package versions and dependencies
e2e/home.spec.ts	Tests home page rendering, canvas, controls, and diagnostics display
e2e/game-interactions.spec.ts	Tests navigation between Home/About pages and GitHub link
e2e/patterns-and-controls.spec.ts	Tests pattern selection and game control functionality
e2e/theme.spec.ts	Tests dark/light theme toggling
.gitignore	Adds Playwright test artifacts to ignored files
.github/workflows/playwright.yml	Configures CI workflow for running E2E tests
.github/mcp.json	Configures Playwright MCP server integration
README.md	Documents E2E testing setup, commands, and test organization

Copilot · 2025-11-02T05:51:34Z

playwright.config.ts

+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:5173',


The baseURL is set to port 5173, but the Vite dev server is configured to run on port 3000 (see packages/app/vite.config.ts). This mismatch will cause E2E tests to fail to connect to the dev server. Update to 'http://localhost:3000'.

Copilot · 2025-11-02T05:51:35Z

playwright.config.ts

+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',


The webServer url is set to port 5173, but the Vite dev server is configured to run on port 3000 (see packages/app/vite.config.ts). This mismatch will cause Playwright to incorrectly wait for server readiness. Update to 'http://localhost:3000'.

Copilot · 2025-11-02T05:51:35Z

.github/workflows/playwright.yml

+
+    - name: Build the application
+      run: npm run build
+


The workflow builds the application but the Playwright config is set up to run against the dev server (webServer command: 'npm run dev'). Either remove the build step and rely on the dev server, or configure Playwright to test against the production build using 'npm run preview' instead of 'npm run dev'.

Suggested change

- name: Start production server

run: npm run preview &

env:

NODE_ENV: production

- name: Wait for production server to be ready

run: npx wait-on http://localhost:4173

github-actions · 2025-11-02T05:51:51Z

🚀 Preview deployment ready!

View your changes at: https://wintermuted.github.io/game-of-life/pr-85/

This preview will be automatically cleaned up when the PR is closed.

github-actions · 2025-11-02T05:51:52Z

🚀 Preview deployment ready!

View your changes at: https://wintermuted.github.io/game-of-life/pr-85/

This preview will be automatically cleaned up when the PR is closed.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2025-11-02T05:54:47Z

e2e/home.spec.ts

+  test('should display pattern selector', async ({ page }) => {
+    await page.goto('/');
+
+    // Check for pattern selector heading
+    const patternHeading = page.getByText('Select a Pattern');
+    await expect(patternHeading).toBeVisible();


Update pattern selector assertions to match UI

The tests assert that a heading labeled Select a Pattern exists, but neither Home nor PatternSelector renders that text—the UI exposes “Starter Patterns” and “Custom Pattern” tabs with an unlabeled list. This locator therefore never resolves and the Playwright suite fails immediately. Use an accessible selector that actually exists (e.g., the tabs or the list role) rather than a non-existent string. The same assumption is repeated in patterns-and-controls.spec.ts and will fail for the same reason.

Useful? React with 👍 / 👎.

Co-authored-by: wintermuted <2337325+wintermuted@users.noreply.github.com>

… strategies Co-authored-by: wintermuted <2337325+wintermuted@users.noreply.github.com>

Co-authored-by: wintermuted <2337325+wintermuted@users.noreply.github.com>

Copilot AI assigned Copilot and wintermuted Nov 2, 2025

Copilot started work on behalf of wintermuted November 2, 2025 03:56 View session

Copilot AI changed the title ~~[WIP] Add Playwright tests and configure MCP for repo~~ Add Playwright E2E testing with MCP configuration Nov 2, 2025

Copilot AI requested a review from wintermuted November 2, 2025 04:20

Copilot finished work on behalf of wintermuted November 2, 2025 04:20

wintermuted marked this pull request as ready for review November 2, 2025 05:49

Copilot AI review requested due to automatic review settings November 2, 2025 05:49

Copilot AI reviewed Nov 2, 2025

View reviewed changes

chatgpt-codex-connector bot reviewed Nov 2, 2025

View reviewed changes

wintermuted force-pushed the copilot/add-playwright-tests branch 2 times, most recently from 5259b2c to 10b9bc8 Compare November 3, 2025 03:39

Copilot AI and others added 6 commits November 2, 2025 20:01

Add Playwright test framework and configuration

11a0e5a

Co-authored-by: wintermuted <2337325+wintermuted@users.noreply.github.com>

Update README with Playwright documentation

b1e9766

Co-authored-by: wintermuted <2337325+wintermuted@users.noreply.github.com>

Add GitHub Actions workflow for Playwright tests

7eda8a4

Co-authored-by: wintermuted <2337325+wintermuted@users.noreply.github.com>

Improve Playwright tests by replacing fixed timeouts with better wait…

f5bf188

… strategies Co-authored-by: wintermuted <2337325+wintermuted@users.noreply.github.com>

Reduce dev server timeout to 60 seconds

d7f1a06

Co-authored-by: wintermuted <2337325+wintermuted@users.noreply.github.com>

Add explicit permissions to Playwright workflow for security

070d6b4

wintermuted force-pushed the copilot/add-playwright-tests branch from 10b9bc8 to 070d6b4 Compare November 3, 2025 04:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add Playwright E2E testing with MCP configuration #85

Add Playwright E2E testing with MCP configuration #85

Uh oh!

Copilot AI commented Nov 2, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 2, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 2, 2025

Uh oh!

Copilot AI Nov 2, 2025

Uh oh!

Copilot AI Nov 2, 2025

Uh oh!

github-actions bot commented Nov 2, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 2, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

chatgpt-codex-connector bot Nov 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

+    - name: Start production server
+      run: npm run preview &
+      env:
+        NODE_ENV: production
+    - name: Wait for production server to be ready
+      run: npx wait-on http://localhost:4173

Add Playwright E2E testing with MCP configuration #85

Are you sure you want to change the base?

Add Playwright E2E testing with MCP configuration #85

Uh oh!

Conversation

Copilot AI commented Nov 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Documentation

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

Comments on the Issue (you are @copilot in this section)

Uh oh!

netlify bot commented Nov 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for fancy-buttercream-bb99cb failed.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 2, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Nov 2, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Nov 2, 2025 •

edited

Loading

netlify bot commented Nov 2, 2025 •

edited

Loading

github-actions bot commented Nov 2, 2025 •

edited

Loading