test

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Test

测试

Testing Checklist

测试清单

Feature Testing:
- [ ] Happy path works (main user flow)
- [ ] Edge cases handled (empty, long, invalid data)
- [ ] Error messages clear and helpful
- [ ] Works on mobile (iOS and Android)
- [ ] Works in Safari, Chrome, Firefox
- [ ] Loading states show during waits
- [ ] Forms validate input
- [ ] Can't break it with weird input
- [ ] Back button works correctly
- [ ] Page refresh doesn't lose data

See TEST-SCENARIOS.md for detailed scenarios.

Feature Testing:
- [ ] 主用户流程（Happy path）可正常运行
- [ ] 边缘场景已处理（空值、超长、无效数据）
- [ ] 错误提示清晰且有帮助
- [ ] 在移动端（iOS和Android）可正常运行
- [ ] 在Safari、Chrome、Firefox中可正常运行
- [ ] 等待过程中显示加载状态
- [ ] 表单可验证输入内容
- [ ] 输入异常内容不会导致系统崩溃
- [ ] 返回按钮功能正常
- [ ] 页面刷新不会丢失数据

详见TEST-SCENARIOS.md获取详细测试场景。

When to Test

测试时机

Test when:

Feature just built by AI
Before deploying to production
After fixing a bug (verify fix works)
Users report issues (reproduce first)

Don't test:

While AI is still building
Before feature is complete
Every tiny change (batch test features)

Rule: Build → Test → Fix → Test again → Deploy

应进行测试的场景：

AI刚开发完成功能后
部署到生产环境前
修复bug后（验证修复效果）
用户反馈问题时（先复现问题）

无需测试的场景：

AI仍在开发功能时
功能未完成时
每一处微小变更（批量测试功能）

原则： 开发 → 测试 → 修复 → 再次测试 → 部署

Manual Testing Workflow

手动测试流程

1. Test happy path
   - Does the main flow work?
   - Can user complete the task?

2. Test edge cases
   - What if field is empty?
   - What if text is very long?
   - What if user clicks twice?

3. Test on mobile
   - Open on real phone
   - Test main actions
   - Check layout doesn't break

4. Test in different browsers
   - Chrome (most users)
   - Safari (iOS users)
   - Firefox (some users)

5. Document issues
   - Screenshot the problem
   - Write exact steps to reproduce
   - Give to AI to fix

1. 测试主用户流程
   - 主流程是否可正常运行？
   - 用户能否完成目标任务？

2. 测试边缘场景
   - 字段为空时会发生什么？
   - 输入超长文本时会发生什么？
   - 用户连续点击两次按钮会发生什么？

3. 移动端测试
   - 在真实手机上打开页面
   - 测试主要操作
   - 检查布局是否错乱

4. 跨浏览器测试
   - Chrome（用户占比最高）
   - Safari（iOS用户）
   - Firefox（部分用户）

5. 记录问题
   - 截取问题截图
   - 写下复现问题的精确步骤
   - 提交给AI进行修复

Testing Edge Cases

边缘场景测试

Always test these:

Empty data:

What shows when no items in list?
What happens with empty form field?
Is placeholder/empty state clear?

Long data:

Very long name (200 characters)
Very long text (10,000 characters)
Does layout break?

Invalid data:

