skills.rest
dinhtungdu
dinhtungduCOMMUNITY
Explore all skills by this author →
Website𝕏@dinhtungduGitHub

browser-test

Run Chromium via Playwright to capture screenshots of Tangerine web UI pages.

5|2|Updated Mar 11, 2026
Search Tags:#screenshots#dashboard#playwright#web-testing#visual-testing#chromium#ui-automation
One-click install
npx skills add https://github.com/dinhtungdu/tangerine --skill browser-test-dinhtungdu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-test
Source: https://github.com/dinhtungdu/tangerine/tree/main/.agents/skills/browser-test
Command: npx skills add https://github.com/dinhtungdu/tangerine --skill browser-test-dinhtungdu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visually verify Tangerine's web UI changes by automatically running a Chromium-based browser session via Playwright and capturing screenshots to detect regressions.

Core Features & Use Cases

  • Automated visual regression checks: launch a per-worktree dev server, derive a unique port, and capture screenshots of affected dashboard pages.
  • Per-worktree isolation: uses a unique port per worktree to keep concurrent tests independent.
  • Console and navigation checks: verify page load, navigation, and check the console for errors to surface UI issues early.

Quick Start

Derive a unique port for your worktree, start the Vite dev server on that port, then run playwright-cli to open Chromium and capture screenshots of affected dashboard pages.

Frequently Asked Questions about browser-test

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

FAQPage Schema
How do I automate visual regression testing for web UI changes?▼

Automate visual regression testing by running a Chromium browser session via Playwright to capture screenshots of affected dashboard pages, detecting UI layout regressions after feature work or bug fixes.

How does Playwright capture screenshots to detect UI regressions?▼

Playwright launches a real Chromium browser session to capture screenshots of specific web pages, verifying page load, navigation, and checking the console for errors to surface visual regressions early.

Do I need a specific port configuration to run Playwright UI automation locally?▼

You need to derive a unique port per worktree and start the Vite dev server on that port, ensuring per-worktree isolation keeps concurrent visual tests independent without port conflicts.

Can I use Playwright visual testing in CI workflows?▼

Yes, you can integrate this visual testing workflow into CI pipelines to automatically capture screenshots and verify that dashboard layout and interactions remain correct across Runs, Status, and Task pages.

What dependencies do I need to run Chromium-based visual verification?▼

You need playwright-cli and Chromium installed to launch the real browser session required for capturing screenshots and performing automated visual verification of web UI changes.

How do I handle authentication when running automated UI screenshots?▼

You must explicitly handle authentication when it is enabled, ensuring the Playwright browser session can access protected dashboard pages to successfully capture visual regression screenshots.

Related Skills

Explore More Software Engineering Skills→
petekppetekp
5

dev-server

Start development servers with automatic port selection and project detection.

Community
Intermediate
petbrainspetbrains
13

frontend-playwright

Identify visual regressions across viewports and interactions before deployment.

Official
Intermediate
vercelvercel
246

agent-browser-verify

Automate visual verification of dev servers by checking page load, console errors, and UI elements.

Official
Intermediate
abretonc7sabretonc7s

visual-testing

Capture screenshots before and after UI interactions to detect visual regressions.

Community
Intermediate