playwright e2e mcp

    1

    Run, debug, and fix Playwright E2E tests using structured diagnostics and live DOM validation.

    Free

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    playwright e2e mcp

    Example session with this skill installed

    My checkout tests are failing in CI. Can you find out why and fix them? The test file is tests/checkout.spec.ts.

    • Read your context and instructions
    • Compiled the playwright e2e mcp

    I ran the checkout tests and identified a locator failure. The test was looking for a "Pay Now" button using an outdated CSS class that changed in the last deployment. I've validated a new selector and updated the test.

    Test Fix Summary

    Test CaseStatusIssueFix
    checkout.spec.ts:42✅ PassedTimeoutError: selector .btn-primary-old not foundUpdated to getByRole('button', { name: 'Pay Now' })
    checkout.spec.ts:88✅ PassedAssertionError: expected 'Success' but found 'Processing'Added waitForLoadState('networkidle')
    // tests/checkout.spec.ts refactor
import { test, expect } from '@playwright/test';

test('user can complete purchase', async ({ page }) => {
  await page.goto('/checkout');
  // ... existing steps
  
  // FIXED: Updated stale selector to accessible role
  const payButton = page.getByRole('button', { name: 'Pay Now' });
  await payButton.click();

  // FIXED: Ensure network settles before checking success message
  await page.waitForLoadState('networkidle');
  await expect(page.locator('.status-msg')).toHaveText('Success');
});

    Next steps

    1. Review the change to tests/checkout.spec.ts to ensure the new locator aligns with your naming conventions.
    2. Run the full suite to ensure no regressions in related modules.
    3. Check the .pw-mcp/visual/ directory if you want to update the baseline for the new checkout UI.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Fixing broken end-to-end tests is a slog of digging through raw terminal logs and guessing why a selector failed. This skill automates the debugging cycle by interfacing directly with the playwright-e2e-mcp server. It replaces manual trial-and-error with structured diagnostics, trace-based DOM snapshots, and automated selector validation.

    What it does

    • Structured diagnostics delivers precise failure reasons, code frames, and DOM snapshots instead of raw logs.
    • Selector repair validates new locators against the live page before you commit code changes.
    • Flakiness analysis runs targeted stress tests to distinguish between environmental noise and genuine race conditions.
    • Visual regression compares current page states against baselines to detect unintended UI shifts.
    • Test generation scaffolds new spec files based on existing project selectors and recent git changes.

    How it works

    1. Execute runs the suite or specific files using run-test to capture structured failure metadata and trace files.
    2. Diagnose calls get-failure to inspect the exact DOM state, network requests, and console errors at the moment of impact.
    3. Validate uses inspect-page and validate-selector to find stable replacements for broken locators like data-testid or ARIA roles.
    4. Iterate applies the fix and re-runs only the previously failed tests using the lastFailed flag until the suite is green.

    Frameworks & tools

    Built for Playwright environments using the playwright-e2e-mcp server. It integrates with standard E2E workflows involving Node.js, CSS selectors, and web application testing.

    Why this beats prompting it yourself

    Generic LLM prompts lack access to the live browser state and cannot verify if a suggested selector actually exists. This skill uses a dedicated MCP server to "see" the DOM and run code, ensuring fixes are grounded in the actual application state.

    Use cases

    • Fix failing checkout flows by identifying broken selectors in a single pass.
    • Debug intermittent CI failures by running automated flakiness diagnostics.
    • Update test suites after a major UI refactor or design system migration.
    • Generate boilerplate specs for new features based on live page structures.

    Known limitations

    Requires the playwright-e2e-mcp server to be running and connected. It does not support non-Playwright frameworks like Cypress or Selenium. Visual regression requires an initial baseline set.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 8 days ago

    • Free to download with an account

    Requires

    Playwright E2e MCP
    playwright
    Node.js

    Listed11 days ago
    Updated4 days ago

    What's inside

    Frequently Asked Questions