helpmetest-visual-check

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Visual Check

可视化校验

Quick visual verification using screenshots. Tests how things look without creating formal test files.

通过截图实现快速可视化校验，无需创建正式测试文件即可测试界面展示效果。

When to Use This Skill

什么时候使用该技能

Use when user asks casual verification questions like:

"Check if the login button is blue"
"Does the header look right on mobile?"
"See if the pricing table is centered"
"Is the footer visible?"
"Verify the hero image loaded"
"Check that modal is showing correctly"

NOT for:

Creating formal tests (use
```
/helpmetest-test-generator
```
)
Comprehensive site testing (use
```
/helpmetest
```
)
Debugging failing tests (use
```
/helpmetest-debugger
```
)

当用户提出如下非正式校验问题时使用：

「检查登录按钮是否为蓝色」
「移动端头部显示是否正常？」
「查看定价表是否居中」
「页脚是否可见？」
「验证首屏图是否加载完成」
「检查模态框是否正常显示」

不适用场景：

创建正式测试用例（请使用
```
/helpmetest-test-generator
```
）
全面的站点测试（请使用
```
/helpmetest
```
）
调试失败的测试用例（请使用
```
/helpmetest-debugger
```
）

Process

执行流程

Step 1: Understand What to Check

步骤1：明确检查内容

Extract from user's request:

URL - Where to look (if not provided, ask)
Element/Feature - What to verify ("login button", "header", "pricing table")
Expected state - What should it look like? ("blue", "centered", "visible")

从用户请求中提取以下信息：

URL - 要检查的页面地址（如果未提供，向用户询问）
元素/功能 - 要校验的对象（「登录按钮」、「头部导航」、「定价表」）
预期状态 - 应该呈现的效果（「蓝色」、「居中」、「可见」）

Step 2: Navigate and Capture

步骤2：页面导航与截图

Use

helpmetest_run_interactive_command

with navigation + screenshot:

robot

Go To  <url>

Tool returns:

Screenshot (automatically included)
Page state
Any console errors

使用

helpmetest_run_interactive_command

执行页面导航和截图操作：

robot

Go To  <url>

工具返回内容：

截图（自动返回）
页面状态
所有控制台报错

Step 3: Describe What You See

步骤3：描述所见内容

Based on screenshot, describe:

Is the element there? - Present or missing
How does it look? - Color, size, position, styling
Matches expectation? - Yes/No with specifics

Example response:

