Back to Details

browser-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

技能: 基于浏览器的端到端测试

Skill: Browser-based End-to-End (E2E) Testing

1. 概述

1. Overview

本技能定义了一套端到端（E2E）测试流程，该流程不依赖传统的单元测试框架，而是通过 
chrome-dev-tools
或类似的浏览器工具进行手动或半自动化的界面测试。
所有测试用例都以结构化的 Markdown 文件形式进行记录和管理。
This skill defines an end-to-end (E2E) testing process that does not rely on traditional unit testing frameworks. Instead, it uses 
chrome-dev-tools
or similar browser tools for manual or semi-automated UI testing.
All test cases are documented and managed in structured Markdown files.

2. 何时使用

2. When to Use

  • 当需要为项目中的某个 Space 应用创建或执行测试时。
  • 当需要验证一个功能在本地和部署后是否都按预期工作时。
  • 当需要记录测试过程和结果以供回顾时。
  • When you need to create or execute tests for a Space application in the project.
  • When you need to verify whether a feature works as expected both locally and after deployment.
  • When you need to document the testing process and results for future review.

3. 测试流程

3. Testing Workflow

  1. 本地测试优先: 在本地环境中完成开发后，首先在本地运行应用，并根据测试用例执行端到端测试。
  2. 部署测试: 本地测试全部通过后，将代码推送到 
    main
    分支，触发 Hugging Face Spaces 的自动部署。
  3. 验证部署: 在部署后的 Space 页面上，重复执行测试用例，确保线上功能与本地一致。
  1. Local Testing First: After completing development in the local environment, first run the application locally and execute end-to-end tests according to the test cases.
  2. Deployment Testing: After all local tests pass, push the code to the 
    main
    branch to trigger automatic deployment on Hugging Face Spaces.
  3. Deployment Verification: Re-execute the test cases on the deployed Space page to ensure that the online functionality is consistent with the local version.

4. 测试用例规范

4. Test Case Specifications

A) 存放位置

A) Storage Location

每个 Space 应用的测试用例都存放在其各自的 
tests/
目录下。例如：
some-proj/tests/
。
Test cases for each Space application are stored in their respective 
tests/
directory. For example: 
some-proj/tests/
.

B) 文件结构

B) File Structure

每个测试用例都是一个独立的 Markdown 文件，其内容结构由模板 
templates/test-case.md.template
定义。
  • 文件头:
    • 创建时间: 测试用例创建时的时间戳。
    • Commit Hash: 创建时对应的 Git Commit 哈希值。
    • Commit Message: 创建时对应的 Git Commit 消息。
  • 核心定义:
    • 测试名称: 对测试用例的简短描述。
    • 测试目的: 详细说明此测试用例要验证的功能或修复的问题。
  • 环境信息:
    • 本地运行和部署方式: 清晰说明如何在本地启动应用以及如何触发部署。
  • 执行与结果:
    • 测试步骤: 一系列清晰、可复现的操作步骤。
    • 预期结果: 描述在执行完测试步骤后，系统应该达到的状态。
    • 通过时的实际结果: 当测试成功通过后，在此处记录观察到的实际结果，包括：
      • 截图路径: 自动截取的关键页面截图的存储路径。
      • 验证状态: 截图内容与预期结果描述比对后的验证结果（通过/不通过）。
      • 口述标准: 用户口述的预期结果视觉描述。 这些记录作为测试通过的凭证。
Each test case is an independent Markdown file, and its content structure is defined by the template 
templates/test-case.md.template
.
  • File Header:
    • Creation Time: Timestamp when the test case was created.
    • Commit Hash: The Git Commit hash corresponding to the creation time.
    • Commit Message: The Git Commit message corresponding to the creation time.
  • Core Definition:
    • Test Name: A brief description of the test case.
    • Test Purpose: Detailed explanation of the functionality this test case aims to verify or the issue it intends to fix.
  • Environment Information:
    • Local Running and Deployment Method: Clear instructions on how to start the application locally and how to trigger deployment.
  • Execution and Results:
    • Test Steps: A series of clear, reproducible operation steps.
    • Expected Result: Describe the state the system should reach after executing the test steps.
    • Actual Result When Passed: After the test passes successfully, record the observed actual results here, including:
      • Screenshot Path: Storage path of automatically captured key page screenshots.
      • Verification Status: Verification result (Pass/Fail) after comparing the screenshot content with the expected result description.
      • Oral Standard: Visual description of the expected result as stated by the user. These records serve as proof of the test passing.

C) 创建测试用例

C) Create Test Cases

  1. 使用 
    date +'%Y-%m-%d-%H-%M'
    获取当前时间戳。
  2. 使用 
    git log -1 --pretty=%H%n%s
    获取最新的 Commit 信息。
  3. 复制 
    browser-testing/templates/test-case.md.template
    模板内容。
  4. 填充模板中的占位符，并编写详细的测试步骤和预期结果。
  5. 将新创建的测试用例文件保存到对应 Space 的 
    tests/
    目录下。
  6. 为每个测试用例创建一个同名的子目录，用于存放截图等测试产物。例如：
    some-proj/tests/YYYY-MM-DD-HH-mm-测试名称/
    。
  1. Use 
    date +'%Y-%m-%d-%H-%M'
    to get the current timestamp.
  2. Use 
    git log -1 --pretty=%H%n%s
    to get the latest Commit information.
  3. Copy the content of the template 
    browser-testing/templates/test-case.md.template
    .
  4. Fill in the placeholders in the template and write detailed test steps and expected results.
  5. Save the newly created test case file to the 
    tests/
    directory of the corresponding Space.
  6. Create a subdirectory with the same name as the test case to store test artifacts such as screenshots. For example: 
    some-proj/tests/YYYY-MM-DD-HH-mm-Test-Name/
    .

5. 模板资源

5. Template Resources

  • templates/test-case.md.template
    : 用于创建新测试用例的 Markdown 模板。
  • templates/test-case.md.template
    : Markdown template for creating new test cases.