🧪 Webapp Testing - Web 应用测试工具

这是什么？

Webapp Testing 是一个基于 Playwright 的 Web 应用测试工具包，让你能够：

  • 自动化测试前端功能（点击按钮、填写表单）
  • 调试 UI 问题（截图、查看 DOM）
  • 验证用户交互流程（登录、购物车等）
  • 捕获浏览器日志和网络请求

核心技术：Python + Playwright（无头 Chromium 浏览器）

能做什么？

核心功能一览

  • 🤖 自动化交互：模拟用户点击、输入、导航
  • 🖼️ 可视化调试：截图、录屏、DOM 检查
  • 📝 日志捕获：控制台输出、网络请求监控
  • 🚀 服务器管理：自动启动/停止开发服务器
  • 🔍 元素发现：智能识别按钮、链接、表单

适合谁用？

  • 前端开发者：测试 React/Vue 应用功能
  • QA 工程师：自动化回归测试
  • 全栈开发者：端到端流程验证
  • 产品经理：验收测试和演示

典型使用场景

场景 1：登录功能测试 🔐

需求：验证登录表单是否正常工作

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    
    # 访问登录页
    page.goto('http://localhost:5173')
    page.wait_for_load_state('networkidle')
    
    # 填写并提交表单
    page.fill('input[name="username"]', 'admin')
    page.fill('input[name="password"]', 'password123')
    page.click('button:has-text("登录")')
    
    # 验证登录成功
    page.wait_for_selector('text=欢迎')
    print("✅ 登录测试通过")
    
    browser.close()

价值：自动化验证，无需手动点击

场景 2：UI 回归测试 📸

需求：更新样式后，确保页面没有变形

# 在代码修改前截图
page.goto('http://localhost:5173')
page.screenshot(path='baseline.png', full_page=True)

# 修改代码...

# 再次截图对比
page.screenshot(path='current.png', full_page=True)

# 可以用图像对比工具检查差异

价值：快速发现视觉问题

场景 3：调试神秘 Bug 🐛

需求：查看为什么按钮点击后没反应

# 捕获控制台日志
console_logs = []
page.on('console', lambda msg: console_logs.append(msg.text))

# 执行操作
page.click('button#submit')

# 查看日志
print("控制台输出：")
for log in console_logs:
    print(log)

# 截图当前状态
page.screenshot(path='debug.png')

价值：无需打开浏览器开发者工具，一键捕获所有信息

快速开始

5 分钟了解核心概念

  1. 什么是 Playwright？

    • 微软开源的浏览器自动化工具
    • 支持 Chrome、Firefox、Safari
    • 比 Selenium 更快、更稳定

  2. 静态 vs. 动态应用

    静态 HTML
├── 文件：index.html（纯 HTML）
├── 加载：file:// URL
└── 等待：不需要

动态应用（React/Vue）
├── 需要：开发服务器
├── 加载：http://localhost
└── 等待：必须 wait_for_load_state('networkidle')

  3. 关键等待时机

    ❌ 错误：不等待
page.goto('http://localhost:5173')
page.click('button')  # 可能失败，JavaScript 还没执行

✅ 正确：等待网络空闲
page.goto('http://localhost:5173')
page.wait_for_load_state('networkidle')  # 关键！
page.click('button')  # 现在安全了

使用辅助工具：with_server.py

问题：每次测试都要手动启动开发服务器？

解决：使用 with_server.py 自动管理

# 1. 查看帮助
python scripts/with_server.py --help

# 2. 自动启动服务器并运行测试
python scripts/with_server.py \
  --server "npm run dev" \
  --port 5173 \
  -- python my_test.py

好处：

  • ✅ 自动启动服务器
  • ✅ 等待服务器就绪
  • ✅ 测试完成后自动关闭
  • ✅ 支持多个服务器（前后端分离）

多服务器示例

# 同时运行后端和前端
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python test_fullstack.py

侦察-然后-行动模式

这是测试动态应用的最佳实践：

步骤 1：侦察（Reconnaissance）

先看看页面长什么样：

page.goto('http://localhost:5173')
page.wait_for_load_state('networkidle')

# 截图
page.screenshot(path='/tmp/inspect.png', full_page=True)

# 列出所有按钮
buttons = page.locator('button').all()
for btn in buttons:
    print(f"发现按钮: {btn.text_content()}")

步骤 2：识别选择器

从输出中找到你需要的元素：

发现按钮: 登录
发现按钮: 注册
发现按钮: 提交

步骤 3：执行操作

使用发现的选择器：

page.click('button:has-text("提交")')
page.wait_for_selector('text=提交成功')

选择器速查表

Playwright 支持多种选择器：

类型示例说明
文本text=登录包含指定文本
角色role=button[name="提交"]推荐，符合可访问性
CSSbutton.primary标准 CSS 选择器
ID#submit-button元素 ID
组合form >> button多级选择

优先级建议：

  1. 角色选择器（最佳）
  2. 文本选择器
  3. ID 选择器
  4. CSS 选择器

常见陷阱与解决

❌ 陷阱 1：忘记等待

page.goto('http://localhost:5173')
page.click('button')  # 失败：元素还不存在

✅ 解决：

page.goto('http://localhost:5173')
page.wait_for_load_state('networkidle')
page.click('button')  # 成功

❌ 陷阱 2：脆弱的选择器

# 依赖 DOM 结构，容易坏
page.click('div > div > button:nth-child(3)')

✅ 解决：

# 使用语义化选择器
page.click('button:has-text("提交")')
page.click('role=button[name="提交"]')

❌ 陷阱 3：没有处理异步操作

page.click('button#load-data')
data = page.locator('#data').text_content()  # 可能还在加载

✅ 解决：

page.click('button#load-data')
page.wait_for_selector('#data:not(:has-text("Loading..."))')
data = page.locator('#data').text_content()

最佳实践总结

  1. ✅ 使用辅助脚本：with_server.py 管理服务器
  2. ✅ 等待策略：动态应用必须 wait_for_load_state('networkidle')
  3. ✅ 语义化选择器：优先 role= 和 text=
  4. ✅ 截图调试：遇到问题先截图
  5. ✅ 捕获日志：监听 console 事件
  6. ✅ 关闭浏览器：用 try...finally 确保清理资源

下一步

选择您的路径：

相关技能：