✓ Login button found in top-right navigation
✓ Color: Blue (#0066FF) - matches expected blue
✓ Size: Standard button size (~120px wide)
✓ Position: Aligned right, 20px from edge

基于截图，描述以下信息：

元素是否存在？ - 存在/缺失
展示效果如何？ - 颜色、尺寸、位置、样式
是否符合预期？ - 是/否，附带具体说明

响应示例：

✓ 在右上角导航栏中找到登录按钮
✓ 颜色：蓝色 (#0066FF) - 符合预期的蓝色
✓ 尺寸：标准按钮尺寸（约120px宽）
✓ 位置：右对齐，距离边缘20px

Step 4: Test Interactions (If Needed)

步骤4：交互测试（如有需要）

If user wants to verify behavior (hover, click, etc):

robot

undefined

如果用户需要校验交互行为（悬停、点击等）：

robot

undefined

Hover to check hover state

Hover button:has-text("Login")

Click to check if it works

Click button:has-text("Login")


Each command returns a new screenshot showing the result.

Click button:has-text("Login")


每条命令执行后都会返回一张新的结果截图。

Step 5: Responsive Checks (If Needed)

步骤5：响应式检查（如有需要）

If user mentions "mobile" or "tablet":

robot

undefined

如果用户提到「移动端」或「平板」：

robot

undefined

Set mobile viewport

Set Viewport Size 375 667 # iPhone SE

Capture mobile view

Go To <url>


Common viewports:
- Mobile: 375x667 (iPhone SE), 390x844 (iPhone 12)
- Tablet: 768x1024 (iPad)
- Desktop: 1920x1080

Go To <url>


常用视口尺寸：
- 移动端：375x667（iPhone SE）、390x844（iPhone 12）
- 平板：768x1024（iPad）
- 桌面端：1920x1080

Guidelines

指导原则

Be Specific:

❌ "Button looks fine"
✅ "Button is blue (#2563EB), 140px wide, centered in navbar"

Compare to Expectation:

User said: "check if button is blue"
You say: "Button is blue (#0066FF) ✓" or "Button is red (#DC2626) ✗ - Expected blue"

Mention Issues:

Overlapping elements
Cut-off text
Misaligned items
Wrong colors
Missing elements
Console errors

Keep It Casual:

This is quick verification, not formal QA
No need to create artifacts or tests
Just answer: "Does it look right? Yes/No, here's why"

描述要具体：

❌ 「按钮看起来没问题」
✅ 「按钮为蓝色(#2563EB)，宽140px，在导航栏中居中」

对照预期说明：

用户要求：「检查按钮是否为蓝色」
你的回复：「按钮为蓝色(#0066FF) ✓」或者「按钮为红色(#DC2626) ✗ - 预期为蓝色」

主动提及问题：

元素重叠
文本截断
元素错位
颜色错误
元素缺失
控制台报错

保持简洁：

这是快速校验，不是正式QA
不需要生成产物或测试用例
只需回答：「展示是否正常？是/否，原因如下」

Interactive Commands Available

可用的交互命令

robot

undefined

robot

undefined

Navigation

Go To <url>

Element inspection

Get Element <selector> # Check if exists Get Style <selector> <property> # Get CSS value

Viewport changes

Set Viewport Size <width> <height>

Interactions (to check behavior)

Click <selector> Hover <selector> Fill Text <selector> <text> Press Keys <selector> <key>

Scrolling

Scroll To Element <selector> Scroll By <x> <y>

Waiting (if page loads slowly)

Wait For Elements State <selector> visible timeout=5000


Every command automatically returns a screenshot.

Wait For Elements State <selector> visible timeout=5000


每条命令执行后都会自动返回截图。

Example Workflows

示例工作流

Example 1: Quick Button Check

示例1：快速按钮检查

User: "Check if the Sign Up button is green"

1. Go To  https://example.com
2. Look at screenshot
3. Find "Sign Up" button in nav
4. Respond: "Sign Up button is green (#10B981) ✓"

用户：「检查注册按钮是否为绿色」

1. Go To  https://example.com
2. 查看截图
3. 在导航栏中找到「注册」按钮
4. 回复：「注册按钮为绿色(#10B981) ✓」

Example 2: Layout Verification

示例2：布局校验

User: "Is the pricing table centered?"

1. Go To  https://example.com/pricing
2. Look at screenshot
3. Check table position
4. Respond: "Pricing table is centered ✓ - Equal margins on both sides (~200px)"

用户：「定价表是否居中？」

1. Go To  https://example.com/pricing
2. 查看截图
3. 检查表格位置
4. 回复：「定价表已居中 ✓ - 两侧边距相等（约200px）」

Example 3: Responsive Check

示例3：响应式检查

User: "Does the header look good on mobile?"

1. Set Viewport Size  375  667
2. Go To  https://example.com
3. Look at screenshot
4. Respond: "Header stacks vertically ✓ - Logo on top, menu items below. Hamburger icon visible."

用户：「移动端头部显示正常吗？」

1. Set Viewport Size  375  667
2. Go To  https://example.com
3. 查看截图
4. 回复：「头部已垂直堆叠 ✓ - Logo在上，菜单项在下，汉堡图标可见」

Example 4: Hover State

示例4：悬停状态检查

User: "Check if the button changes color on hover"

1. Go To  https://example.com
2. Look at initial screenshot (button default state)
3. Hover  button:has-text("Submit")
4. Look at new screenshot (button hover state)
5. Respond: "Button changes from blue (#0066FF) to dark blue (#0047B3) on hover ✓"

用户：「检查按钮悬停时是否会变色」

1. Go To  https://example.com
2. 查看初始截图（按钮默认状态）
3. Hover  button:has-text("Submit")
4. 查看新截图（按钮悬停状态）
5. 回复：「按钮悬停时从蓝色(#0066FF)变为深蓝色(#0047B3) ✓」

Example 5: Modal Appearance

示例5：模态框展示检查

User: "See if the modal shows up when clicking Contact"

1. Go To  https://example.com
2. Click  button:has-text("Contact")
3. Look at screenshot
4. Respond: "Modal appears ✓ - Dark overlay with white form centered on screen"

用户：「点击联系按钮时模态框是否会弹出？」

1. Go To  https://example.com
2. Click  button:has-text("Contact")
3. 查看截图
4. 回复：「模态框已弹出 ✓ - 深色遮罩层上居中展示白色表单」

Output Format

输出格式

Always structure your response:

[Element/Feature Name]

Status: ✓ Matches expectation / ✗ Issue found / ⚠️ Partial match

Details:
- [Specific observation 1]
- [Specific observation 2]
- [Specific observation 3]

[If issue found:]
Issue: [What's wrong]
Expected: [What it should be]
Actual: [What it is]

请始终按照以下结构组织回复：

[元素/功能名称]

状态：✓ 符合预期 / ✗ 存在问题 / ⚠️ 部分匹配

详情：
- [具体观察结果1]
- [具体观察结果2]
- [具体观察结果3]

[如果发现问题：]
问题：[存在的问题]
预期：[应该呈现的效果]
实际：[实际呈现的效果]

When to Stop

终止场景

This skill is for QUICK checks. If user asks:

"Test this thoroughly" → Use
```
/helpmetest
```
"Create a test for this" → Use
```
/helpmetest-test-generator
```
"Why is this test failing?" → Use
```
/helpmetest-debugger
```

Keep it simple: Look, describe, confirm.

该技能仅用于快速检查。如果用户提出以下需求：

「全面测试这个功能」 → 使用
```
/helpmetest
```
「为这个场景创建测试用例」 → 使用
```
/helpmetest-test-generator
```
「这个测试为什么失败了？」 → 使用
```
/helpmetest-debugger
```

保持简洁：查看、描述、确认即可。