@anguske/mcp-playwright-visual-test NPM

@anguske/playwright-visual-test

A visual regression testing tool based on Playwright, supporting UI screenshot comparison and automated testing.

Installation

npm install @anguske/playwright-visual-test
# or
yarn add @anguske/playwright-visual-test
# or
pnpm add @anguske/playwright-visual-test

Features

Support for multiple viewport size testing
Configurable comparison threshold
Support for ignoring dynamic content areas
Automatic comparison report generation
Integration with MCP protocol

API Documentation

runTest(options)

Main test function, accepts the following parameters:

url: Target page URL
viewport: Viewport size configuration { width: number, height: number }
waitForSelector?: Optional, wait for specific element to appear
ignoreSelectors?: Optional, array of selectors to ignore
threshold?: Optional, pixel comparison threshold (0-1)

License

MIT

MCP Playwright Visual Test Tool Configuration Guide

In mcp.json, you can configure the Playwright visual test tool as follows:

{
  "mcp-playwright": {
    "command": "npx",
    "args": [
      "-y",
      "@anguske/mcp-playwright-visual-test"
    ],
    "env": {
      // Auto login configuration
      "AUTO_LOGIN_USERNAME": "your-username",
      "AUTO_LOGIN_PASSWORD": "your-password",
      "AUTO_LOGIN_USERNAME_SELECTOR": "#userNameSignIn",
      "AUTO_LOGIN_PASSWORD_SELECTOR": "#passwordSignIn",
      "AUTO_LOGIN_SUBMIT_SELECTOR": "input[type=\"submit\"]",
      "AUTO_LOGIN_SUCCESS_SELECTOR": "", // Optional, element selector after successful login
      "AUTO_LOGIN_URL_PATTERN": "login|signin|auth", // Login page URL match pattern

      // Visual test configuration
      "TEST_SELECTOR": "", // Optional, selector for element to screenshot
      "TEST_WAIT_FOR_SELECTOR": "", // Optional, wait for specific element
      "TEST_WAIT_TIMEOUT": 10000, // Optional, wait timeout in milliseconds
      "TEST_THRESHOLD": 20, // Optional, pixel comparison threshold (0-100)
      "TEST_IGNORE_SELECTORS": ".dynamic-content,.ads", // Optional, selectors to ignore, comma separated
      "TEST_VIEWPORT_WIDTH": 1440, // Optional, viewport width, default 1280
      "TEST_VIEWPORT_HEIGHT": 800, // Optional, viewport height, default 720

      // Project configuration
      "PROJECT_ROOT": "D:/myProject/quickstart-resources/weather-server-typescript" // Project root path
    }
  }
}

Configuration Details

Auto Login Configuration

AUTO_LOGIN_USERNAME: Login username
AUTO_LOGIN_PASSWORD: Login password
AUTO_LOGIN_USERNAME_SELECTOR: Username input field selector
AUTO_LOGIN_PASSWORD_SELECTOR: Password input field selector
AUTO_LOGIN_SUBMIT_SELECTOR: Login button selector
AUTO_LOGIN_SUCCESS_SELECTOR: Element selector after successful login (optional)
AUTO_LOGIN_URL_PATTERN: Login page URL match pattern for auto-detecting login page redirects

Visual Test Configuration

TEST_SELECTOR: Selector for element to screenshot, captures entire page if not set
TEST_WAIT_FOR_SELECTOR: Wait for specific element before taking screenshot
TEST_WAIT_TIMEOUT: Timeout for waiting for element (milliseconds)
TEST_THRESHOLD: Pixel difference threshold for image comparison (0-100), default 100
TEST_IGNORE_SELECTORS: List of selectors to ignore during comparison, comma separated
TEST_VIEWPORT_WIDTH: Browser viewport width, default 1280
TEST_VIEWPORT_HEIGHT: Browser viewport height, default 720

Project Configuration

PROJECT_ROOT: Absolute path to project root directory for storing screenshots and files

Notes

All configuration items are optional, but it's recommended to configure essential login information and viewport size
Screenshots will be saved in the screenshots folder in the project root directory
Comparison results will generate three files:
- current.png: Current test screenshot
- baseline.png: Baseline screenshot
- diff.png: Difference comparison image
On first run, the current screenshot will automatically be set as the baseline image