browser-bug-testing-workflow

Automate browser debugging with tmux servers and Playwright interactions.

130|8|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/sandgardenhq/sgai --skill browser-bug-testing-workflow
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-bug-testing-workflow
Source: https://github.com/sandgardenhq/sgai/tree/main/cmd/sgai/skel/.sgai/skills/browser-bug-testing-workflow
Command: npx skills add https://github.com/sandgardenhq/sgai --skill browser-bug-testing-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Investigating browser UI bugs is slow and inconsistent when done manually. This Skill provides a repeatable, end-to-end workflow to spin up local servers, drive Playwright interactions, and capture evidence (snapshots, screenshots, logs) so issues are reproduced reliably and fixes are verified quickly.

Core Features & Use Cases

  • Tmux-managed servers: Start, observe, and cleanly shut down app servers in isolated tmux sessions with log capture for debugging.
  • Playwright automation: Navigate pages, click buttons, fill forms, handle dialogs, wait for conditions, and validate outcomes with snapshots and screenshots.
  • Use Case: Debug a flaky “Auto mode” checkbox—launch the dev server in tmux, open the target page, toggle the checkbox, trigger dependent actions, wait for the expected text, and store screenshots and logs in the retrospective folder for review.

Quick Start

Run the browser-bug-testing-workflow to start the app in tmux, navigate to the target page, reproduce the bug with Playwright interactions, and save screenshots to the current retrospective’s screenshots directory.

Frequently Asked Questions about browser-bug-testing-workflow

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

FAQPage Schema
How do I automatically reproduce and verify browser UI bugs?

To automatically reproduce and verify browser UI bugs, you can use a workflow that orchestrates tmux server processes with Playwright-driven UI interactions and captures evidence like screenshots and logs for reliable issue reproduction.

Can I use Playwright to capture screenshots during end-to-end UI testing?

Yes, you can use Playwright to automate UI interactions and capture screenshots prioritized for visual verification. It navigates pages, clicks buttons, fills forms, and handles dialogs while storing evidence for review.

How do I manage local dev servers when debugging web applications?

You can manage local dev servers by starting, observing, and cleanly shutting them down in isolated tmux sessions. This approach captures logs for debugging and ensures cleanup of long-running processes after testing.

What is the best way to debug a flaky checkbox toggle in a web app?

The best way to debug a flaky checkbox toggle is to launch the dev server in tmux, open the target page with Playwright, toggle the checkbox, trigger dependent actions, wait for expected text, and save screenshots and logs to a retrospective folder.

Does browser automation work for testing form validation and modal handling?

Yes, browser automation with Playwright applies to multi-step workflows including form validation, modal handling, dynamic content loading, and responsive UI verification during web app development, ensuring deterministic execution of test scenarios.

What are the limitations of using tmux for managing automated UI tests?

When using tmux for automated UI tests, you need to ensure proper cleanup of long-running processes. The workflow requires deterministic execution conditions and relies on tmux server processes remaining stable throughout the Playwright-driven interaction sequence.