Back to Details

configure-ux-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/configure:ux-testing

/configure:UX测试

Check and configure UX testing infrastructure with Playwright as the primary tool for E2E, accessibility, and visual regression testing.
检查并配置UX测试基础设施，以Playwright作为端到端（E2E）、无障碍测试和视觉回归测试的核心工具。

When to Use This Skill

何时使用该技能

Use this skill when...Use another approach when...
Setting up Playwright E2E testing infrastructure for a projectRunning existing Playwright tests (use 
bun test:e2e
or test-runner agent)
Adding accessibility testing with axe-core to a projectPerforming manual accessibility audits on a live site
Configuring visual regression testing with screenshot assertionsDebugging a specific failing E2E test (use system-debugging agent)
Setting up Playwright MCP server for Claude browser automationWriting individual test cases (use playwright-testing skill)
Creating CI/CD workflows for E2E and accessibility test executionConfiguring unit or integration tests (use 
/configure:tests
)
使用该技能的场景...使用其他方法的场景...
为项目搭建Playwright E2E测试基础设施运行已有的Playwright测试（使用
bun test:e2e
或测试运行Agent）
为项目添加基于axe-core的无障碍测试在实时网站上执行手动无障碍审计
配置基于截图断言的视觉回归测试调试特定失败的E2E测试（使用系统调试Agent）
为Claude浏览器自动化搭建Playwright MCP服务器编写单个测试用例（使用playwright-testing技能）
为E2E和无障碍测试执行创建CI/CD工作流配置单元测试或集成测试（使用
/configure:tests
）

Context

上下文

  • Package manager: !
    find . -maxdepth 1 \( -name 'package.json' -o -name 'bun.lockb' \) 2>/dev/null
  • Playwright config: !
    find . -maxdepth 1 -name 'playwright.config.*' 2>/dev/null
  • Playwright installed: !
    grep -l '@playwright/test' package.json 2>/dev/null
  • Axe-core installed: !
    grep -l '@axe-core/playwright' package.json 2>/dev/null
  • E2E test dir: !
    find . -maxdepth 2 -type d \( -name 'e2e' -o -name 'tests' \) 2>/dev/null
  • Visual snapshots: !
    find . -maxdepth 4 -type d -name '__snapshots__' 2>/dev/null
  • MCP config: !
    find . -maxdepth 1 -name '.mcp.json' 2>/dev/null
  • CI workflow: !
    find .github/workflows -maxdepth 1 -name 'e2e*' 2>/dev/null
UX Testing Stack:
  • Playwright - Cross-browser E2E testing (primary tool)
  • axe-core - Automated accessibility testing (WCAG compliance)
  • Playwright screenshots - Visual regression testing
  • Playwright MCP - Browser automation via MCP integration
  • 包管理器: !
    find . -maxdepth 1 \( -name 'package.json' -o -name 'bun.lockb' \) 2>/dev/null
  • Playwright配置: !
    find . -maxdepth 1 -name 'playwright.config.*' 2>/dev/null
  • Playwright已安装: !
    grep -l '@playwright/test' package.json 2>/dev/null
  • Axe-core已安装: !
    grep -l '@axe-core/playwright' package.json 2>/dev/null
  • E2E测试目录: !
    find . -maxdepth 2 -type d \( -name 'e2e' -o -name 'tests' \) 2>/dev/null
  • 视觉快照: !
    find . -maxdepth 4 -type d -name '__snapshots__' 2>/dev/null
  • MCP配置: !
    find . -maxdepth 1 -name '.mcp.json' 2>/dev/null
  • CI工作流: !
    find .github/workflows -maxdepth 1 -name 'e2e*' 2>/dev/null
UX测试技术栈:
  • Playwright - 跨浏览器端到端（E2E）测试（核心工具）
  • axe-core - 自动化无障碍测试（符合WCAG标准）
  • Playwright截图 - 视觉回归测试
  • Playwright MCP - 通过MCP集成实现浏览器自动化

Parameters

参数

Parse from command arguments:
  • --check-only
    : Report status without offering fixes
  • --fix
    : Apply all fixes automatically without prompting
  • --a11y
    : Focus on accessibility testing configuration
  • --visual
    : Focus on visual regression testing configuration