Invalid email format
Negative numbers where not allowed
Special characters in text field
SQL characters ('; DROP TABLE)

Boundary cases:

Exactly at limit (100 char limit, enter 100)
Just over limit (enter 101)
Zero/empty values

Tell AI:

Test these edge cases:
- Empty username: show "Required"
- Username too long (>50 chars): show "Max 50 characters"
- Username with spaces: show "No spaces allowed"
- Special characters: show "Letters and numbers only"

See EDGE-CASES.md for comprehensive list.

务必测试以下场景：

空数据：

列表无内容时显示什么？
表单字段为空时会发生什么？
占位符/空状态是否清晰？

超长数据：

超长名称（200字符）
超长文本（10000字符）
布局是否会错乱？

无效数据：

无效邮箱格式
不允许输入负数的地方输入负数
文本字段输入特殊字符
SQL注入字符（'; DROP TABLE）

边界场景：

刚好达到限制（如100字符限制，输入100字符）
超过限制（输入101字符）
零值/空值

告知AI：

测试这些边缘场景：
- 空用户名：显示“必填项”
- 用户名过长（>50字符）：显示“最多50个字符”
- 用户名包含空格：显示“不允许包含空格”
- 特殊字符：显示“仅允许字母和数字”

详见EDGE-CASES.md获取完整列表。

Testing on Mobile

移动端测试

Minimum mobile tests:

Mobile Testing:
- [ ] Page loads and looks correct
- [ ] Can tap all buttons (44px minimum)
- [ ] Forms work (keyboard appears)
- [ ] No horizontal scroll
- [ ] Images load and fit screen
- [ ] Navigation works
- [ ] Can complete main user flow

Test on:

iPhone (Safari) - Most common iOS
Android phone (Chrome) - Most common Android

Don't need to test:

Every phone model
Tablets (unless primary use case)
Landscape mode (unless important)

最低要求的移动端测试：

Mobile Testing:
- [ ] 页面加载正常且显示正确
- [ ] 所有按钮可正常点击（最小44px）
- [ ] 表单可正常使用（键盘正常弹出）
- [ ] 无横向滚动条
- [ ] 图片加载正常且适配屏幕
- [ ] 导航功能正常
- [ ] 可完成主用户流程

测试设备：

iPhone（Safari）- 最常见的iOS设备
Android手机（Chrome）- 最常见的Android设备

无需测试的场景：

所有手机型号
平板（除非是主要使用场景）
横屏模式（除非非常重要）

Cross-Browser Testing

跨浏览器测试

Priority order:

Chrome (65% of users) - Test thoroughly
Safari (20% of users) - Test main flows
Firefox (5% of users) - Quick check
Edge (5% of users) - Usually works if Chrome works

Common browser issues:

Date pickers look different
Flexbox behaves differently
Scrolling momentum feels different
Animations may not work on old Safari

Quick test:

Open in each browser:
1. Load homepage
2. Sign up / Log in
3. Complete 1-2 main actions
4. Check nothing is broken

优先级排序：

Chrome（65%用户）- 全面测试
Safari（20%用户）- 测试主流程
Firefox（5%用户）- 快速检查
Edge（5%用户）- 若Chrome正常，通常Edge也可正常运行

常见浏览器问题：

日期选择器显示样式不同
Flexbox布局表现不同
滚动惯性体验不同
旧版Safari可能不支持部分动画

快速测试步骤：

在每个浏览器中执行：
1. 加载首页
2. 注册/登录
3. 完成1-2个主要操作
4. 检查是否有功能异常

Testing Forms

表单测试

Form validation testing:

Form Testing Checklist:
- [ ] Required fields show error if empty
- [ ] Email validation works (format check)
- [ ] Password requirements enforced
- [ ] Can't submit invalid form
- [ ] Error messages clear and specific
- [ ] Success message shows after submit
- [ ] Form disables during submit (no double-submit)
- [ ] Errors clear when user fixes them

Tell AI:

Test form validation:
- Required field left empty: "This field is required"
- Invalid email: "Enter a valid email address"
- Weak password: "Password must be 8+ characters with 1 number"
- All valid: Allow submit
- Show errors inline, not alert()

表单验证测试：

Form Testing Checklist:
- [ ] 必填字段为空时显示错误提示
- [ ] 邮箱格式验证正常
- [ ] 密码规则已生效
- [ ] 无效表单无法提交
- [ ] 错误提示清晰且具体
- [ ] 提交成功后显示成功提示
- [ ] 提交过程中表单禁用（防止重复提交）
- [ ] 用户修正内容后错误提示消失

告知AI：

测试表单验证：
- 必填字段为空：“此字段为必填项”
- 无效邮箱：“请输入有效的邮箱地址”
- 弱密码：“密码需至少8位且包含1个数字”
- 所有内容有效：允许提交
- 错误提示内嵌显示，不使用alert()

Testing Authentication

身份验证测试

Auth flow testing:

Auth Testing:
- [ ] Can sign up with valid info
- [ ] Can't sign up with existing email
- [ ] Can log in with correct password
- [ ] Can't log in with wrong password
- [ ] Can reset password via email
- [ ] Session expires after timeout
- [ ] Logout works (can't access protected pages)
- [ ] Can't access protected routes without login
- [ ] Redirect to login when session expires

认证流程测试：

Auth Testing:
- [ ] 使用有效信息可注册
- [ ] 已存在的邮箱无法重复注册
- [ ] 使用正确密码可登录
- [ ] 使用错误密码无法登录
- [ ] 可通过邮箱重置密码
- [ ] 会话超时后自动过期
- [ ] 登出功能正常（无法访问受保护页面）
- [ ] 未登录时无法访问受保护路由
- [ ] 会话过期后重定向到登录页

Testing Integrations

集成测试

Third-party services:

Payment (Stripe):

- [ ] Test card (4242 4242 4242 4242) processes
- [ ] Declined card shows error
- [ ] Receipt email sent
- [ ] Subscription status updates
- [ ] Can cancel subscription

Email (SendGrid):

- [ ] Welcome email sends on signup
- [ ] Password reset email arrives
- [ ] Emails have correct content
- [ ] Links in email work
- [ ] Unsubscribe link works

Tell AI:

Add test mode checking:
Log when using test API keys.
Show banner: "TEST MODE - No real charges"
Use Stripe test cards only in development.

第三方服务测试：

支付（Stripe）：

- [ ] 测试卡号（4242 4242 4242 4242）可正常支付
- [ ] 被拒绝的卡号显示错误提示
- [ ] 已发送收款邮件
- [ ] 订阅状态可更新
- [ ] 可取消订阅

邮件（SendGrid）：

- [ ] 注册时发送欢迎邮件
- [ ] 密码重置邮件可正常接收
- [ ] 邮件内容正确
- [ ] 邮件中的链接可正常访问
- [ ] 退订链接功能正常

告知AI：

添加测试模式检查：
使用测试API密钥时记录日志。
显示横幅：“测试模式 - 无真实扣费”
仅在开发环境使用Stripe测试卡号。

Finding Bugs Yourself

主动发现Bug

How to break your app:

1. Click fast and repeatedly

Double-click submit button
Click back button quickly
Refresh during loading

2. Enter unexpected data

Copy/paste 10,000 characters
Enter emojis 🎉 in text fields
Try SQL:
```
'; DROP TABLE users;--
```
Enter HTML:
```
<script>alert('xss')</script>
```

3. Change state unexpectedly

Log out in another tab
Let session expire, then try action
Open same page in multiple tabs

4. Use slow connection

Chrome DevTools → Network → Slow 3G
Try all main actions
Do loading states show?

See BREAKING-THINGS.md for full list.

如何尝试破坏你的应用：

1. 快速且重复点击

双击提交按钮
快速点击返回按钮
加载过程中刷新页面

2. 输入意外数据

复制粘贴10000字符
在文本字段输入emoji 🎉
尝试输入SQL语句：
```
'; DROP TABLE users;--
```
输入HTML代码：
```
<script>alert('xss')</script>
```

3. 意外更改状态

在另一个标签页登出
会话过期后尝试操作
在多个标签页打开同一页面

4. 使用慢速网络

Chrome DevTools → 网络 → 慢速3G
尝试所有主要操作
检查是否显示加载状态

详见BREAKING-THINGS.md获取完整列表。

Documenting Bugs

Bug记录

Bug report template:

Bug: [Short description]

Steps to reproduce:
1. [First action]
2. [Second action]
3. [What triggers the bug]

Expected: [What should happen]
Actual: [What actually happened]

Screenshot: [Attach if visual]
Browser: [Chrome 120 on Mac]
URL: [Where it happened]
Frequency: [Always / Sometimes / Once]

Give to AI to fix:

Bug found: [paste bug report]

Please:
1. Reproduce the bug
2. Identify root cause
3. Fix the issue
4. Verify fix works
5. Test that fix didn't break anything else

Bug报告模板：

Bug: [简短描述]

复现步骤：
1. [第一步操作]
2. [第二步操作]
3. [触发Bug的操作]

预期结果：[应该发生的情况]
实际结果：[实际发生的情况]

截图：[如有视觉问题请附上]
浏览器：[如Mac上的Chrome 120]
URL：[问题发生的页面地址]
发生频率：[总是/有时/仅一次]

提交给AI修复：

发现Bug：[粘贴Bug报告]

请完成：
1. 复现该Bug
2. 确定根本原因
3. 修复问题
4. 验证修复效果
5. 测试修复未影响其他功能

Regression Testing

回归测试

After fixing a bug, test:

Regression Checklist:
- [ ] Original bug is fixed
- [ ] Happy path still works
- [ ] Related features still work
- [ ] No new errors in console
- [ ] No new visual issues

Common regression issues:

Fix breaks different browser
Fix breaks mobile layout
Fix breaks related feature
Fix introduces new edge case bug

修复Bug后需测试：

Regression Checklist:
- [ ] 原Bug已修复
- [ ] 主用户流程仍可正常运行
- [ ] 相关功能仍可正常运行
- [ ] 控制台无新错误
- [ ] 无新的视觉问题

常见回归问题：

修复导致其他浏览器出现问题
修复导致移动端布局错乱
修复影响相关功能
修复引入新的边缘场景Bug

Pre-Deployment Checklist

部署前检查清单

Before pushing to production:

Production Readiness:
- [ ] All features tested (happy path + edge cases)
- [ ] Works on mobile (iPhone + Android)
- [ ] Works in Safari and Chrome
- [ ] No console errors
- [ ] Forms validate correctly
- [ ] Authentication works
- [ ] No test data visible
- [ ] Error messages are user-friendly
- [ ] Loading states show
- [ ] Can't break it with weird input

推送至生产环境前需确认：

Production Readiness:
- [ ] 所有功能已测试（主流程+边缘场景）
- [ ] 在移动端（iPhone+Android）可正常运行
- [ ] 在Safari和Chrome中可正常运行
- [ ] 控制台无错误
- [ ] 表单验证正常
- [ ] 身份验证功能正常
- [ ] 无测试数据可见
- [ ] 错误提示对用户友好
- [ ] 显示加载状态
- [ ] 输入异常内容不会导致系统崩溃

When to Get QA Help

何时寻求QA帮助

Consider hiring QA when:

10 features to test before launch
Complex user flows (multi-step processes)
Multiple integrations to verify
Preparing for big launch (> 1000 users)

For most MVPs: Following this checklist is sufficient.

考虑聘请QA的场景：

上线前需测试超过10个功能
复杂用户流程（多步骤流程）
需验证多个集成服务
准备大型上线（用户量>1000）

对于大多数MVP： 遵循本清单已足够。

Common Testing Mistakes

常见测试误区

Mistake	Fix
Only test happy path	Test edge cases too
Test only on Chrome desktop	Test mobile + Safari
Skip testing forms	Forms are where bugs hide
Test while AI still building	Wait until feature complete
Ignore console errors	Fix all errors before deploy
Test with perfect data	Test empty, long, invalid data

误区	解决方法
仅测试主用户流程	同时测试边缘场景
仅在桌面端Chrome测试	测试移动端+Safari
跳过表单测试	表单是Bug高发区
AI仍在开发时进行测试	等待功能完成后再测试
忽略控制台错误	部署前修复所有错误
仅使用完美数据测试	测试空值、超长、无效数据

Quick Testing Shortcuts

快速测试捷径

5-minute quick test:

1. Load page in Chrome
2. Complete main user flow
3. Try one edge case (empty field)
4. Check mobile view (Chrome DevTools)
5. Look for console errors

15-minute thorough test:

1. Happy path in Chrome
2. 3-4 edge cases
3. Test on real phone
4. Check Safari
5. Try to break it (fast clicks, weird input)
6. Check all error messages

5分钟快速测试：

1. 在Chrome中加载页面
2. 完成主用户流程
3. 尝试一个边缘场景（空字段）
4. 使用Chrome DevTools检查移动端视图
5. 查看控制台错误

15分钟全面测试：

1. 在Chrome中测试主流程
2. 测试3-4个边缘场景
3. 在真实手机上测试
4. 检查Safari
5. 尝试破坏系统（快速点击、异常输入）
6. 检查所有错误提示

Testing Tools

测试工具

Built into browser:

Chrome DevTools (Inspect)
Network tab (check API calls)
Console (check for errors)
Device mode (test mobile sizes)
Lighthouse (performance + best practices)

Free external tools:

BrowserStack (free trial) - Test on real devices
Can I Use (caniuse.com) - Check browser support
Validator.nu - Check HTML validity

Usually don't need:

Automated testing frameworks (too complex for non-technical)
Paid testing services (manual testing sufficient for MVP)

浏览器内置工具：

Chrome DevTools（检查元素）
网络标签页（检查API调用）
控制台（检查错误）
设备模式（测试移动端尺寸）
Lighthouse（性能+最佳实践检测）

免费外部工具：

BrowserStack（免费试用）- 在真实设备上测试
Can I Use（caniuse.com）- 检查浏览器兼容性
Validator.nu - 检查HTML有效性

通常无需使用：

自动化测试框架（对非技术人员过于复杂）
付费测试服务（手动测试对MVP已足够）

Success Looks Like

成功标准

✅ Main user flow works perfectly
✅ Edge cases handled gracefully
✅ Works on mobile and desktop
✅ Works in Chrome and Safari
✅ Error messages clear and helpful
✅ Can't break it with weird input
✅ No bugs reported by users

✅ 主用户流程完美运行
✅ 边缘场景处理得当
✅ 在移动端和桌面端均可正常运行
✅ 在Chrome和Safari中均可正常运行
✅ 错误提示清晰且有帮助
✅ 输入异常内容不会导致系统崩溃
✅ 无用户反馈的Bug