AI导哈

视觉回归测试工具

基于Playwright的视觉回归测试工具，支持UI截图对比和自动化测试，适用于前端开发和质量保证。

  • by pengqiAngus
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 pengqiangus/playwright-mcp

使用说明

@安格斯克/剧作家视觉测试

基于Playwright的可视化回归测试工具，支持UI截图比较和自动测试。

安装

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

特性

  • 支持多视口大小测试
  • 可配置的比较阈值
  • 支持忽略动态内容区域
  • 自动生成比较报告
  • 与MCP协议集成

API文档

runTest（选项）

主要测试功能，接受以下参数：

  • url：目标页面URL
  • viewport：视口大小配置 { width: number, height: number }
  • waitForSelector?：可选，等待特定元素出现
  • ignoreSelectors?：可选，要忽略的选择器数组
  • threshold?：可选，像素比较阈值（0-1）

许可证

麻省理工学院

MCP Playwright可视化测试工具配置指南

在mcp.json中，您可以按如下方式配置Playwright可视化测试工具：

{
  "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
    }
  }
}

配置详情

自动登录配置

  • AUTO_LOGIN_USERNAME：登录用户名
  • AUTO_LOGIN_PASSWORD：登录密码
  • AUTO_LOGIN_USERNAME_SELECTOR：用户名输入字段选择器
  • AUTO_LOGIN_PASSWORD_SELECTOR：密码输入字段选择器
  • AUTO_LOGIN_SUBMIT_SELECTOR：登录按钮选择器
  • AUTO_LOGIN_SUCCESS_SELECTOR：成功登录后的元素选择器（可选）
  • AUTO_LOGIN_URL_PATTERN：用于自动检测登录页面重定向的登录页面URL匹配模式

视觉测试配置

  • TEST_SELECTOR：要截图的元素选择器，如果未设置，则捕获整个页面
  • TEST_WAIT_FOR_SELECTOR：在截图之前等待特定元素
  • TEST_WAIT_TIMEOUT：等待元素的超时时间（毫秒）
  • TEST_THRESHOLD：图像比较的像素差阈值（0-100），默认值为100
  • TEST_IGNORE_SELECTORS：比较过程中要忽略的选择器列表，逗号分隔
  • TEST_VIEWPORT_WIDTH：浏览器视口宽度，默认值1280
  • TEST_VIEWPORT_HEIGHT：浏览器视口高度，默认值720

项目配置

  • PROJECT_ROOT：用于存储屏幕截图和文件的项目根目录的绝对路径

备注

  1. 所有配置项都是可选的，但建议配置基本登录信息和视口大小
  2. 屏幕截图将保存在 screenshots 项目根目录中的文件夹
  3. 比较结果将生成三个文件：
    • current.png：当前测试截图
    • baseline.png：基线屏幕截图
    • diff.png：差异比较图像
  4. 首次运行时，当前屏幕截图将自动设置为基线图像

相关 MCP