From lisa-expo
Browser-based user acceptance testing via Playwright MCP tools. Logs into the application, navigates through features, and captures visual proof with screenshots.
npx claudepluginhub codyswanngt/lisa --plugin lisa-expoThis skill is limited to using the following tools:
Perform browser-based user acceptance testing using Playwright MCP tools.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Perform browser-based user acceptance testing using Playwright MCP tools.
Argument: $ARGUMENTS — scenario and environment (e.g., smoke-test dev, login staging, player-detail dev, custom production /path)
ToolSearch to search for playwright browser and load all browser tools.Before running any scenario, read these project files to discover configuration:
e2e/constants.ts — environment URLs, test credentials (phone, OTP), timeouts, viewportse2e/selectors.ts — all data-testid values organized by feature areae2e/fixtures/auth.fixture.ts — exact login/logout flow to replicate via MCP toolsplaywright.config.ts — video/trace recording config, test directoryReplicate the login flow from e2e/fixtures/auth.fixture.ts using Playwright MCP tools. Read the file to get the exact steps, which typically follow this pattern:
browser_navigate to {BASE_URL}/signinbrowser_snapshot to discover page elementsbrowser_fill_form — fill the phone input (discover placeholder text from auth fixture)browser_click — click the "Next" buttonbrowser_wait_for — wait for URL to contain confirm-code (timeout from constants)browser_snapshot to discover OTP inputbrowser_fill_form — fill the OTP input (discover testid from selectors, value from constants)browser_wait_for — wait for URL to NOT contain confirm-codebrowser_take_screenshot — capture login proofExpo's development error overlay may appear. Dismiss it:
browser_evaluate with script:
document.getElementById('error-overlay')?.remove();
document.querySelectorAll('[id*="error"]').forEach(el => el.remove());
browser_press_key — press "Escape" as backup// browser_evaluate
localStorage.getItem("@authData") !== null
Discover the menu button and sign-out flow from e2e/selectors.ts and e2e/fixtures/auth.fixture.ts:
browser_click — menu button element (discover testid from selectors)browser_click — element with text "Sign Out"browser_wait_for — URL contains signinRead e2e/selectors.ts to get the complete data-testid reference for the project. The selectors object is organized by feature area (auth, nav, home sections, player detail, etc.).
Use [data-testid="{TESTID}"] to target elements in Playwright MCP tools.
Full app walkthrough. Read e2e/selectors.ts to identify which sections and elements to verify:
Just the login flow with screenshot proof.
Login → verify all home screen sections have data. Screenshot each section.
Login → navigate to user-specified URL → interact as instructed → screenshot.
At each verification point:
browser_take_screenshot — visual proof of current statebrowser_console_messages — check for JavaScript errorsbrowser_network_requests — monitor for failed API calls (4xx, 5xx)Report UAT results as a table:
| Step | Action | Status | Notes |
|---|---|---|---|
| 1 | Navigate to /signin | PASS | Page loaded in 1.2s |
| 2 | Enter phone number | PASS | Input accepted |
| 3 | Click Next | PASS | Navigated to /confirm-code |
| 4 | Enter OTP | PASS | OTP accepted |
| 5 | Verify home screen | PASS | All sections present |
| 6 | Logout | PASS | Redirected to /signin |
Include total PASS/FAIL count and any JS errors or failed network requests observed.