gabrielmoreira 技能: 基于浏览器的端到端测试
1. 概述
本技能定义了一套端到端（E2E）测试流程，该流程不依赖传统的单元测试框架，而是通过 chrome-dev-tools 或类似的浏览器工具进行手动或半自动化的界面测试。
所有测试用例都以结构化的 Markdown 文件形式进行记录和管理。
2. 何时使用
- 当需要为项目中的某个 Space 应用创建或执行测试时。
- 当需要验证一个功能在本地和部署后是否都按预期工作时。
- 当需要记录测试过程和结果以供回顾时。
3. 测试流程
- 本地测试优先: 在本地环境中完成开发后，首先在本地运行应用，并根据测试用例执行端到端测试。
- 部署测试: 本地测试全部通过后，将代码推送到
main分支，触发 Hugging Face Spaces 的自动部署。 - 验证部署: 在部署后的 Space 页面上，重复执行测试用例，确保线上功能与本地一致。
4. 测试用例规范
A) 存放位置
每个 Space 应用的测试用例都存放在其各自的 tests/ 目录下。例如：some-proj/tests/。
B) 文件结构
每个测试用例都是一个独立的 Markdown 文件，其内容结构由模板 templates/test-case.md.template 定义。
- 文件头:
- 创建时间: 测试用例创建时的时间戳。
- Commit Hash: 创建时对应的 Git Commit 哈希值。
- Commit Message: 创建时对应的 Git Commit 消息。
- 核心定义:
- 测试名称: 对测试用例的简短描述。
- 测试目的: 详细说明此测试用例要验证的功能或修复的问题。
- 环境信息:
- 本地运行和部署方式: 清晰说明如何在本地启动应用以及如何触发部署。
- 执行与结果:
- 测试步骤: 一系列清晰、可复现的操作步骤。
- 预期结果: 描述在执行完测试步骤后，系统应该达到的状态。
- 通过时的实际结果: 当测试成功通过后，在此处记录观察到的实际结果，包括：
- 截图路径: 自动截取的关键页面截图的存储路径。
- 验证状态: 截图内容与预期结果描述比对后的验证结果（通过/不通过）。
- 口述标准: 用户口述的预期结果视觉描述。 这些记录作为测试通过的凭证。
C) 创建测试用例
- 使用
date +'%Y-%m-%d-%H-%M'获取当前时间戳。 - 使用
git log -1 --pretty=%H%n%s获取最新的 Commit 信息。 - 复制
browser-testing/templates/test-case.md.template模板内容。 - 填充模板中的占位符，并编写详细的测试步骤和预期结果。
- 将新创建的测试用例文件保存到对应 Space 的
tests/目录下。 - 为每个测试用例创建一个同名的子目录，用于存放截图等测试产物。例如：
some-proj/tests/YYYY-MM-DD-HH-mm-测试名称/。
5. 模板资源
templates/test-case.md.template: 用于创建新测试用例的 Markdown 模板。