playwright-form-validation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Playwright Form Validation Tester

Playwright表单验证测试工具

Automates comprehensive form validation testing by systematically submitting invalid data, capturing validation messages, and generating detailed test reports.

通过系统性提交无效数据、捕获验证提示信息并生成详细测试报告，实现全面的表单验证测试自动化。

Quick Start

快速开始

Test a login form's validation:

bash

undefined

测试登录表单的验证逻辑：

bash

undefined

User asks: "Test the validation on the login form at example.com/login"

Skill will:

1. Navigate to form

2. Test empty email field

3. Test invalid email format

4. Test empty password field

5. Test valid submission

6. Generate report with screenshots


**Output:** Validation report showing all error messages, missing validations, and screenshots of each error state.


**输出结果：** 包含所有错误提示信息、缺失的验证项以及每个错误状态截图的验证报告。

When to Use This Skill

适用场景

Explicit Triggers

显式触发条件

"Test form validation on [URL]"
"Check validation errors for this form"
"Test invalid inputs on the signup form"
"Verify error messages are displayed"
"Run validation tests on [form]"

"测试[URL]页面的表单验证"
"检查该表单的验证错误"
"测试注册表单的无效输入"
"验证错误提示信息是否正常显示"
"对[表单]执行验证测试"

Implicit Triggers

隐式触发条件

QA testing workflows requiring form validation checks
Accessibility audits checking error message clarity
Security testing for input sanitization
Regression testing after form changes
Documentation of validation behavior

需要表单验证检查的QA测试工作流
检查错误提示清晰度的可访问性审计
针对输入内容净化的安全测试
表单修改后的回归测试
验证行为的文档记录

Debugging Triggers

调试触发场景

"Why isn't this form showing validation errors?"
"Are all required fields validated?"
"What validation messages does this form show?"
"Check if email validation is working"

"为什么这个表单不显示验证错误？"
"所有必填字段都有验证吗？"
"这个表单会显示哪些验证提示信息？"
"检查邮箱验证是否正常工作"

What This Skill Does

功能说明

This skill performs systematic form validation testing:

Field Discovery - Identifies all form fields and their types
Empty Value Testing - Submits form with each field empty
Invalid Format Testing - Tests common invalid patterns (email, phone, etc.)
Boundary Testing - Tests min/max lengths and values
Valid Submission - Verifies successful submission with valid data
Error Capture - Screenshots and catalogs all validation messages
Report Generation - Creates comprehensive validation report

本工具执行系统性的表单验证测试：

字段识别 - 识别所有表单字段及其类型
空值测试 - 提交每个字段为空的表单
格式错误测试 - 测试常见无效格式（邮箱、电话等）
边界值测试 - 测试最小/最大长度和数值限制
合法提交测试 - 验证使用有效数据能否成功提交
错误捕获 - 截图并记录所有验证提示信息
报告生成 - 创建全面的验证测试报告

Instructions

操作指南

Overview

概述

The validation testing workflow has 7 main steps:

Navigate to form and capture initial state
Identify all form fields and their constraints
Test empty field validation for required fields
Test invalid format validation (email, phone, etc.)
Test boundary values (min/max lengths and values)
Test valid submission to verify success path
Generate comprehensive validation report

验证测试工作流包含7个主要步骤：

导航至表单页面并捕获初始状态
识别所有表单字段及其约束条件
测试必填字段的空值验证逻辑
测试格式错误验证逻辑（邮箱、电话等）
测试边界值（最小/最大长度和数值）
测试合法提交，验证成功路径
生成全面的验证测试报告

Quick Workflow Example

快速工作流示例

typescript

// 1. Navigate and snapshot
await browser_navigate({ url: "https://example.com/login" });
await browser_snapshot({ filename: "initial.md" });

// 2. Test empty email
await browser_fill_form({
  fields: [{ name: "Email", type: "textbox", ref: "ref_1", value: "" }]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "empty-email.png" });

// 3. Test invalid email format
await browser_navigate({ url: "https://example.com/login" }); // Reset
await browser_fill_form({
  fields: [{ name: "Email", type: "textbox", ref: "ref_1", value: "invalid" }]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "invalid-email.png" });

// 4. Test valid submission
await browser_navigate({ url: "https://example.com/login" });
await browser_fill_form({
  fields: [
    { name: "Email", type: "textbox", ref: "ref_1", value: "test@example.com" },
    { name: "Password", type: "textbox", ref: "ref_2", value: "ValidPass123!" }
  ]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "success.png" });

// 5. Generate report using template

typescript

// 1. Navigate and snapshot
await browser_navigate({ url: "https://example.com/login" });
await browser_snapshot({ filename: "initial.md" });

