e2e-testing

Automate ScreenGraph end-to-end UI validation with Playwright and .env configuration.

1|Updated Oct 23, 2025
One-click install
npx skills add https://github.com/nirukk52/ScreenGraph --skill e2e-testing-nirukk52
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: e2e-testing
Source: https://github.com/nirukk52/ScreenGraph/tree/main/.claude-skills/e2e-testing_skill
Command: npx skills add https://github.com/nirukk52/ScreenGraph --skill e2e-testing-nirukk52

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide consistent, deterministic end-to-end coverage of the ScreenGraph UI by coupling Playwright automation with a shared .env configuration. Delegates deep scripts, policies, and RCA playbooks to references for maintainability.

Core Features & Use Cases

  • Deterministic Playwright suites driven by environment configuration (from .env)
  • Regression and smoke testing for run flows, screenshots, and galleries
  • Artifact capture (screenshots, console logs) for tickets and handoffs
  • Reference library guiding quick-starts and troubleshooting

Quick Start

  • Quick debug: bun run test:e2e:headed
  • CI/parity: bun run test:e2e:ci
  • UI-focused: bun run test:e2e:ui Ensure environment values are loaded from .env at repo root or frontend/. See references/automated-tests.md for details.

Frequently Asked Questions about e2e-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up end-to-end testing with Playwright for UI validation?

End-to-end testing with Playwright automates UI validation by executing deterministic test suites driven by environment configuration. Load values from `.env` at repo root, then run `bun run test:e2e:headed` for debug or `bun run test:e2e:ci` for CI parity to validate flows from landing page through screenshots and galleries.

Can Playwright tests catch UI regressions before release?

Yes. Playwright suites reproduce UI regressions by running regression and smoke tests across run flows and screenshot galleries. Integrate tests into pre-push checks to detect breakage before backend and frontend releases, with a 60-second per-spec budget for deterministic execution.

How do I capture screenshots and logs during automated UI tests?

Playwright test execution automatically captures screenshots and console logs as artifacts, which attach directly to tickets and handoffs. This enables quick reproduction and troubleshooting of UI issues without manual screenshot collection.

Does environment configuration work with Playwright automation?

Yes. This approach couples Playwright automation with shared `.env` configuration to enforce environment setup across test runs. Environment values drive test behavior, ensuring consistent, reproducible test execution across debug, CI, and UI-focused modes.

What's the difference between headed, CI, and UI test modes?

Headed mode (`test:e2e:headed`) runs tests visually for debugging. CI mode (`test:e2e:ci`) validates parity in headless environments for continuous integration. UI mode (`test:e2e:ui`) focuses on UI-specific validation, with all modes using the same environment-driven configuration.

Do I need helper modules and reference documentation for Playwright tests?

Yes. This Skill delegates deep scripts, policies, and regression playbooks to helper modules and reference documentation for maintainability. Consult `references/automated-tests.md` for quick-starts, troubleshooting, and RCA guidance.

Related Skills