| name | playwright-website-tester |
| description | Test websites and local web apps with the Playwright plugin in a fresh browser context, separate from the user's Chrome profile. Use for full website QA, mobile and desktop checks, route crawling, login-from-scratch testing, console and network error monitoring, screenshots, accessibility snapshots, forms/buttons/navigation checks, responsive layout review, and browser-visible error reports. Do not use the Chrome extension connector for this workflow. |
Playwright Website Tester
Operating Rule
Use the Playwright plugin, not the Chrome extension connector. Treat the browser context as fresh and separate from the user's existing Chrome profile. If a site requires authentication, tell the user they may need to log in from scratch inside the Playwright-controlled browser; never ask them to paste passwords or 2FA codes into chat.
Skip Lighthouse by default. Focus on Playwright-observable evidence: page behavior, console messages, failed network requests, accessibility snapshots, screenshots, desktop/mobile layout, and user-flow results.
Required References
Read references/report-template.md before producing a substantial QA report.
Use scripts/website_qa_checklist.py when planning deep or repeated QA. The path uses ${CLAUDE_SKILL_DIR} (this skill's own directory); if that variable is not set, substitute the absolute path to this skill's scripts/ folder.
python3 "${CLAUDE_SKILL_DIR}/scripts/website_qa_checklist.py" --depth deep --auth unknown
Playwright Plugin Surface
Use these Playwright plugin tools when available.
Observation and setup:
browser_tabs - create/select/close/list tabs. Use a new tab for fresh checks.browser_navigate / browser_navigate_back - move to the target URL and between routes.browser_resize - switch desktop and mobile viewport sizes.browser_snapshot - inspect accessible structure and interactive elements.browser_take_screenshot - capture visual evidence for findings and the report.browser_console_messages - collect console errors/warnings.browser_network_requests - list browser-visible requests and failures.browser_network_request - inspect a specific request when needed.browser_wait_for - wait for text/state to settle before re-checking console and network.
Interaction (to exercise real flows):
browser_click - activate links, buttons, and controls.browser_type / browser_fill_form - enter text and complete forms.browser_select_option - choose values in dropdowns/selects.browser_press_key - keyboard input and focus/keyboard-navigation checks.browser_hover - reveal hover menus and tooltips.browser_handle_dialog - accept or dismiss native dialogs and confirms.
If a needed Playwright action is not exposed by the plugin, state the limitation and use the closest observable evidence. Do not pretend Lighthouse, HAR export, video recording, storage-state persistence, or tracing ran unless it actually did.
Default Deep QA Workflow
- Identify target URL. If missing, ask for it. If it is local, check whether a dev server is running or ask the user to start it.
- Open a fresh Playwright tab/context through the plugin.
- Navigate to the target URL.
- Capture baseline state:
- page loaded or failed
- console errors and warnings
- failed network requests
- accessibility snapshot
- obvious visual/layout issues
- Test desktop viewport, default
1440x900.
- Test mobile viewport, default
390x844.
- Crawl obvious routes from nav links and primary CTAs. Keep scope practical; do not brute-force unrelated external links.
- Exercise key interactions:
- navigation
- forms
- buttons
- modals/dropdowns
- search/filter/sort controls
- auth redirects or protected routes
- For auth-required flows, pause and let the user type credentials directly into the Playwright browser. Do not capture secrets in screenshots or reports.
- Re-check console and network after each key route or flow.
- Record findings with severity, evidence, reproduction steps, and affected viewport.
Viewports
Default viewports:
- Desktop:
1440x900
- Mobile:
390x844
Use other sizes when the product requires them:
- Small mobile:
360x740
- Tablet:
768x1024
- Wide desktop:
1920x1080
Always report which viewport exposed an issue.
Console And Network Policy
Treat these as findings:
- uncaught exceptions
- hydration/runtime errors
- failed fetch/XHR requests
- 4xx/5xx requests for first-party app resources or APIs
- CORS errors
- mixed-content errors
- blocked scripts that break required behavior
- infinite loading states caused by failed requests
Do not over-report expected analytics/ad-block/third-party noise unless it breaks the user flow. Mention it separately as third-party noise when useful.
Accessibility Heuristics
Use browser_snapshot for accessible structure. Check:
- page has meaningful headings and landmarks
- buttons and links have accessible names
- forms expose labels or clear names
- modals/dropdowns are visible in the accessibility tree when open
- focusable controls are discoverable
- important text is not hidden behind visual-only UI
This is not a full WCAG audit. Call it an accessibility heuristic pass unless deeper tooling is actually used.
Report Style
Lead with findings, ordered by severity:
- Critical: blocks primary flow, data loss, auth/security symptom, blank page.
- High: broken route, broken form, major layout break, important API failure.
- Medium: non-blocking runtime error, responsive issue, accessibility gap, degraded UX.
- Low: minor warning, cosmetic issue, third-party noise, polish item.
For each finding include:
- severity
- title
- affected URL/route
- viewport
- evidence
- reproduction steps
- likely area, if inferable
- suggested fix direction
If no major issues are found, say that clearly and list what was tested plus any gaps.
Security And Privacy
- Do not ask for passwords, OTPs, session cookies, or tokens in chat.
- Let the user type credentials directly into the Playwright browser when needed.
- Avoid screenshots that expose secrets, personal data, private account data, or tokens.
- Report visible security symptoms such as mixed content, tokens in URLs, unsafe redirects, CORS failures, auth loops, and exposed stack traces.
Final Response
End with:
- target URL
- tested viewports/routes/flows
- findings by severity
- console/network summary
- screenshots or snapshots captured, if any
- limitations and checks not run
- recommended next step
