Add automated E2E tests for frontend (Playwright)#126
Open
davidperezgar wants to merge 2 commits intotrunkfrom
Open
Add automated E2E tests for frontend (Playwright)#126davidperezgar wants to merge 2 commits intotrunkfrom
davidperezgar wants to merge 2 commits intotrunkfrom
Conversation
Sets up a complete E2E test suite using Playwright to cover the plugin's frontend JavaScript behaviour without requiring a WordPress install. Tests run against standalone HTML fixtures that load the actual plugin JS files. - Install @playwright/test and serve as dev dependencies - Add playwright.config.ts with a static file server (serve) - Add tsconfig.json for TypeScript test support - Add HTML fixtures: accordion, reading-progress, counter, sticky-column, back-button - Add test specs (25 tests across 5 files) covering: * Accordion open/close, aria-expanded, multiple items * Reading progress bar initialisation, scroll update, 100% cap * Counter animation target value, prefix/suffix, non-zero start * Sticky column activation/deactivation on scroll, top-offset * Back button visibility logic based on navigation history and scroll - Add npm scripts: test:e2e, test:e2e:ui, test:e2e:headed - Add .github/workflows/e2e.yml CI workflow (runs on PRs to trunk) - Update .gitignore to exclude Playwright report/result artefacts Closes #125 https://claude.ai/code/session_01Nyp3kpBW1eYMQj3mjEubjx
New HTML fixtures mirror the exact HTML that each FrontBlocks PHP class
outputs on a real WordPress/GeneratePress frontend page, enabling E2E tests
without a WordPress installation.
New fixtures:
- tests/e2e/fixtures/carousel.html – three carousel variants (arrows, bullets, slider)
- tests/e2e/fixtures/marquee.html – three marquee speed presets
- tests/e2e/fixtures/wordpress-frontend-page.html – full realistic WP page combining
all components: reading progress, back button, carousel, counters, sticky column,
accordion, and marquee in one document
New test specs (49 new tests):
- tests/e2e/carousel.spec.ts – Glide.js mount, DOM structure, arrow/bullet
navigation, aria-labels, slider type
- tests/e2e/marquee.spec.ts – initialisation, copy count, CSS animation,
speed presets, MutationObserver dynamic init
- tests/e2e/wordpress-frontend-page.spec.ts – full-page integration: all components
on one page, accessibility checks
Updated:
- tests/e2e/fixtures/back-button.html – corrected to use <button> (matches PHP output)
- playwright.config.ts – add outputDir, video retention on failure
- .github/workflows/e2e.yml – matrix strategy (chromium + firefox), browser
cache step, separate trace/screenshot artifact,
concurrency cancel-in-progress, claude/** trigger
Closes #125
https://claude.ai/code/session_01Nyp3kpBW1eYMQj3mjEubjx
davidperezgar
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #125
Adds a complete Playwright E2E test suite for all FrontBlocks frontend JavaScript components. Tests run against standalone HTML fixtures that mirror the exact HTML each PHP class outputs on a real WordPress/GeneratePress frontend page — no WordPress install required.
HTML Fixtures (
tests/e2e/fixtures/)Each fixture is crafted to match the actual HTML rendered by the corresponding PHP class on the WordPress frontend:
accordion.htmlreading-progress.htmlReadingProgress::render()viawp_footercounter.htmlCounter.php—frontblocks-counter-activeon text blockssticky-column.htmlStickyColumn.php—frontblocks-sticky-wrapperon gridback-button.htmlBackButton::render_button()<button>viawp_footercarousel.htmlCarousel.php— three variants: arrows, bullets, slider typemarquee.htmlHeadline.php— three speed presets (fast / medium / slow)wordpress-frontend-page.htmlThe
wordpress-frontend-page.htmlfixture is a complete GeneratePress-style page with site header, article content, and footer — demonstrating exactly how all blocks coexist on a real production page.Test Specs (7 files, ~75 tests)
accordion.spec.tsaria-expanded, multi-item, toggle cyclereading-progress.spec.tsaria-valuenowcounter.spec.tssticky-column.spec.tsback-button.spec.tscarousel.spec.tsaria-labels, slider type, WP page integrationmarquee.spec.tswordpress-frontend-page.spec.tsCI Workflow (
.github/workflows/e2e.yml)concurrencygroup cancels in-progress runs on new pushtrunk,release/**,feature/**,claude/**npm scripts added
Test plan
npm cisucceedsnpx playwright install --with-deps chromium firefoxsucceedsnpm run test:e2e— all tests passtests/e2e/playwright-report/https://claude.ai/code/session_01Nyp3kpBW1eYMQj3mjEubjx