skills.rest
gatezh
gatezhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sandbox-playwright

Drive Playwright to verify UI behavior inside a devcontainer.

2|Updated Nov 17, 2025
Search Tags:#automation#e2e#playwright#ui-testing#browser#devcontainer#testing-tools
One-click install
npx skills add https://github.com/gatezh/devcontainers --skill sandbox-playwright
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sandbox-playwright
Source: https://github.com/gatezh/devcontainers/tree/main/claude-code/.claude/skills/sandbox-playwright
Command: npx skills add https://github.com/gatezh/devcontainers --skill sandbox-playwright

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Verifying UI changes in a real browser inside the claude sandbox can be brittle without a clear workflow. This skill provides a structured way to drive Playwright across multiple integration paths to validate UI behavior inside the devcontainer.

Core Features & Use Cases

  • Ad-hoc browser interactions (click, type, navigate) to validate common UI flows inside the devcontainer.
  • End-to-end test execution using the project's Playwright-based suite within the sandbox.
  • Visual verification through screenshots and diff checks to detect regression across UI changes.
  • Flexible path support: MCP plugin, @playwright/test CLI, vitest browser-playwright, or direct Playwright usage inside the project, all executed without leaving the sandbox.

Quick Start

Run the project's Playwright-based E2E tests inside the sandbox against the running devserver to verify UI behavior.

Frequently Asked Questions about sandbox-playwright

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

FAQPage Schema
How do I run Playwright E2E tests inside a devcontainer sandbox?▼

Playwright E2E tests inside a devcontainer are automated by driving Playwright against the running devserver. The skill discovers Playwright configurations and locates the active web server port using the MCP deferred tools workflow to verify UI behavior.

Can I take browser screenshots for visual regression testing in the Claude sandbox?▼

Yes, visual verification is supported through screenshot capture and diff checks within the Claude sandbox. This skill automates real-browser interactions to detect UI regressions across changes without leaving the development environment.

Does this skill support running UI tests with vitest browser-playwright configurations?▼

Yes, UI tests can be executed using flexible integration paths including the MCP plugin, @playwright/test CLI, vitest browser-playwright, or direct Playwright usage inside the project, all without leaving the sandbox environment.

What is the best way to automate ad-hoc browser interactions like clicking and typing in a sandbox?▼

Automating ad-hoc browser interactions like clicking and typing is handled by driving a real browser inside the Claude sandbox. This skill provides a structured workflow to validate common UI flows directly against the running devcontainer.

Do I need to manually configure the web server port before running browser automation tests?▼

No, manual port configuration is not required. The skill automatically handles locating the active web server port and discovering the project's Playwright test patterns through the MCP deferred tools workflow before executing browser automation.

Related Skills

Explore More Software Engineering Skills→
AJBcodingAJBcoding
4

moai-domain-notion

Automate Notion workspace and database operations through MCP integration.

Community
Advanced
denisvmediadenisvmedia
4

screenshot-review

Capture and review PNG screenshots of the Inventario React frontend to detect UI regressions.

Community
Intermediate
marcusagmmarcusagm
4

webapp-testing

Automate web application testing with Playwright end-to-end tests and audits.

Community
Intermediate
nonputtipongnonputtipong

playwright-mcp

Automate live browser interactions via Playwright MCP server tools.

Community
Intermediate