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

1. Overview

chrome-dev-tools

2. When to Use

• 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. Testing Workflow

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. Test Case Specifications

A) Storage Location

tests/

some-proj/tests/

B) File Structure

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) Create Test Cases

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. Template Resources

• templates/test-case.md.template

  : Markdown template for creating new test cases.