GSOC-E2E-1: Add Playwright CI workflow and sketch execution test

.env.e2e

@@ -0,0 +1,39 @@
+API_URL=/editor
+CORS_ALLOW_LOCALHOST=true
+TRANSLATIONS_ENABLED=true
+UI_ACCESS_TOKEN_ENABLED=false
+UPLOAD_LIMIT=250000000
+PORT=8000
+PREVIEW_PORT=8002
+EDITOR_URL=http://localhost:8000
+PREVIEW_URL=http://localhost:8002
+MONGO_URL=mongodb://localhost:27017/p5js-web-editor
+SESSION_SECRET=ci-session-secret
+EMAIL_VERIFY_SECRET_TOKEN=ci-verify-token
+# These accounts are used by the app to serve examples.
+# Real values not needed for E2E tests — dummy strings prevent crashes.
+EMAIL_SENDER=ci@example.com
+EXAMPLE_USER_EMAIL=examples@p5js.org
+EXAMPLE_USER_PASSWORD=hellop5js
+GG_EXAMPLES_USERNAME=generativedesign
+GG_EXAMPLES_EMAIL=benedikt.gross@generative-gestaltung.de
+GG_EXAMPLES_PASS=generativedesign
+ML5_LIBRARY_USERNAME=ml5
+ML5_LIBRARY_EMAIL=examples@ml5js.org
+ML5_LIBRARY_PASS=helloml5
+# Mailgun — non-empty string required to pass the startup check in
+# server/utils/mail.ts. No emails are sent during E2E tests.
+MAILGUN_KEY=dummy-mailgun-key
+MAILGUN_DOMAIN=dummy.mailgun.org
+# AWS S3 — non-empty strings required. No file uploads in E2E tests.
+AWS_ACCESS_KEY=dummy-aws-access-key
+AWS_SECRET_KEY=dummy-aws-secret-key
+AWS_REGION=us-east-1
+S3_BUCKET=dummy-bucket
+S3_BUCKET_URL_BASE=https://dummy-bucket.s3.amazonaws.com
+# GitHub OAuth — not tested in E2E suite, dummy values prevent crash.
+GITHUB_ID=dummy-github-id
+GITHUB_SECRET=dummy-github-secret
+# Google OAuth — not tested in E2E suite, dummy values prevent crash.
+GOOGLE_ID=dummy-google-id
+GOOGLE_SECRET=dummy-google-secret

.github/workflows/e2e.yml

@@ -0,0 +1,80 @@
+name: E2E Testing
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: [develop]
+  issue_comment:
+    types: [created]
+jobs:
+  test-e2e:
+    if: >
+      github.event_name == 'workflow_dispatch' ||
+      github.event_name == 'pull_request' ||
+      (
+        github.event.issue.pull_request &&
+        github.event.comment.body == '/e2e' &&
+        contains(fromJSON('["OWNER", "MEMBER", "COLLABORATOR"]'), github.event.comment.author_association)
+      )
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Resolve PR head ref
+      if: github.event_name == 'issue_comment'
+      id: pr
+      uses: actions/github-script@v7
+      with:
+        script: |
+          const { data: pr } = await github.rest.pulls.get({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            pull_number: context.issue.number
+          });
+          core.setOutput('sha', pr.head.sha);
+
+    - name: Checkout code
+      uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event_name == 'issue_comment' && steps.pr.outputs.sha || github.ref }}
+
+    - name: Set up node
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18.20.x'
+
+    - name: Create .env file
+      run: cp .env.e2e .env
+
+    - name: Start MongoDB
+      uses: supercharge/mongodb-github-action@1.10.0
+      with:
+        mongodb-version: '6.0'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps chromium
+
+    - name: Start app
+      run: npm start > app.log 2>&1 &
+
+    - name: Wait for app to be ready
+      run: |
+        npx wait-on@7 http://localhost:8000 --timeout 180000 || {
+          echo "::error::App failed to become ready at http://localhost:8000 within 180s"
+          echo "----- app.log -----"
+          cat app.log
+          exit 1
+        }
+
+    - name: Run Playwright tests
+      run: npm run e2e:ci
+
+    - name: Upload artifacts
+      if: failure()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -19,6 +19,11 @@ localhost.key
 privkey.pem
 terraform/.terraform/
 
+# Playwright
+test-results/
+playwright-report/
+.playwright/
+
 storybook-static
 duplicates.json
 

package.json

@@ -15,6 +15,8 @@
     "test": "NODE_ENV=test jest",
     "test:watch": "NODE_ENV=test jest --watch",
     "test:ci": "npm run lint && npm run test",
+    "e2e": "playwright test --headed", 
+    "e2e:ci": "playwright test", 
     "fetch-examples": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples.js",
     "fetch-examples-gg": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples-gg.js",
     "fetch-examples-ml5": "cross-env NODE_ENV=development node ./server/scripts/fetch-examples-ml5.js",
@@ -121,6 +123,7 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.27.1",
+    "@playwright/test": "^1.60.0",
     "@storybook/addon-actions": "^7.6.8",
     "@storybook/addon-docs": "^7.6.8",
     "@storybook/addon-essentials": "^7.6.8",

playwright.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/playwright',
+  testMatch: '**/*.spec.ts',
+  timeout: 600_000,
+
+  use: {
+    baseURL: 'http://localhost:8000'
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ]
+});

tests/playwright/editor.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('p5.js Editor – Playwright E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for app to fully render — skip link only appears after React mounts
+    await expect(
+      page.locator('a.skip_link[href="#play-sketch"]')
+    ).toHaveText('Skip to Play Sketch', { timeout: 60_000 });
+
+    // Dismiss cookie banner via JS — handles the case where the button
+    // is outside the viewport due to the Redux DevTools sidebar
+    await page.evaluate(() => {
+      const btn = Array.from(document.querySelectorAll('button')).find((b) =>
+        /allow essential|allow all/i.test(b.textContent ?? '')
+      ) as HTMLElement | undefined;
+      btn?.click();
+    });
+
+    await page.waitForTimeout(400);
+  });
+
+  test('can execute code from the editor by clicking the Play button', async ({
+    page
+  }) => {
+    const newCode = [
+      'function setup() {',
+      '  createCanvas(400, 400);',
+      '}',
+      '',
+      'function draw() {',
+      '  background(220);',
+      "  console.log('hi from sketch');",
+      '  noLoop();',
+      '}'
+    ].join(''); // Avoid newlines to prevent autocomplete from inserting unnecessary brackets
+
+    await page.click('.CodeMirror-code', { force: true });
+
+    await page.keyboard.press('ControlOrMeta+A');
+    await page.keyboard.type(newCode, { delay: 5 });
+
+    // Click Play
+    await page.locator('#play-sketch').click({ force: true });
+
+    // Wait for the sketch iframe to confirm the sketch actually started
+    await page.waitForFunction(
+      () =>
+        Array.from(document.querySelectorAll('iframe')).some((f) =>
+          (f as HTMLIFrameElement).src.includes('8002')
+        ),
+      { timeout: 10_000 }
+    );
+
+    // Assert console output
+    await expect(
+      page.locator('.preview-console__messages')
+    ).toContainText('hi from sketch', { timeout: 15_000 });
+  });
+});