Add Playwright E2E test suite for core portfolio functionality

[Copilot]

Implements E2E testing to detect regressions in core functionality after package updates. Covers language switching, theme persistence, contact form submission, and navigation.

Changes

• Test Infrastructure

  • Added Playwright config targeting localhost:3055 with auto-starting dev server
  • Created 4 test suites (11 tests total) in /e2e directory
  • Configured CI to run tests with Chromium, upload artifacts on failure

• Test Coverage

  • language.spec.ts: EN/FR toggle and persistence across reloads
  • theme.spec.ts: Light/dark mode switching with localStorage persistence
  • contact-form.spec.ts: Form validation, submission success/error handling with mocked API and reCAPTCHA
  • navigation.spec.ts: Menu link navigation and anchor routing

• Developer Experience

  • Added npm scripts: test:e2e, test:e2e:ui (debug mode), test:e2e:report
  • Updated README with test commands and CI integration details
  • Tests use specific selectors to avoid Playwright strict mode violations

Implementation Notes

Contact form tests mock the /api/send-mail endpoint and reCAPTCHA to enable deterministic testing:

await page.route("**/api/send-mail", async (route) => {
  await route.fulfill({
    status: 200,
    body: JSON.stringify({ message: "Email sent successfully" }),
  });
});

await page.addInitScript(() => {
  (window as any).grecaptcha = { /* mock implementation */ };
});

Navigation tests use waitForURL() rather than fixed timeouts for anchor navigation reliability.

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 /usr/lib/apt/methods/https (dns block)
• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/portfolio/portfolio/node_modules/.pnpm/next@16.1.0_@babel+core@7.28.5_@playwright+test@1.58.1_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/server/lib/start-server.js (dns block)
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/portfolio/portfolio/node_modules/.pnpm/next@16.1.0_@babel+core@7.28.5_@playwright+test@1.58.1_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/server/lib/start-server.js arge hrome-headless-shell-linux64/chrome-headless-shell edia�� stall-9Y9H29/00---disable-extensions -g itioning,Transl (dns block)
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/portfolio/portfolio/node_modules/.pnpm/next@16.1.0_@babel+core@7.28.5_@playwright+test@1.58.1_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/server/lib/start-server.js -m owner --uid-owner 0 -j ACCEPT /usr/share/keyrinode --ignore-time-co/home/REDACTED/work/portfolio/portfolio/node_modules/.bin/../.pnpm/@pl�� hild.js /usr/bin/python3 buil�� eManualStop ce m@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/bin/next (dns block)
• www.google.com
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl rgo/bin/git (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl tnet/tools/git (dns block)
• www.googletagmanager.com
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl rgo/bin/git (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl tnet/tools/git (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>Implement E2E Testing with Playwright</issue_title>
<issue_description>Add end-to-end (E2E) tests to the portfolio website using Playwright to ensure basic functionality remains intact, especially after package updates. The main areas to cover:

• Changing website language
• Switching theme between light and dark
• Sending an email through the contact form
• Verifying menu links are working as expected

Requirements:

• Tests should be runnable both locally and in CI
• Modify the readme to add a section on how to run these tests

This will help maintain baseline website functionality and quickly detect regressions after updates.</issue_description>

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

• Fixes Implement E2E Testing with Playwright #56

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.