从命令参数中解析：
  • --check-only
    : 仅报告状态，不提供修复方案
  • --fix
    : 自动应用所有修复，无需提示
  • --a11y
    : 专注于无障碍测试配置
  • --visual
    : 专注于视觉回归测试配置

Execution

执行步骤

Execute this UX testing configuration check:
执行此UX测试配置检查：

Step 1: Fetch latest tool versions

步骤1：获取工具最新版本

Verify latest versions before configuring:
  1. @playwright/test: Check playwright.dev or npm
  2. @axe-core/playwright: Check npm
  3. playwright MCP: Check npm
Use WebSearch or WebFetch to verify current versions.
配置前验证最新版本：
  1. @playwright/test: 查看playwright.dev或npm
  2. @axe-core/playwright: 查看npm
  3. playwright MCP: 查看npm
使用WebSearch或WebFetch验证当前版本。

Step 2: Detect existing UX testing infrastructure

步骤2：检测现有UX测试基础设施

Check for each component:
IndicatorComponentStatus
playwright.config.*
PlaywrightInstalled
@axe-core/playwright
in package.json		Accessibility testingConfigured
@playwright/test
in package.json		Playwright TestInstalled
tests/e2e/
or 
e2e/
directory		E2E testsPresent
*.spec.ts
files with toHaveScreenshot		Visual regressionConfigured
.mcp.json
with playwright server		Playwright MCPConfigured
检查每个组件：
指示器组件状态
playwright.config.*
Playwright已安装
@axe-core/playwright
在package.json中		无障碍测试已配置
@playwright/test
在package.json中		Playwright Test已安装
tests/e2e/
或 
e2e/
目录		E2E测试已存在
包含toHaveScreenshot的
*.spec.ts
文件		视觉回归已配置
包含playwright server的
.mcp.json
Playwright MCP已配置

Step 3: Analyze current testing state

步骤3：分析当前测试状态

Check for complete UX testing setup across four areas:
Playwright Core:
  • @playwright/test
    installed
  • playwright.config.ts
    exists
  • Browser projects configured (Chromium, Firefox, WebKit)
  • Mobile viewports configured (optional)
  • WebServer configuration for local dev
  • Trace/screenshot/video on failure
Accessibility Testing:
  • @axe-core/playwright
    installed
  • Accessibility tests created
  • WCAG level configured (A, AA, AAA)
  • Custom rules/exceptions documented
Visual Regression:
  • Screenshot assertions configured
  • Snapshot directory configured
  • Update workflow documented
  • CI snapshot handling configured
MCP Integration:
  • Playwright MCP server in 
    .mcp.json
  • Browser automation available to Claude
检查四个领域的完整UX测试设置：
Playwright核心:
  • 已安装
    @playwright/test
  • 存在
    playwright.config.ts
  • 已配置浏览器项目（Chromium、Firefox、WebKit）
  • 已配置移动端视口（可选）
  • 本地开发的WebServer配置
  • 失败时的追踪/截图/视频记录
无障碍测试:
  • 已安装
    @axe-core/playwright
  • 已创建无障碍测试用例
  • 已配置WCAG级别（A、AA、AAA）
  • 已记录自定义规则/例外情况
视觉回归:
  • 已配置截图断言
  • 已配置快照目录
  • 已记录更新工作流
  • 已配置CI中的快照处理
MCP集成:
  • .mcp.json
    中包含Playwright MCP服务器
  • Claude可使用浏览器自动化功能

Step 4: Generate compliance report

步骤4：生成合规性报告

Print a formatted compliance report showing status for Playwright core, accessibility testing, visual regression, and MCP integration.
If 
--check-only
is set, stop here.
For the compliance report format, see REFERENCE.md.
打印格式化的合规性报告，展示Playwright核心、无障碍测试、视觉回归和MCP集成的状态。
如果设置了
--check-only
，在此步骤停止。
合规性报告格式请参考REFERENCE.md。

Step 5: Install dependencies (if --fix or user confirms)

步骤5：安装依赖（如果使用--fix或用户确认）

bash
undefined
bash
undefined

Core Playwright

Core Playwright

bun add --dev @playwright/test
bun add --dev @playwright/test

Accessibility testing

Accessibility testing

bun add --dev @axe-core/playwright
bun add --dev @axe-core/playwright

Install browsers

Install browsers

bunx playwright install
undefined
bunx playwright install
undefined

