From 371528a9fb121a93b4351bdf5fa910cf18faed4f Mon Sep 17 00:00:00 2001 From: nishtha-agarwal-211 Date: Wed, 3 Jun 2026 20:38:38 +0530 Subject: [PATCH] chore: add Playwright E2E tests, configure CI workflow, and resolve modal layout and focus-trap bugs --- .github/workflows/playwright.yml | 47 +++++++++++++++++ .gitignore | Bin 382 -> 428 bytes web-app/index.html | 7 +-- web-app/js/main.js | 14 +++-- web-app/js/projects/tic-tac-toe.js | 5 +- web-app/package-lock.json | 64 +++++++++++++++++++++++ web-app/package.json | 4 +- web-app/playwright.config.js | 40 ++++++++++++++ web-app/tests-e2e/modal.spec.js | 75 +++++++++++++++++++++++++++ web-app/tests-e2e/playground.spec.js | 32 ++++++++++++ web-app/tests-e2e/search.spec.js | 57 ++++++++++++++++++++ web-app/tests-e2e/theme.spec.js | 48 +++++++++++++++++ 12 files changed, 381 insertions(+), 12 deletions(-) create mode 100644 .github/workflows/playwright.yml create mode 100644 web-app/playwright.config.js create mode 100644 web-app/tests-e2e/modal.spec.js create mode 100644 web-app/tests-e2e/playground.spec.js create mode 100644 web-app/tests-e2e/search.spec.js create mode 100644 web-app/tests-e2e/theme.spec.js diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 00000000..d3bc83d2 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,47 @@ +name: Playwright E2E Tests + +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + test: + timeout-minutes: 15 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + + - name: Set up Python + uses: actions/setup-python@v5 + with: + python-version: "3.12" + + - name: Install dependencies + run: | + cd web-app + npm ci + + - name: Install Playwright Browsers + run: | + cd web-app + npx playwright install --with-deps + + - name: Run Playwright tests + run: | + cd web-app + npx playwright test + + - name: Upload Playwright Report + uses: actions/upload-artifact@v4 + if: always() + with: + name: playwright-report + path: web-app/playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index d50a3efe1b73246f17eee35022a4e35bce455e28..a6b609859f9c9ccef3cb3354a275eda0bcad1ddf 100644 GIT binary patch delta 57 zcmeyzw1#;@HKSocPGV(wQD%BZiEdG9L4Hw*K37sseiEEhl3EOsDK5<^Dc0v=;9>v( DdrTBP delta 11 ScmZ3({EulvH6t?v7XttoVgl&^ diff --git a/web-app/index.html b/web-app/index.html index c51f7a64..4dbf2ee6 100644 --- a/web-app/index.html +++ b/web-app/index.html @@ -402,7 +402,6 @@

Spot the Difference

-
Categories
@@ -835,8 +834,6 @@

Legal

var guards = [ '#projectsSection', /* entire projects grid area */ '#projectsGrid', - '.project-card', - '.btn-play', '.modal', /* project modal */ '#projectModal', '.modal-content', @@ -851,7 +848,7 @@

Legal

if (document.body.classList.contains('sidebar-active')) { e.stopPropagation(); } - }, true /* capture — runs before main.js bubble handler */); + }, false /* bubble — runs after target target bubble handlers */); }); }); @@ -865,7 +862,7 @@

Legal

