skills.rest
TrayMachi
TrayMachiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expect

Tests web UI changes in a real browser using Playwright-based MCP tools.

Updated Mar 30, 2026
Search Tags:#web vitals#mcp#playwright#e2e testing#browser testing#qa verification#accessibility audit
One-click install
npx skills add https://github.com/TrayMachi/dotfiles --skill expect-traymachi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expect
Source: https://github.com/TrayMachi/dotfiles/tree/main/opencode/skills/expect
Command: npx skills add https://github.com/TrayMachi/dotfiles --skill expect-traymachi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires expect-cli.

What problem does it solve? Code changes to web UIs often ship unverified, letting bugs hide in untested edge cases, soft failures, and untested viewports. This Skill enforces browser-based verification of every change before any completion claim, catching functional, accessibility, and performance regressions. ## Core Features & Use Cases - End-to-end flow testing: Drives a real browser through primary and edge-case user flows using Playwright, with ARIA snapshots, console logs, and network request inspection. - Quality audits: Runs WCAG accessibility audits (axe-core, IBM Equal Access) and collects Core Web Vitals, layout shift, and long-task metrics. - UI quality checks: Verifies responsive layouts across four viewports, cross-browser behavior in WebKit, and dark mode rendering. - Use Case: After editing a React form component, delegate verification to a subagent that seeds test data, exercises the submit flow and validation errors, audits accessibility, and returns a pass/fail report with evidence. ## Quick Start Ask the agent to verify your recent UI changes in the browser, for example: test the updated checkout form at localhost:3000 and confirm it works before we call it done.

Frequently Asked Questions about expect

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

FAQPage Schema
How do I test React component changes in a real browser?▼

Open the page with the expect MCP open tool, interact via the playwright tool using ARIA snapshot refs, and assert on URL, content, and state changes. Finish with accessibility_audit and performance_metrics before claiming the change works.

What MCP tools are available for browser testing?▼

The expect MCP server provides open, playwright, screenshot, console_logs, network_requests, performance_metrics, accessibility_audit, and close. These cover navigation, interaction, observation, auditing, and session cleanup in one browser session at a time.

How do I set up the expect MCP server?▼

Run npx expect-cli@latest mcp to install it, or add an expect entry to your MCP config with command npx -y expect-cli@latest mcp. If the open tool is unavailable, the server is not configured.

Does it support cross-browser and responsive testing?▼

Yes. Pass browser='webkit' or 'firefox' to the open tool for cross-browser checks, and use page.setViewportSize() for 375x812, 768x1024, 1280x800, and 1440x900 viewports to verify responsive layouts.

Why does browser verification fail on empty pages?▼

Pages with no data hide pagination, sorting, and state bugs, so an empty-state screenshot counts as a skip, not a test. Seed at least three records through the app's creation flow or API before testing.

When should verification be delegated to a subagent?▼

Delegate after any change touching UI, forms, routes, styles, or layouts when subagent capability exists. The subagent runs the full open-to-close lifecycle and returns a pass/fail summary, freeing the main agent to continue working.

Related Skills

Explore More Software Engineering Skills→
zai-orgzai-org
458

glmv-prd-to-app

Translate PRD documents and visual prototypes into a full-stack web application.

Official
Advanced
Obsidian-OwlObsidian-Owl
9

sw-ship

Create a pull request with evidence-mapped body after verifying gates.

Official
Advanced
ArthTech-AIArthTech-AI

qa

Run full-stack QA checks with pytest, Jest, ruff, TypeScript, and Playwright.

Official
Intermediate
dairectivdairectiv

app-testing

Automate React frontend tests with Vitest, Testing Library, and Playwright MCP.

Official
Intermediate