Step 6: Create Playwright configuration

步骤6：创建Playwright配置

Create 
playwright.config.ts
with:
  • Desktop browser projects (Chromium, Firefox, WebKit)
  • Mobile viewport projects (Pixel 5, iPhone 13)
  • Dedicated a11y test project (Chromium only)
  • WebServer auto-start for local dev
  • Trace/screenshot/video on failure settings
  • JSON and JUnit reporters for CI
For the complete 
playwright.config.ts
template, see REFERENCE.md.
创建
playwright.config.ts
，包含：
  • 桌面浏览器项目（Chromium、Firefox、WebKit）
  • 移动端视口项目（Pixel 5、iPhone 13）
  • 专用的无障碍测试项目（仅Chromium）
  • 本地开发的WebServer自动启动配置
  • 失败时的追踪/截图/视频设置
  • 用于CI的JSON和JUnit报告器
完整的
playwright.config.ts
模板请参考REFERENCE.md。

Step 7: Create accessibility test helper

步骤7：创建无障碍测试辅助工具

Create 
tests/e2e/helpers/a11y.ts
with:
  • expectNoA11yViolations(page, options)
    - Assert no WCAG violations
  • getA11yReport(page, options)
    - Generate detailed a11y report
  • Configurable WCAG level (wcag2a, wcag2aa, wcag21aa, wcag22aa)
  • Rule include/exclude support
  • Formatted violation output
For the complete a11y helper code, see REFERENCE.md.
创建
tests/e2e/helpers/a11y.ts
，包含：
  • expectNoA11yViolations(page, options)
    - 断言无WCAG违规
  • getA11yReport(page, options)
    - 生成详细的无障碍报告
  • 可配置的WCAG级别（wcag2a、wcag2aa、wcag21aa、wcag22aa）
  • 规则包含/排除支持
  • 格式化的违规输出
完整的无障碍测试辅助工具代码请参考REFERENCE.md。

Step 8: Create example test files

步骤8：创建示例测试文件

Create example tests:
  1. tests/e2e/homepage.a11y.spec.ts
     - Homepage accessibility tests (WCAG 2.1 AA violations, post-interaction checks, full report)
  2. tests/e2e/visual.spec.ts
     - Visual regression tests (full page screenshots, component screenshots, responsive layouts, dark mode)
For complete example test files, see REFERENCE.md.
创建示例测试：
  1. tests/e2e/homepage.a11y.spec.ts
     - 首页无障碍测试（检查WCAG 2.1 AA违规、交互后检查、完整报告）
  2. tests/e2e/visual.spec.ts
     - 视觉回归测试（全页截图、组件截图、响应式布局、深色模式）
完整的示例测试文件请参考REFERENCE.md。

Step 9: Add npm scripts

步骤9：添加npm脚本

Update 
package.json
with test scripts:
json
{
  "scripts": {
    "test:e2e": "playwright test",
    "test:e2e:headed": "playwright test --headed",
    "test:e2e:debug": "playwright test --debug",
    "test:e2e:ui": "playwright test --ui",
    "test:a11y": "playwright test --project=a11y",
    "test:visual": "playwright test visual.spec.ts",
    "test:visual:update": "playwright test visual.spec.ts --update-snapshots",
    "playwright:codegen": "playwright codegen http://localhost:3000",
    "playwright:report": "playwright show-report"
  }
}
更新
package.json
中的测试脚本：
json
{
  "scripts": {
    "test:e2e": "playwright test",
    "test:e2e:headed": "playwright test --headed",
    "test:e2e:debug": "playwright test --debug",
    "test:e2e:ui": "playwright test --ui",
    "test:a11y": "playwright test --project=a11y",
    "test:visual": "playwright test visual.spec.ts",
    "test:visual:update": "playwright test visual.spec.ts --update-snapshots",
    "playwright:codegen": "playwright codegen http://localhost:3000",
    "playwright:report": "playwright show-report"
  }
}

Step 10: Configure MCP integration (optional)

步骤10：配置MCP集成（可选）