if (document.body.classList.contains('sidebar-active')) { e.stopPropagation(); } - }, true); + }, false); }); }); }); diff --git a/web-app/js/main.js b/web-app/js/main.js index aecfee18..08a1418e 100644 --- a/web-app/js/main.js +++ b/web-app/js/main.js @@ -2,6 +2,8 @@ main.js — App wiring for Premium Python Projects Gallery ═══════════════════════════════════════════════════════════════ */ +import { updateProjectVisibility } from "./modules/utils.js"; + function prefersReducedMotion() { return window.matchMedia("(prefers-reduced-motion: reduce)").matches; } @@ -136,6 +138,7 @@ document.addEventListener("DOMContentLoaded", function () { var footerNode = document.querySelector("footer.footer"); var backToTopNode = document.getElementById("backToTop"); var infoModalNode = document.getElementById("infoModalOverlay"); + var projectModalNode = document.getElementById("projectModal"); var sidebarDockNode = document.getElementById("mainSidebar"); var mobileToggleNode = document.getElementById("mobileSidebarToggle"); var heroControlsNode = document.querySelector(".hero-controls"); @@ -147,6 +150,7 @@ document.addEventListener("DOMContentLoaded", function () { if (footerNode) fragment.appendChild(footerNode); if (backToTopNode) fragment.appendChild(backToTopNode); if (infoModalNode) fragment.appendChild(infoModalNode); + if (projectModalNode) fragment.appendChild(projectModalNode); if (heroControlsNode) heroControlsNode.remove(); document.body.appendChild(fragment); @@ -1018,8 +1022,8 @@ document.addEventListener("DOMContentLoaded", function () { }); renderRecentSearches(); -}); -/* ═══════════════════════════════════════════════════════════════ + + /* ═══════════════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════════════ */ function getFocusableElements(root) { @@ -1062,7 +1066,7 @@ function openProjectSafe(name, trigger) { var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; document.body.style.paddingRight = scrollbarWidth + "px"; document.body.style.overflow = "hidden"; - window.setMainInert(true); + setMainInert(true); safeRun(function () { if (typeof getProjectHTML === "function") { @@ -1145,7 +1149,7 @@ function closeProjectSafe() { modal.setAttribute("aria-hidden", "true"); document.body.style.paddingRight = ""; document.body.style.overflow = ""; - window.setMainInert(false); + setMainInert(false); if (removeTrap) { removeTrap(); removeTrap = null; @@ -1172,6 +1176,7 @@ document.addEventListener("keydown", function (e) { /* ── Expose for inline use ────────────────────────────────── */ window.openProjectSafe = openProjectSafe; window.closeProjectSafe = closeProjectSafe; +window.setMainInert = setMainInert; /* ═══════════════════════════════════════════════════════════════ WIRE PROJECT CARDS @@ -1645,3 +1650,4 @@ if (progressBar) { // Initial card filtering state update updateProjectVisibility(currentCategory, currentSearchQuery); }); + diff --git a/web-app/js/projects/tic-tac-toe.js b/web-app/js/projects/tic-tac-toe.js index a215b07d..8df6900b 100644 --- a/web-app/js/projects/tic-tac-toe.js +++ b/web-app/js/projects/tic-tac-toe.js @@ -867,6 +867,7 @@ function initTicTacToe() { if (!gameOver) lockBoard(false); } } - -initTicTacToe(); +if (document.getElementById("start-btn")) { + initTicTacToe(); +} //end of init function \ No newline at end of file diff --git a/web-app/package-lock.json b/web-app/package-lock.json index 25306af9..06815581 100644 --- a/web-app/package-lock.json +++ b/web-app/package-lock.json @@ -17,6 +17,7 @@ "@codemirror/state": "^6.6.0", "@codemirror/theme-one-dark": "^6.1.3", "@codemirror/view": "^6.43.0", + "@playwright/test": "^1.60.0", "codemirror": "^6.0.2", "esbuild": "^0.28.0" } @@ -624,6 +625,22 @@ "dev": true, "license": "MIT" }, + "node_modules/@playwright/test": { + "version": "1.60.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz", + "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.60.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/codemirror": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz", @@ -689,6 +706,53 @@ "@esbuild/win32-x64": "0.28.0" } }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/playwright": { + "version": "1.60.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz", + "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.60.0" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.60.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz", + "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/style-mod": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz", diff --git a/web-app/package.json b/web-app/package.json index bc9b5328..691a8883 100644 --- a/web-app/package.json +++ b/web-app/package.json @@ -3,7 +3,8 @@ "version": "1.0.0", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "test:e2e": "playwright test" }, "keywords": [], "author": "", @@ -18,6 +19,7 @@ "@codemirror/state": "^6.6.0", "@codemirror/theme-one-dark": "^6.1.3", "@codemirror/view": "^6.43.0", + "@playwright/test": "^1.60.0", "codemirror": "^6.0.2", "esbuild": "^0.28.0" } diff --git a/web-app/playwright.config.js b/web-app/playwright.config.js new file mode 100644 index 00000000..796c718a --- /dev/null +++ b/web-app/playwright.config.js @@ -0,0 +1,40 @@ +const { defineConfig, devices } = require('@playwright/test'); + +module.exports = defineConfig({ + testDir: './tests-e2e', + timeout: 45000, + expect: { + timeout: 5000 + }, + fullyParallel: true, + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 2 : 0, + workers: process.env.CI ? 1 : undefined, + reporter: 'html', + use: { + baseURL: 'http://127.0.0.1:8000', + trace: 'on-first-retry', + screenshot: 'only-on-failure', + }, + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + ], + webServer: { + command: 'python3 -m http.server 8000', + url: 'http://127.0.0.1:8000', + reuseExistingServer: !process.env.CI, + cwd: __dirname, + timeout: 10000, + }, +}); diff --git a/web-app/tests-e2e/modal.spec.js b/web-app/tests-e2e/modal.spec.js new file mode 100644 index 00000000..997d8954 --- /dev/null +++ b/web-app/tests-e2e/modal.spec.js @@ -0,0 +1,75 @@ +const { test, expect } = require('@playwright/test'); + +test.describe('Modal Lifecycle & Focus Trapping', () => { + test('should open modal, trap keyboard focus, close modal, and restore focus to trigger button', async ({ page }) => { + await page.goto('/'); + + // Scroll to projects to show cards + const exploreBtn = page.locator('#exploreBtn'); + await exploreBtn.click(); + + // Wait for sidebar to be active + await expect(page.locator('body')).toHaveClass(/sidebar-active/); + + // Get the first project card's "Try It" button + const firstCardPlayBtn = page.locator('.project-card .btn-play').first(); + await expect(firstCardPlayBtn).toBeVisible(); + + // Focus and click the play button + await firstCardPlayBtn.focus(); + await firstCardPlayBtn.click(); + + const modal = page.locator('#projectModal'); + // Verify modal has active class + await expect(modal).toHaveClass(/active/); + + // Selector for focusable elements + const focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; + + // Get focusable element tags/ids/classes inside modal to compare + const focusablesInModal = await modal.evaluate((modalEl, sel) => { + 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('.') : '')); + }, focusableSelector); + + expect(focusablesInModal.length).toBeGreaterThan(0); + + // 1. Manually focus the first focusable element inside the modal + await modal.evaluate((modalEl, sel) => { + const focusables = Array.from(modalEl.querySelectorAll(sel)) + .filter(el => !el.closest('[aria-hidden="true"]') && !el.classList.contains("visually-hidden")); + focusables[0].focus(); + }, focusableSelector); + + // 2. Press Shift+Tab. Focus should wrap around to the last focusable element in the modal. + await page.keyboard.press('Shift+Tab'); + + let activeTag = await page.evaluate(() => { + const el = document.activeElement; + return el.tagName + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.split(' ').join('.') : ''); + }); + const lastTagName = focusablesInModal[focusablesInModal.length - 1]; + expect(activeTag).toBe(lastTagName); + + // 3. Press Tab. Focus should wrap back to the first focusable element in the modal. + await page.keyboard.press('Tab'); + + activeTag = await page.evaluate(() => { + const el = document.activeElement; + return el.tagName + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.split(' ').join('.') : ''); + }); + const firstTagName = focusablesInModal[0]; + expect(activeTag).toBe(firstTagName); + + // 4. Close the modal by pressing Escape + await page.keyboard.press('Escape'); + + // Verify modal is closed (no longer has active class) + await expect(modal).not.toHaveClass(/active/); + + // Verify focus is restored to the original play button + const isPlayBtnFocused = await firstCardPlayBtn.evaluate(el => el === document.activeElement); + expect(isPlayBtnFocused).toBe(true); + }); +}); diff --git a/web-app/tests-e2e/playground.spec.js b/web-app/tests-e2e/playground.spec.js new file mode 100644 index 00000000..9818bb03 --- /dev/null +++ b/web-app/tests-e2e/playground.spec.js @@ -0,0 +1,32 @@ +const { test, expect } = require('@playwright/test'); + +test.describe('Python Playground', () => { + test('should load Pyodide, execute default code, and show output in console', async ({ page }) => { + // 1. Navigate to homepage + await page.goto('/'); + + // 2. Click the Playground tab in the sticky filter bar + const playgroundTab = page.locator('button[data-sticky-category="playground"]'); + await expect(playgroundTab).toBeVisible(); + await playgroundTab.click(); + + // Verify playground section is displayed + const playgroundSection = page.locator('#playgroundSection'); + await expect(playgroundSection).toBeVisible(); + + // 3. Wait for Pyodide load completion (wait up to 30 seconds for external download) + const statusText = page.locator('#statusText'); + await expect(statusText).toHaveText(/Pyodide Ready/, { timeout: 30000 }); + + // Verify run code button is enabled + const runBtn = page.locator('#runCode'); + await expect(runBtn).toBeEnabled(); + + // 4. Click the run code button + await runBtn.click(); + + // 5. Verify output console shows "Hello, World!" + const consoleOutput = page.locator('#consoleOutput'); + await expect(consoleOutput).toContainText('Hello, World!'); + }); +}); diff --git a/web-app/tests-e2e/search.spec.js b/web-app/tests-e2e/search.spec.js new file mode 100644 index 00000000..c4c4275b --- /dev/null +++ b/web-app/tests-e2e/search.spec.js @@ -0,0 +1,57 @@ +const { test, expect } = require('@playwright/test'); + +test.describe('Search & Filter', () => { + test('should show autocomplete suggestions on typing and filter cards by category', async ({ page }) => { + await page.goto('/'); + + // Scroll to projects to show the sidebar search + const exploreBtn = page.locator('#exploreBtn'); + await exploreBtn.click(); + + // Wait for sidebar to be active + await expect(page.locator('body')).toHaveClass(/sidebar-active/); + + const searchInput = page.locator('#searchInput'); + const searchDropdown = page.locator('#searchDropdown'); + const resultsList = page.locator('#resultsList'); + + // Wait for the search input to become visible + await expect(searchInput).toBeVisible(); + + // 1. Focus search input and type query + await searchInput.focus(); + await searchInput.fill('2048'); + + // Verify autocomplete dropdown is active and shows matching suggestions + await expect(searchDropdown).toHaveClass(/active/); + const suggestionText = resultsList.locator('.dropdown-item-text'); + await expect(suggestionText).toContainText('2048'); + + // Clear search input to restore all cards + await searchInput.fill(''); + await page.keyboard.press('Enter'); + + // 2. Click category tab "games" from sidebar + const gamesTab = page.locator('.sidebar-tab[data-category="games"]'); + await gamesTab.click(); + + // Verify that the games tab has the active class + await expect(gamesTab).toHaveClass(/active/); + + // Verify only games category cards are displayed, and others are hidden + const projectCards = page.locator('.project-card'); + const count = await projectCards.count(); + expect(count).toBeGreaterThan(0); + + for (let i = 0; i < count; i++) { + const card = projectCards.nth(i); + const isVisible = await card.isVisible(); + if (isVisible) { + await expect(card).toHaveAttribute('data-category', 'games'); + } else { + const category = await card.getAttribute('data-category'); + expect(category).not.toBe('games'); + } + } + }); +}); diff --git a/web-app/tests-e2e/theme.spec.js b/web-app/tests-e2e/theme.spec.js new file mode 100644 index 00000000..b4eb33fc --- /dev/null +++ b/web-app/tests-e2e/theme.spec.js @@ -0,0 +1,48 @@ +const { test, expect } = require('@playwright/test'); + +test.describe('Theme Toggle', () => { + test('should switch to light/dark mode and confirm correct data-theme attribute and color variables exist', async ({ page }) => { + await page.goto('/'); + + const html = page.locator('html'); + + // Default theme is dark + await expect(html).toHaveAttribute('data-theme', 'dark'); + + // Verify initial dark variables + let bg = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--bg').trim()); + let text = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--text').trim()); + expect(bg).toBe('#0c0f1a'); + expect(text).toBe('#f0f2f5'); + + // Scroll to projects to show the sidebar theme toggle + await page.locator('#exploreBtn').click(); + + // Wait for sidebar to be active + await expect(page.locator('body')).toHaveClass(/sidebar-active/); + + // Target the visible theme toggle in the sidebar + const themeToggle = page.locator('.sidebar-dock #themeToggle'); + await expect(themeToggle).toBeVisible(); + await themeToggle.click(); + + // Verify theme changed to light + await expect(html).toHaveAttribute('data-theme', 'light'); + + // Verify light variables + bg = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--bg').trim()); + text = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--text').trim()); + expect(bg).toBe('#f4f6f9'); + expect(text).toBe('#0f172a'); + + // Click theme toggle again to switch back to dark mode + await themeToggle.click(); + + // Verify theme changed back to dark + await expect(html).toHaveAttribute('data-theme', 'dark'); + bg = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--bg').trim()); + text = await html.evaluate(el => window.getComputedStyle(el).getPropertyValue('--text').trim()); + expect(bg).toBe('#0c0f1a'); + expect(text).toBe('#f0f2f5'); + }); +});