截图文件说明

本目录用于存放 E2E 测试的截图文件，截图将自动嵌入到生成的 Excel 文件中，也会直接显示在 SOP 文档中。

📁 已有截图

客户创建 SOP 截图

  • ✅ customer-list-page.png (115 KB) - 客户列表页面
  • ✅ create-customer-dialog.png (105 KB) - 客户创建对话框

产品创建 SOP 截图

  • ✅ T1-step1-browser.png (4.0 KB) - 步骤1：打开浏览器
  • ✅ T1-step2-url.png (4.4 KB) - 步骤2：输入 URL
  • ✅ T1-step3-login.png (4.2 KB) - 步骤3：登录
  • ✅ T1-step4-products.png (4.2 KB) - 步骤4：导航到「产品/服务」
  • ✅ T2-step1-create-button.png (4.2 KB) - 步骤1：点击右上「创建」按钮
  • ✅ T2-step2-product-tab.png (4.1 KB) - 步骤2：保持「产品」标签选中

文件命名规则

任务 T1：环境与账号验证

  • T1-step1-browser.png - 步骤1：打开浏览器
  • T1-step2-url.png - 步骤2：输入 URL
  • T1-step3-login.png - 步骤3：登录
  • T1-step4-products.png - 步骤4：导航到「产品/服务」

任务 T2：新建产品 UI 操作

  • T2-step1-create-button.png - 步骤1：点击右上「创建」按钮
  • T2-step2-product-tab.png - 步骤2：保持「产品」标签选中
  • T2-step3-fill-fields.png - 步骤3：填写必填字段
  • T2-step4-optional-fields.png - 步骤4：填写描述/上传图片（可选）
  • T2-step5-submit.png - 步骤5：点击创建按钮

任务 T3：后端确认

  • T3-step1-record.png - 步骤1：记录产品名称/编号
  • T3-step2-api-call.png - 步骤2：调用 GET /api/v1/products
  • T3-step3-verify.png - 步骤3：校验返回数据

任务 T4：数据一致性 & 清理

  • T4-step1-compare.png - 步骤1：比对 UI 与 API 数据
  • T4-step2-record-id.png - 步骤2：记录产品 ID
  • T4-step3-cleanup.png - 步骤3：清理测试数据（可选）

使用方法

  1. 拍摄截图：在执行测试时，按照上述命名规则保存截图
  2. 放置文件：将截图文件放置在此目录下
  3. 生成 Excel：运行 python3 generate_excel.py（在虚拟环境中：source .venv/bin/activate && python3 generate_excel.py）
  4. 查看结果：打开生成的 Excel 文件，截图将自动嵌入在对应的行中

截图要求

  • 格式：PNG、JPG、JPEG 格式均可
  • 尺寸：建议宽度 800-1200px，高度自适应
  • 清晰度：确保文字和界面元素清晰可辨
  • 内容：截图应包含关键操作和验证点

示例

如果某步骤没有截图，Excel 中将仅显示文件路径文本，不会报错。

自动化截图

可以使用浏览器自动化工具（如 Selenium、Playwright）自动拍摄截图：

# 示例：使用 Playwright 自动截图
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto('http://localhost:3000/crm')
    page.screenshot(path='screenshots/T1-step2-url.png')
    browser.close()