Add to 
.mcp.json
:
json
{
  "mcpServers": {
    "playwright": {
      "command": "bunx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}
This enables Claude to navigate web pages, take screenshots, fill forms, click elements, and capture accessibility snapshots.
添加到
.mcp.json
：
json
{
  "mcpServers": {
    "playwright": {
      "command": "bunx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}
这将允许Claude导航网页、截取屏幕截图、填写表单、点击元素并捕获无障碍快照。

Step 11: Create CI/CD workflow

步骤11：创建CI/CD工作流

Create 
.github/workflows/e2e.yml
with parallel jobs for:
  • E2E tests (all browsers)
  • Accessibility tests (Chromium only)
  • Artifact upload for reports and failure screenshots
For the complete CI workflow template, see REFERENCE.md.
创建
.github/workflows/e2e.yml
，包含并行任务：
  • E2E测试（所有浏览器）
  • 无障碍测试（仅Chromium）
  • 上传报告和失败截图作为工件
完整的CI工作流模板请参考REFERENCE.md。

Step 12: Update standards tracking

步骤12：更新标准跟踪

Update 
.project-standards.yaml
:
yaml
components:
  ux_testing: "2025.1"
  ux_testing_framework: "playwright"
  ux_testing_a11y: true
  ux_testing_a11y_level: "wcag21aa"
  ux_testing_visual: true
  ux_testing_mcp: true
更新
.project-standards.yaml
：
yaml
components:
  ux_testing: "2025.1"
  ux_testing_framework: "playwright"
  ux_testing_a11y: true
  ux_testing_a11y_level: "wcag21aa"
  ux_testing_visual: true
  ux_testing_mcp: true

Step 13: Report configuration results

步骤13：报告配置结果

Print a summary of configuration applied, scripts added, and CI/CD setup. Include next steps for starting the dev server, running tests, updating snapshots, and opening the interactive UI.
For the results report format, see REFERENCE.md.
打印已应用的配置、添加的脚本和CI/CD设置的摘要。包含启动开发服务器、运行测试、更新快照和打开交互式UI的后续步骤。
结果报告格式请参考REFERENCE.md。

Agentic Optimizations

Agent优化

ContextCommand
Quick compliance check
/configure:ux-testing --check-only
Auto-fix all issues
/configure:ux-testing --fix
Accessibility focus only
/configure:ux-testing --a11y
Visual regression focus only
/configure:ux-testing --visual
Run E2E tests compact
bunx playwright test --reporter=line
Run a11y tests only
bunx playwright test --project=a11y --reporter=dot
上下文命令
快速合规性检查
/configure:ux-testing --check-only
自动修复所有问题
/configure:ux-testing --fix
仅专注于无障碍测试
/configure:ux-testing --a11y
仅专注于视觉回归测试
/configure:ux-testing --visual
简洁运行E2E测试
bunx playwright test --reporter=line
仅运行无障碍测试
bunx playwright test --project=a11y --reporter=dot

Flags

标志

FlagDescription
--check-only
Report status without offering fixes
--fix
Apply all fixes automatically without prompting
--a11y
Focus on accessibility testing configuration
--visual
Focus on visual regression testing configuration
标志描述
--check-only
仅报告状态，不提供修复
--fix
自动应用所有修复，无需提示
--a11y
专注于无障碍测试配置
--visual
专注于视觉回归测试配置

Error Handling

错误处理

  • No package manager found: Cannot install dependencies, provide manual steps
  • Dev server not configured: Warn about manual baseURL configuration
  • Browsers not installed: Prompt to run 
    bunx playwright install
  • Existing config conflicts: Preserve user config, suggest merge
  • 未找到包管理器: 无法安装依赖，提供手动步骤
  • 未配置开发服务器: 警告需手动配置baseURL
  • 浏览器未安装: 提示运行
    bunx playwright install
  • 现有配置冲突: 保留用户配置，建议合并

See Also

另请参阅

  • /configure:tests
    - Unit and integration testing configuration
  • /configure:all
    - Run all compliance checks
  • Skills: 
    playwright-testing
    , 
    accessibility-implementation
  • Agents: 
    ux-implementation
    for implementing UX designs
  • Playwright documentation: https://playwright.dev
  • axe-core documentation: https://www.deque.com/axe
  • /configure:tests
    - 单元和集成测试配置
  • /configure:all
    - 运行所有合规性检查
  • 技能: 
    playwright-testing
    , 
    accessibility-implementation
  • Agent: 
    ux-implementation
    用于实现UX设计
  • Playwright文档: https://playwright.dev
  • axe-core文档: https://www.deque.com/axe