chore: Implemented Robust Playwright E2E Testing Suite and Fixed App Layout & Focus Bugs#974
Conversation
…odal layout and focus-trap bugs
|
@nishtha-agarwal-211 is attempting to deploy a commit to the Anuj's projects Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds Playwright-based end-to-end test coverage and CI automation, along with small app tweaks to improve testability/stability (modal behavior, initialization guards).
Changes:
- Introduce Playwright E2E specs for theme toggle, search/filter, modal focus trap, and Python playground.
- Add Playwright configuration + GitHub Actions workflow to run tests on PRs/pushes.
- Adjust app code/markup to support modal inert/focus behavior and avoid project script initialization errors.
Reviewed changes
Copilot reviewed 10 out of 12 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| web-app/tests-e2e/theme.spec.js | New E2E test validating theme toggle + CSS variables. |
| web-app/tests-e2e/search.spec.js | New E2E test for sidebar search autocomplete + category filtering. |
| web-app/tests-e2e/playground.spec.js | New E2E test ensuring Pyodide loads and runs default code. |
| web-app/tests-e2e/modal.spec.js | New E2E test for modal lifecycle and focus trapping. |
| web-app/playwright.config.js | Adds Playwright runner config + local webServer settings. |
| web-app/package.json | Adds Playwright dependency and test:e2e script. |
| web-app/js/projects/tic-tac-toe.js | Guards Tic-Tac-Toe initialization. |
| web-app/js/main.js | Modal-related tweaks (inert), DOM reparenting, and imports for filtering utilities. |
| web-app/index.html | Adjusts click-guard behavior and removes some guard selectors. |
| .github/workflows/playwright.yml | Adds CI workflow to install browsers and run Playwright tests. |
Files not reviewed (1)
- web-app/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| main.js — App wiring for Premium Python Projects Gallery | ||
| ═══════════════════════════════════════════════════════════════ */ | ||
|
|
||
| import { updateProjectVisibility } from "./modules/utils.js"; |
| if (document.getElementById("start-btn")) { | ||
| initTicTacToe(); | ||
| } |
| return Array.from(modalEl.querySelectorAll(sel)) | ||
| .filter(el => !el.closest('[aria-hidden="true"]') && !el.classList.contains("visually-hidden")) | ||
| .map(el => el.tagName + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.split(' ').join('.') : '')); |
| expect(bg).toBe('#0c0f1a'); | ||
| expect(text).toBe('#f0f2f5'); |
| expect(bg).toBe('#f4f6f9'); | ||
| expect(text).toBe('#0f172a'); |
| "@codemirror/state": "^6.6.0", | ||
| "@codemirror/theme-one-dark": "^6.1.3", | ||
| "@codemirror/view": "^6.43.0", | ||
| "@playwright/test": "^1.60.0", |
| e.stopPropagation(); | ||
| } | ||
| }, true /* capture — runs before main.js bubble handler */); | ||
| }, false /* bubble — runs after target target bubble handlers */); |
|
🎉 Thank you for your contribution! Your Pull Request has been merged successfully. We appreciate the time and effort you put into improving this project. Contributions like yours help the repository grow and stay useful for everyone. If you'd like to contribute again, please check the open issues and make sure you are assigned before opening another Pull Request. Thanks again for your support! 🙌 |
|
@steam-bell-92, can you please add tags/labels for gssoc |
steam-bell-92
added
type:bug
Summary
Fixes #873
This Pull Request introduces a comprehensive automated end-to-end (E2E) testing suite powered by Playwright to ensure high reliability across all major modern browser engines (Chromium, Firefox, WebKit). It also resolves several critical UI interaction, layout, and JavaScript execution bugs that previously broke focus trapping, project modal triggers, and initial page rendering.
Key Changes
1. Automated E2E Testing Suite
web-app/playwright.config.jsto automatically spin up a local Python dev server (python3 -m http.server 8000) and test the app across Chromium, Firefox, and WebKit..github/workflows/playwright.ymlworkflow to automatically execute the E2E test suite on pull requests and pushes to the main branch.web-app/tests-e2e/):theme.spec.js: Validates the light/dark theme toggles, checkingdata-themeattribute changes on<html>and corresponding custom CSS variable values.search.spec.js: Verifies category tab filtering and search bar text inputs accurately filter the project list.modal.spec.js: Confirms modal open triggers, validates modal focus traps, tests close actions (Escapekey, close button, clicking outside), and checks that focus correctly returns to the triggering card element.playground.spec.js: Exercises the CodeMirror editor playground, validates mock run actions, and checks console execution logs.2. Core Web App Bug Fixes
#projectModalelement to the root level ofdocument.bodyduring initialization. This prevents it from becoming inert when the main wrappers are marked asaria-hidden/inertwhile the modal is open.ReferenceError: window.setMainInert is not a functionby correctly exposing the local function to thewindowscope.</div>inindex.htmlthat corrupted structural HTML layouts.true) on the sidebar to bubble-phase (false), permitting legitimate click handlers (like project card triggers) to bubble up correctly and open modals.DOMContentLoadedlistener injs/main.jswhich had been closed prematurely.updateProjectVisibilitytomain.js.js/projects/tic-tac-toe.jsto only run initialization when the game's start button (#start-btn) exists, preventing runtime exceptions on non-game pages.