| name | webtricks-browser-qa-audit |
| description | Audit live websites using Playwright MCP for browser-based QA. Covers accessibility snapshots, screenshot verification, interactive element testing, and tier differentiation audits. Use after deploying web changes to verify they work. Tags: webtricks, QA, testing, playwright, audit. |
Browser-Based QA Audit — WebTricks
Use Playwright MCP to audit live deployed websites. Verify interactive elements work, content is correct, animations render, and tier differentiation functions properly.
When to Apply
- After deploying changes to a live website
- When the user says something "doesn't work" or "is broken"
- Before presenting a site to a client
- When auditing tier/pricing functionality across multiple pages
Audit Protocol
Step 1: Full Slide/Page Audit
Navigate to the site and check EVERY page/slide systematically:
browser_navigate({ url: "https://site.vercel.app" })
browser_take_screenshot → Landing page
browser_snapshot → Get accessibility tree
// Navigate through all pages
browser_press_key({ key: "ArrowRight" }) // Next slide
browser_take_screenshot
browser_snapshot
// ... repeat for all pages
Step 2: Interactive Element Verification
For each page, check:
-
Are interactive elements real? Check the accessibility tree for <button> vs <span>:
button "Foundation · $5K" = REAL button ✅text "Foundation $5K: 1 week" with cursor: auto = FAKE, decorative ❌
-
Do buttons respond to clicks?
browser_click({ ref: "eXX", element: "Foundation tier button" })
browser_snapshot → Did the content change?
-
Does hover work?
browser_hover({ ref: "eXX", element: "Pipeline step node" })
Step 3: Tier Differentiation Audit
For sites with tier selectors, verify EACH tier produces different content:
| Check | Method |
|---|
| Button is clickable | browser_click → verify response |
| Content changes | browser_snapshot before/after → compare |
| Count changes | e.g., "7 of 15" → "11 of 15" → "15 of 15" |
| Visual state changes | Cards lock/unlock, opacity changes |
| Correct labels | "Upgrade to Production" vs "Upgrade to Ecosystem" |
Step 4: Viewport and Clipping Check
Common bugs to look for:
- Buttons above viewport:
items-center on a tall page pushes top content above visible area
- Scroll requirements: Count how many items are visible without scrolling
- Mobile vs desktop: Check if elements hidden on mobile (
hidden md:flex)
Use the accessibility snapshot to check element positions:
- button "Foundation" [ref=e42] [cursor=pointer]:
Step 5: Console Errors
browser_console_messages
Zero errors = clean. Any errors = report immediately.
Report Template
For each page/slide:
## Slide X: [Name]
**Screenshot:** [description]
**Interactive elements:** [list all buttons/toggles/tabs]
**Tier differentiation:** [None / Works / Broken — details]
### What's broken:
- [specific issue with evidence]
### What works:
- [confirmed working elements]
Common Failures to Check
| Failure | How to Detect |
|---|
| Fake buttons (spans not buttons) | Accessibility tree shows text not button |
| Tier selector doesn't change content | Snapshot before/after click is identical |
| Content clipped above viewport | Elements with negative top positions |
| Hardcoded "Upgrade to Production" | Still says "Production" when on Production tier |
| Scripted demo labeled "CONNECTED" | Misleading status badges |
| Internal metrics shown as client outcomes | "18K+ leads" when client has zero leads |
| Price comparison that backfires | Competitor appears cheaper in the comparison |
Checklist
