Add initial E2E integration tests (Playwright or Cypress) and run via GitHub Action

[chrisvogt]

✅ Build a Playwright Test Suite for Chronogrove Theme

We're ready to add E2E and smoke tests to gatsby-theme-chronogrove using Playwright, to help catch regressions during development and improve confidence in deploys.

This issue is to bootstrap an initial test suite and CI setup using GitHub Actions.

🧭 Context

• This theme powers my personal site chrisvogt.me.
• It also has a local development workspace (yarn develop:theme) named www.chronogrove.com.
• Playwright is preferred because it's modern, fast, supports multiple browsers, and includes built-in tracing/debugging.

🎯 Goal

Add basic E2E coverage for the theme's core functionality and set up GitHub Actions to run the test suite automatically on:

• Pull requests (for preview environments and PR validation)
• Deploys (e.g., on main or production branches)

This will serve as a solid foundation to expand testing as the theme grows.

✅ Acceptance Criteria

• Playwright is installed and configured with a basic test suite
  • Start with a test that:
    • Visits the home page (/)
    • Asserts key UI elements render (e.g., site title, blog links, footer)
    • Optionally tests another sample page (e.g., /blog, /404)
• The test suite can be run locally with yarn test:e2e or yarn playwright test
• A GitHub Actions workflow is added that:
  • Installs dependencies
  • Builds the site or starts it in development mode
  • Runs the Playwright tests
  • Runs on PRs and deploy branches (main, production)
• Add any Playwright-specific config files to .gitignore if needed (e.g., .playwright)
• Add Playwright badge to the README showing test status (optional but nice!)

🔧 Dev Notes

• You can use Playwright’s built-in CLI to scaffold tests: npx playwright codegen http://localhost:8000
• The theme uses Yarn Workspaces, so be sure the Playwright config is in the right place (probably in the root or theme package)
• The local dev server usually runs at http://localhost:8000—you may need to spin it up before running tests
• Consider using waitForSelector and built-in tracing to debug early tests

💡 Alternatives Considered

• Cypress is another excellent E2E option with a great DX, though Playwright tends to be faster and has better multi-browser support.
• Vitest might be a good fit if we want to lean into component/integration testing down the road.

Feel free to raise questions, propose adjustments, or try another tool if you believe it’s a better fit!