Web App Testing (Playwright)

Web App Testing (Playwright)

Manual testing finds bugs once. Automated tests find them every time. This skill writes Playwright scripts that test real browser behaviour — clicks, forms, navigation, network calls, and visual state — reliably and repeatably.

Web App Testing Principles

• Reconnaissance before action. Never assume a selector exists. Navigate, wait for load, inspect the DOM, then act. Selectors that work in dev break in staging. Discover them at runtime.
• Wait for real readiness. networkidle is not always enough. Wait for the specific element you need, not just page load.
• Test what the user experiences. Test by role, text, and label — not by CSS class or XPath. Classes change; user-facing text is more stable.
• One test, one user journey. A test that does login + checkout + confirmation + email verification is four tests jammed together. Split them.
• Tests must clean up after themselves. A test that leaves state (created users, placed orders) that affects the next test is a flaky test waiting to happen.
• Screenshot on failure. Every test should capture a screenshot when it fails — this is the single fastest debugging tool available.

Step 0: Choose the Right Approach

Is the app running?
├── NO → Start it first with with_server.py helper (if available)
│         or: npm run dev / python app.py in background
└── YES
    └── Is it static HTML (no JS framework)?
        ├── YES → Read HTML directly, write selectors from source
        └── NO (React, Vue, Svelte, etc.)
            → Reconnaissance first: navigate → networkidle → screenshot → inspect → act

Project Setup

Install Playwright

npm init -y
npm install -D @playwright/test
npx playwright install chromium  # or: install firefox, webkit too