Cursor with Playwright: Generate, Run & Fix Tests with MCP

node --version   # 18+
npm --version    # 8+

npm install --save-dev @playwright/mcp

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--caps=vision"]
    }
  }
}

{
  "args": ["@playwright/mcp@latest", "--isolated"]
}

npm install -g @playwright/cli@latest
playwright-cli install
npx skills add testdino-hq/playwright-skill/playwright-cli

# All 70+ guides at once
npx skills add testdino-hq/playwright-skill

# Or by pack
npx skills add testdino-hq/playwright-skill/core        # 46 locator/assertion/auth guides
npx skills add testdino-hq/playwright-skill/ci          # 9 GitHub Actions / GitLab CI guides
npx skills add testdino-hq/playwright-skill/playwright-cli  # 11 CLI automation guides

# Playwright rules , [your project name]

## Locators
- Use getByRole, getByTestId, or getByLabel
- Never use CSS selectors, XPath, or page.locator() with class strings
- Check the live accessibility tree via MCP before choosing a locator

## Structure
- 1 file per feature or user flow
- Wrap related tests in describe() blocks
- Keep each test under 30 lines
- Name files as feature-name.spec.ts

## Timing
- Never use page.waitForTimeout() or fixed delays
- Use waitForLoadState('networkidle') for page transitions
- Use element.waitFor({ state: 'visible' }) for element state

## Test data
- All credentials and test data via fixtures or env vars
- Tests must pass in isolation, no dependency on prior tests
- Use storageState for auth , never log in through the UI per test

## Assertions
- Assert the final outcome, not intermediate DOM states
- Use toBeVisible, toHaveText, toHaveURL

## Output
- Return diffs, not full files
- Add a 1-line comment at the top explaining what the test covers

Generate a Playwright test for the login flow on https://storedemo.testdino.com.
Use Playwright MCP to inspect the page.
- Navigate to the site, open the login page
- Sign in with env vars (STOREDEMO_EMAIL, STOREDEMO_PASSWORD)
- Verify the user is logged in by checking the dashboard heading
Use getByRole or getByLabel. Follow .cursorrules.

// tests/auth/login-flow.spec.ts
// Covers: successful login and dashboard access

import { test, expect } from '@playwright/test';

test.describe('Login', () => {
  test('user can sign in with valid credentials', async ({ page }) => {
    const email = process.env.STOREDEMO_EMAIL;
    const password = process.env.STOREDEMO_PASSWORD;

    if (!email || !password) {
      throw new Error('Set STOREDEMO_EMAIL and STOREDEMO_PASSWORD in .env');
    }

    await page.goto('/login');
    await page.getByLabel(/email/i).fill(email);
    await page.getByLabel(/password/i).fill(password);
    await page.getByRole('button', { name: /sign in/i }).click();
    await page.waitForLoadState('networkidle');

    await expect(page.getByRole('heading', { name: /dashboard/i })).toBeVisible();
  });
});

  ✓  tests/auth/login-flow.spec.ts › Login › user can sign in (1.8s)
  1 passed (3.2s)

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  use: {
    baseURL: 'https://storedemo.testdino.com',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
});

Using Playwright CLI, generate tests for the complete checkout flow on
https://storedemo.testdino.com. 4 steps: add to cart, proceed to checkout,
enter shipping, confirm order. 1 test per step. Follow .cursorrules.
Return diffs only.

  ✓  tests/checkout/add-to-cart.spec.ts (2.1s)
  ✓  tests/checkout/proceed-to-checkout.spec.ts (1.9s)
  ✓  tests/checkout/shipping-details.spec.ts (3.4s)
  ✓  tests/checkout/confirm-order.spec.ts (2.8s)
  4 passed (6.1s)

# Record the flow , zero AI tokens
npx playwright codegen https://storedemo.testdino.com

node --version                         # Must be 18+
npx playwright install --with-deps     # Install browser binaries
cat .cursor/mcp.json | python3 -m json.tool  # Validate JSON syntax

<!-- .cursor/rules/playwright.md -->
---
glob: "**/*.spec.ts"
---

- Use getByRole, getByTestId, or getByLabel
- Never use CSS selectors or XPath

# .github/workflows/playwright.yml
- name: Install Playwright browsers
  run: npx playwright install --with-deps

- name: Run tests
  run: npx playwright test --trace on
  env:
    STOREDEMO_EMAIL: ${{ secrets.STOREDEMO_EMAIL }}
    STOREDEMO_PASSWORD: ${{ secrets.STOREDEMO_PASSWORD }}

- name: Upload report
  if: always()
  uses: actions/upload-artifact@v4
  with:
    name: playwright-report
    path: playwright-report/

// Replace this
await page.waitForLoadState('networkidle');

// With this
await page.locator('[data-testid="payment-form"]').waitFor({ state: 'visible' });

[ ] Passes locally: npx playwright test path/to/spec.ts --headed
[ ] Locators are semantic , no CSS classes, no IDs
[ ] No hardcoded credentials , all from .env or fixtures
[ ] No page.waitForTimeout() in the file
[ ] Passes in isolation , no dependency on other tests running first
[ ] Runs in CI with --trace on

npm install @testdino/playwright
npx tdpw test --token "your_token_here"

Running 24 tests using 4 workers

  ✓  tests/auth/login-flow.spec.ts (1.8s)
  ✗  tests/checkout/payment-form.spec.ts (4.2s)
  ...

  22 passed, 1 failed, 1 flaky (8.4s)
Dashboard: https://app.testdino.com/runs/run-abc123

- name: Upload to TestDino
  if: always()
  run: npx tdpw upload ./playwright-report --token="${{ secrets.TESTDINO_TOKEN }}" --upload-html

{
  "mcpServers": {
    "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] },
    "TestDino": {
      "command": "npx",
      "args": ["-y", "testdino-mcp"],
      "env": { "TESTDINO_PAT": "your-token-here" }
    }
  }
}

1. CI reports a failure. TestDino classifies it: "Flaky, 85% confidence"

2. In Cursor:
   "Using TestDino MCP, show me the last 20 runs of payment-form.spec.ts.
    Failure rate, which browsers, and the recurring error."

3. TestDino MCP returns:
   "Fails on WebKit 6/20 runs. Error: element not visible.
    Payment form slide-in animation timing."

4. Feed to Healer:
   "Fix payment-form.spec.ts. Flaky on WebKit , payment form
    animation causes element-not-visible. Use Playwright MCP
    to inspect WebKit and add the correct wait. No waitForTimeout."

5. Healer opens WebKit, finds the animation, adds
   waitFor({ state: 'visible' }), reruns until stable, returns diff.

6. Review. Commit.