// 2. Test empty email
await browser_fill_form({
  fields: [{ name: "Email", type: "textbox", ref: "ref_1", value: "" }]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "empty-email.png" });

// 3. Test invalid email format
await browser_navigate({ url: "https://example.com/login" }); // Reset
await browser_fill_form({
  fields: [{ name: "Email", type: "textbox", ref: "ref_1", value: "invalid" }]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "invalid-email.png" });

// 4. Test valid submission
await browser_navigate({ url: "https://example.com/login" });
await browser_fill_form({
  fields: [
    { name: "Email", type: "textbox", ref: "ref_1", value: "test@example.com" },
    { name: "Password", type: "textbox", ref: "ref_2", value: "ValidPass123!" }
  ]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "success.png" });

// 5. Generate report using template

Key Testing Patterns

核心测试模式

Empty Fields - Test each required field with empty value Invalid Formats - Test email (

invalid

), phone (

abc

), URL (

not-url

) Boundaries - Test min/max length (

"short"

"a".repeat(101)

) Cross-Field - Test password mismatch, invalid date ranges Valid Data - Verify success path works

空字段测试 - 测试每个必填字段的空值情况 格式错误测试 - 测试邮箱（

invalid

）、电话（

abc

）、URL（

not-url

）等无效格式 边界值测试 - 测试最小/最大长度（

"short"

"a".repeat(101)

） 跨字段测试 - 测试密码不匹配、无效日期范围等场景 合法数据测试 - 验证成功路径是否正常工作

Detailed Workflow

详细工作流

For complete step-by-step instructions with all code examples, see:

```
references/detailed-workflow.md
```
- Full workflow with code samples
```
references/validation-patterns.md
```
- Field type testing patterns
```
examples/examples.md
```
- Complete form testing examples

如需包含所有代码示例的完整分步说明，请查看：

```
references/detailed-workflow.md
```
- 包含代码示例的完整工作流
```
references/validation-patterns.md
```
- 不同字段类型的测试模式
```
examples/examples.md
```
- 完整的表单测试示例

Supporting Files

配套文件

references/validation-patterns.md - Common validation patterns and test cases for different field types
examples/examples.md - Complete validation test examples for common forms (login, signup, checkout)
templates/validation-report-template.md - Markdown template for validation reports
scripts/parse_validation_errors.py - Helper to extract validation messages from snapshots

references/validation-patterns.md - 不同字段类型的常见验证模式和测试用例
examples/examples.md - 常见表单（登录、注册、结账）的完整验证测试示例
templates/validation-report-template.md - 验证测试报告的Markdown模板
scripts/parse_validation_errors.py - 从快照中提取验证提示信息的辅助脚本

Expected Outcomes

预期结果

Successful Validation Test

验证测试成功完成

markdown

✅ Form Validation Test Complete

