Fix errors · How to use a skill

test-web-app-with-playwright

Tests a local web app in a real headless browser with Playwright - start the dev server, wait for the page to load, look before you click, then script the flow and capture screenshots and console errors. Use when the user wants to check a page works, click through a flow, take a screenshot, or see browser console logs.

Version 1.0 · Updated 2026-10-31

View raw SKILL.md

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/test-web-app-with-playwright/raw' -o ~/'.claude/skills/test-web-app-with-playwright/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/test-web-app-with-playwright/files/LICENSE.txt' -o ~/'.claude/skills/test-web-app-with-playwright/LICENSE.txt'

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/test-web-app-with-playwright/raw' -o '.cursor/skills/test-web-app-with-playwright/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/test-web-app-with-playwright/files/LICENSE.txt' -o '.cursor/skills/test-web-app-with-playwright/LICENSE.txt'

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/test-web-app-with-playwright/raw' -o '.agents/skills/test-web-app-with-playwright/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/test-web-app-with-playwright/files/LICENSE.txt' -o '.agents/skills/test-web-app-with-playwright/LICENSE.txt'

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Test a web app with Playwright

Drive your app in a real browser, the way a user would. First look at what is on the page, then act on what you found.

When to use

• You want proof that a page or flow (sign-up, checkout, form) works.
• You need a screenshot, or the browser console errors, from a local app.
• A click or form "does nothing" and you want to see why.

Steps

1. Install. JavaScript: npm i -D @playwright/test then npx playwright install chromium. Python: pip install playwright then playwright install chromium.
2. Start the app. Run your dev server (for example npm run dev). In playwright.config.ts, the webServer option can start and stop it for you.
3. Open and wait. Go to the URL and wait for the page to settle (waitForLoadState('networkidle')) before reading anything. Dynamic apps render after the first load.
4. Look first. Take a full-page screenshot and list the buttons, links and inputs. Pick selectors from what is really there.
5. Prefer user-facing selectors. Use getByRole('button', { name: 'Sign up' }), getByLabel or getByText. Fall back to CSS or IDs only when needed.
6. Script the flow. Fill, click and check results with expect(...). Do one user goal per test.
7. Capture the console. Listen to page.on('console') and page.on('pageerror'), and fail the test on unexpected errors.
8. Run headless. Use npx playwright test (or python your_test.py), and close the browser at the end. Open the HTML report or trace when something fails.

Example (JavaScript)

import { test, expect } from "@playwright/test";
test("sign-up works", async ({ page }) => {
  await page.goto("http://localhost:3000/signup");
  await page.getByLabel("Email").fill("test@example.com");
  await page.getByRole("button", { name: "Sign up" }).click();
  await expect(page.getByText("Check your inbox")).toBeVisible();
});

Gotchas

• Reading the page before it settles gives empty or wrong results on dynamic apps. Wait first.
• Test against localhost or a staging copy, never against live customer accounts.
• Use throwaway test users. Keep passwords and API keys in environment variables, not in test files or screenshots.

Works with any stack

Any web framework works, because Playwright only sees the browser. If you use Python, the same API exists with snake_case names (wait_for_load_state).

Done when

• The test runs headless and passes from a clean start.
• It fails if you break the feature on purpose.
• No unexpected console errors appear during the run.

Example prompt

"Click through my sign-up form in a browser and tell me if it works, with a screenshot."

---

Adapted from "webapp-testing" in anthropics/skills (Apache-2.0, Copyright 2026 Anthropic, PBC). Changed by TheSkillVault as noted above. See LICENSE.txt.

Adapted from Anthropic (anthropics/skills, webapp-testing) (Copyright 2026 Anthropic, PBC.), Apache License 2.0. Adapted by TheSkillVault: rewritten for beginners, added a JavaScript test-runner path next to Python, dropped the bundled helper scripts, added safety and done-when sections.

Licence: Apache License 2.0. Attribution when you reuse it: Based on work by Anthropic (anthropics/skills, webapp-testing) (Copyright 2026 Anthropic, PBC., Apache License 2.0), https://github.com/anthropics/skills/tree/ca45fc496a3436251f191354091d557da31c15b5/skills/webapp-testing; adapted by TheSkillVault, https://theskillvault.ai