frontend-testing-debugging

Validates and debugs rendered frontend apps using Browser-first or Playwright testing loops.

5.3k|765|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/openai/plugins --skill frontend-testing-debugging
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-testing-debugging
Source: https://github.com/openai/plugins/tree/main/plugins/build-web-apps/skills/frontend-testing-debugging
Command: npx skills add https://github.com/openai/plugins --skill frontend-testing-debugging

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rendered frontend changes often pass builds while still breaking visually or interactively in the browser. This Skill enforces a structured validation loop for local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA so fixes are verified against the actual rendered app.

Core Features & Use Cases

  • Browser-first validation: Detects whether the Browser plugin is available and uses its tab, DOM snapshot, console log, and screenshot APIs before falling back to regular Playwright with a recorded reason.
  • Required rendered checks: Verifies page identity, non-blank content, absence of framework error overlays, console health, screenshot evidence, and at least one exercised interaction.
  • Structured QA report: Produces a final response with summary, environment, pass/fail check table, interaction loop, evidence screenshots, and remaining risks.
  • Use Case: After editing a dashboard search filter, run the loop to reload the page, exercise the filter, capture screenshots on desktop and mobile viewports, and confirm no console errors before reporting the fix.

Quick Start

Use the frontend testing skill to debug this localhost app and fix the broken interaction, then show me the QA report with screenshots.

Frequently Asked Questions about frontend-testing-debugging

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

FAQPage Schema
How do I test a localhost frontend app for UI bugs?

Start the app with the repo's package manager, then validate the rendered page by checking page identity, DOM content, console errors, and screenshots. Exercise at least one target interaction and confirm the UI state changes as expected.

How to debug frontend interaction bugs with Playwright?

Run the repo's e2e script if present, otherwise use pnpm exec playwright test or a temporary Playwright script that opens the URL, captures console errors and screenshots, and runs the failing interaction. Rerun the same script after each edit.

When should I use the Browser plugin instead of Playwright?

Use the Browser plugin whenever it is available in the session, since it provides in-app navigation, DOM snapshots, console logs, and screenshots. Only fall back to regular Playwright when the Browser plugin is absent or its invocation fails and fallback is permitted.

Why does my frontend pass the build but still break in the browser?

A passing build does not catch rendered issues like framework error overlays, blank pages, console runtime errors, layout shifts, or broken interactions. Rendered validation with screenshots and interaction checks is required to confirm the app actually works.

What should a frontend QA validation report include?

Include a summary, environment details, a pass/fail table for page identity, blank-page, overlay, console, screenshot, and interaction checks, the exact interaction path tested, screenshot evidence, and remaining untested risks.