Form: Login Form (https://example.com/login)
Fields tested: 2 (email, password)
Validations found: 4
Missing validations: 0

Results by field:

Email Field:
✅ Empty value - "Email is required"
✅ Invalid format - "Please enter a valid email address"

Password Field:
✅ Empty value - "Password is required"
✅ Too short - "Password must be at least 8 characters"

Valid submission: ✅ Success (redirected to dashboard)

Screenshots saved: 5
Report: .claude/artifacts/2025-12-20/validation-report-login-form.md

markdown

✅ 表单验证测试完成

表单：登录表单（https://example.com/login）
测试字段数：2个（邮箱、密码）
已验证的规则：4条
缺失的验证规则：0条

各字段测试结果：

邮箱字段：
✅ 空值 - "邮箱为必填项"
✅ 格式错误 - "请输入有效的邮箱地址"

密码字段：
✅ 空值 - "密码为必填项"
✅ 长度过短 - "密码长度至少为8个字符"

合法提交：✅ 成功（已跳转至仪表盘）

已保存截图：5张
报告路径：.claude/artifacts/2025-12-20/validation-report-login-form.md

Validation Issues Found

发现验证问题

markdown

⚠️ Form Validation Issues Detected

Form: Signup Form (https://example.com/signup)
Fields tested: 5
Validations found: 3
Missing validations: 2

Issues:

❌ Phone field - No validation for invalid format
   Tested: "abc123", "12-34" → No error message shown

❌ Age field - No validation for negative values
   Tested: "-5" → Submission accepted

Recommendations:
1. Add phone number format validation
2. Add min value constraint to age field
3. Consider adding password strength indicator

Report: .claude/artifacts/2025-12-20/validation-report-signup-form.md

markdown

⚠️ 检测到表单验证问题

表单：注册表单（https://example.com/signup）
测试字段数：5个
已验证的规则：3条
缺失的验证规则：2条

问题列表：

❌ 电话字段 - 未对无效格式进行验证
   测试用例："abc123"、"12-34" → 未显示错误提示

❌ 年龄字段 - 未对负值进行验证
   测试用例："-5" → 提交成功

建议：
1. 添加电话号码格式验证
2. 为年龄字段添加最小值约束
3. 考虑添加密码强度指示器

报告路径：.claude/artifacts/2025-12-20/validation-report-signup-form.md

Integration Points

集成场景

With Quality Gates

与质量门禁集成

Run validation tests as part of QA workflow
Include in pre-release testing checklist
Automate regression testing for form changes

将验证测试作为QA工作流的一部分
纳入预发布测试清单
自动化表单修改后的回归测试

With Accessibility Testing

与可访问性测试集成

Verify error messages are clear and descriptive
Check that errors are associated with fields (aria-describedby)
Validate screen reader compatibility

验证错误提示信息是否清晰易懂
检查错误信息是否与字段关联（aria-describedby属性）
验证屏幕阅读器兼容性

With Security Testing

与安全测试集成

Verify input sanitization on client side
Check for XSS vulnerabilities in error messages
Test SQL injection patterns in text fields

验证客户端输入内容净化逻辑
检查错误提示信息中的XSS漏洞
测试文本字段中的SQL注入模式

With Documentation

与文档集成

Auto-generate validation documentation from reports
Create field reference guides with validation rules
Document error message copy for style guides

从报告中自动生成验证文档
创建包含验证规则的字段参考指南
为风格指南记录错误提示文案

Expected Benefits

预期收益

Metric	Before	After	Improvement
Time to test form	30 min (manual)	2 min (automated)	93% reduction
Test coverage	40% (spot checks)	100% (systematic)	2.5x increase
Bugs found	2-3 (missed edge cases)	8-10 (comprehensive)	3x increase
Documentation	None → Screenshots + report	Manual notes → Auto-generated	Consistent
Regression testing	Rarely done	Automated	Reliable

指标	实施前	实施后	提升效果
表单测试耗时	30分钟（手动）	2分钟（自动化）	减少93%
测试覆盖率	40%（抽查）	100%（系统性测试）	提升2.5倍
发现的Bug数量	2-3个（遗漏边缘场景）	8-10个（全面测试）	提升3倍
文档记录	无 → 截图+报告	手动笔记 → 自动生成	一致性提升
回归测试	很少执行	自动化执行	可靠性提升

Success Metrics

成功指标

A validation test is successful when:

✅ All form fields identified and cataloged ✅ Empty value validation tested for required fields ✅ Invalid format validation tested for typed fields (email, phone, etc.) ✅ Boundary values tested for constrained fields (min/max) ✅ Valid submission verified with success confirmation ✅ All validation messages captured and documented ✅ Screenshots saved for each error state ✅ Validation report generated with findings ✅ Missing validations identified and reported ✅ Recommendations provided for improvements

验证测试成功的判定标准：

✅ 所有表单字段已识别并记录 ✅ 已测试必填字段的空值验证逻辑 ✅ 已测试类型字段（邮箱、电话等）的格式错误验证逻辑 ✅ 已测试约束字段（最小/最大限制）的边界值 ✅ 已验证合法提交的成功路径 ✅ 所有验证提示信息已捕获并记录 ✅ 已保存每个错误状态的截图 ✅ 已生成包含测试结果的验证报告 ✅ 已识别并报告缺失的验证规则 ✅ 已提供可执行的改进建议

Requirements

环境要求

Browser Automation:

Playwright MCP server configured
Browser installed via
```
mcp__playwright__browser_install
```
Active browser session

Tools:

```
mcp__playwright__browser_navigate
```
- Navigate to form URL
```
mcp__playwright__browser_snapshot
```
- Capture form structure and errors
```
mcp__playwright__browser_fill_form
```
- Fill field values
```
mcp__playwright__browser_click
```
- Submit form
```
mcp__playwright__browser_wait_for
```
- Wait for validation to appear

mcp__playwright__browser_take_screenshot

- Capture error states

```
Write
```
- Generate validation report
```
Read
```
- Parse snapshots for validation messages

Knowledge:

Common validation patterns (email, phone, URL, etc.)
HTML form field types and attributes
Validation message extraction from snapshots
Markdown report formatting

Environment:

```
.claude/artifacts/{YYYY-MM-DD}/
```
directory for reports
Write permissions for screenshots

浏览器自动化：

已配置Playwright MCP服务器
已通过
```
mcp__playwright__browser_install
```
安装浏览器
存在活跃的浏览器会话

工具：

```
mcp__playwright__browser_navigate
```
- 导航至表单URL
```
mcp__playwright__browser_snapshot
```
- 捕获表单结构和错误信息
```
mcp__playwright__browser_fill_form
```
- 填充字段值
```
mcp__playwright__browser_click
```
- 提交表单
```
mcp__playwright__browser_wait_for
```
- 等待验证信息显示

mcp__playwright__browser_take_screenshot

- 捕获错误状态截图

```
Write
```
- 生成验证测试报告
```
Read
```
- 解析快照中的验证提示信息

知识储备：

常见验证模式（邮箱、电话、URL等）
HTML表单字段类型和属性
从快照中提取验证提示信息的方法
Markdown报告格式规范

环境：

报告存储目录：
```
.claude/artifacts/{YYYY-MM-DD}/
```
具备截图写入权限

Red Flags to Avoid

需避免的常见错误

Notes

补充说明

Best Practices:

Test systematically - One field at a time, one validation at a time
Clear between tests - Reset form to clean state before each test
Wait appropriately - Give validation time to appear (1-2 seconds)
Capture everything - Screenshot + snapshot for each error state
Document clearly - Use descriptive filenames and report sections

Validation Types to Test:

Required field - Empty value submission
Format validation - Email, phone, URL, date patterns
Length constraints - Min/max character limits
Value constraints - Min/max numeric values
Pattern matching - Regex validation (password strength, username format)
Cross-field validation - Password confirmation, date ranges
Custom business rules - Age restrictions, allowed domains

Common Validation Messages:

"This field is required"
"Please enter a valid email address"
"Password must be at least 8 characters"
"Please enter a valid phone number"
"Value must be between X and Y"

Report Organization:

Save all artifacts to dated directory:
```
.claude/artifacts/{YYYY-MM-DD}/
```
Use consistent naming:
```
validation-{testname}-{fieldname}.png
```
Include all screenshots in report with relative paths
Provide actionable recommendations, not just findings

Progressive Disclosure:

For simple forms (2-3 fields), include full results inline
For complex forms (10+ fields), reference detailed results in report file
Always provide summary statistics up front
Link to screenshots rather than embedding them in conversation

最佳实践：

系统性测试 - 一次测试一个字段、一个验证规则
测试间重置 - 每次测试前将表单重置为干净状态
合理等待 - 给验证信息足够的加载时间（1-2秒）
全面捕获 - 为每个错误状态保存截图和快照
清晰记录 - 使用描述性文件名和报告章节

需测试的验证类型：

必填字段 - 空值提交测试
格式验证 - 邮箱、电话、URL、日期等格式测试
长度约束 - 最小/最大字符数限制测试
数值约束 - 最小/最大数值限制测试
模式匹配 - 正则验证（密码强度、用户名格式等）
跨字段验证 - 密码确认、日期范围等测试
自定义业务规则 - 年龄限制、允许的域名等测试

常见验证提示信息：

"此字段为必填项"
"请输入有效的邮箱地址"
"密码长度至少为8个字符"
"请输入有效的电话号码"
"数值必须在X和Y之间"

报告组织规范：

将所有产物保存至日期目录：
```
.claude/artifacts/{YYYY-MM-DD}/
```
使用统一命名规则：
```
validation-{testname}-{fieldname}.png
```
在报告中包含所有截图的相对路径
提供可执行的改进建议，而非仅记录测试结果

渐进式披露：

对于简单表单（2-3个字段），直接在对话中展示完整结果
对于复杂表单（10+个字段），在报告文件中引用详细结果
始终先提供汇总统计信息
链接至截图而非在对话中嵌入

playwright-form-validation

Original

Translation

Playwright Form Validation Tester

Playwright表单验证测试工具

Quick Start

快速开始

User asks: "Test the validation on the login form at example.com/login"

User asks: "Test the validation on the login form at example.com/login"

Skill will:

Skill will:

1. Navigate to form

1. Navigate to form

2. Test empty email field

2. Test empty email field

3. Test invalid email format

3. Test invalid email format

4. Test empty password field

4. Test empty password field

5. Test valid submission

5. Test valid submission

6. Generate report with screenshots

6. Generate report with screenshots

Table of Contents

目录

When to Use This Skill

适用场景

Explicit Triggers

显式触发条件

Implicit Triggers

隐式触发条件

Debugging Triggers

调试触发场景

What This Skill Does

功能说明

Instructions

操作指南

Overview

概述

Quick Workflow Example

快速工作流示例

Key Testing Patterns

核心测试模式

Detailed Workflow

详细工作流

Supporting Files

配套文件

Expected Outcomes

预期结果

Successful Validation Test

验证测试成功完成

Validation Issues Found

发现验证问题

Integration Points

集成场景

With Quality Gates

与质量门禁集成

With Accessibility Testing

与可访问性测试集成

With Security Testing

与安全测试集成

With Documentation

与文档集成

Expected Benefits

预期收益

Success Metrics

成功指标

Requirements

环境要求

Red Flags to Avoid

需避免的常见错误

Notes

补充说明