qa-web-test

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

QA Web Testing with Chrome DevTools MCP

基于Chrome DevTools MCP的QA网页测试

Automate visual QA testing of web pages using Chrome DevTools MCP tools. Connects to an already-running Chrome browser session, navigates to pages, emulates viewports, takes screenshots, and inspects CSS properties to catch responsive layout bugs.

使用Chrome DevTools MCP工具自动化完成网页的视觉QA测试，可连接到已运行的Chrome浏览器会话，导航到目标页面、模拟视口、截图、检查CSS属性，从而排查响应式布局缺陷。

Arguments

参数

```
$ARGUMENTS[0]
```
— Target URL to test (e.g.
```
http://localhost:3000/page
```
)
```
$ARGUMENTS[1]
```
— (optional) Output directory for the QA report and screenshots. Defaults to
```
./qa-reports
```

```
$ARGUMENTS[0]
```
— 待测试的目标URL（例如
```
http://localhost:3000/page
```
）
```
$ARGUMENTS[1]
```
— （可选）QA报告和截图的输出目录，默认为
```
./qa-reports
```

Output Location

输出位置

Creates or updates

$ARGUMENTS[1]/qa-report-{timestamp}.md

(e.g.

./qa-reports/qa-report-2026-02-27.md

)

Screenshots are saved to

$ARGUMENTS[1]/screenshots/

(e.g.

./qa-reports/screenshots/page-700px.png

)

Run
```
mkdir -p $ARGUMENTS[1]/screenshots
```
before writing to ensure directories exist.

创建或更新

$ARGUMENTS[1]/qa-report-{timestamp}.md

（例如

./qa-reports/qa-report-2026-02-27.md

）

截图保存到

$ARGUMENTS[1]/screenshots/

路径下（例如

./qa-reports/screenshots/page-700px.png

）

写入文件前请先执行
```
mkdir -p $ARGUMENTS[1]/screenshots
```
确保目录存在。

Prerequisites

前置条件

Chrome running with remote debugging enabled (or Chrome DevTools MCP server configured)
Target page accessible (dev server running, or staging/production URL)
If the page requires authentication, attempt to find credentials from environment variables. If none are found or authentication fails, skip the test

Chrome已开启远程调试运行（或已完成Chrome DevTools MCP服务端配置）
目标页面可正常访问（开发服务已启动，或预发布/生产环境URL可用）
如果页面需要身份验证，优先尝试从环境变量中获取凭证。如果未找到凭证或验证失败，则跳过本次测试

Workflow

工作流程

Follow these steps in order. Read each step file for detailed instructions.

Connect to browser — List pages and navigate to target URL
Determine breakpoints — Choose viewport widths to test
Emulate and capture — Set viewport, screenshot, inspect dimensions
CSS inspection — Inspect computed styles and container queries
Report results — Summarize findings with pass/fail table

请按顺序执行以下步骤，阅读每个步骤对应的文件可获取详细操作指引。

连接到浏览器 — 列出页面并导航到目标URL
确定断点 — 选择需要测试的视口宽度
模拟并采集 — 设置视口、截图、检查元素尺寸
CSS检查 — 检查计算样式和容器查询
输出报告 — 通过通过/失败表格汇总检测结果

Reference Files

参考文件

Reference	When to Read
references/breakpoints.md	Common breakpoint values, container query vs media query gotchas
references/css-inspection.md	JS snippets for overflow detection, grid/flex inspection, DOM traversal

参考文件	适用场景
references/breakpoints.md	常见断点值、容器查询与媒体查询的常见问题说明
references/css-inspection.md	用于溢出检测、grid/flex布局检查、DOM遍历的JS代码片段