如何使用 Github Actions 自动化 UI 测试

开发人员每周花费 4-8 小时 修复错误。如果错误潜入生产环境，情况只会变得更糟。修复它需要 5-10 倍 的时间。这就是为什么 UI 测试是交付高质量体验不可或缺的一部分，但它也可能是一个巨大的时间黑洞。每次更改后手动运行所有测试工作量太大。

您可以自动化您的工作流程，以便在开发人员推送代码时触发测试。测试在后台执行，并在完成后报告结果。这允许您自动检测回归。

本章将向您展示如何使用 Github Actions 实现这样的工作流程。在此过程中，我将指出优化测试运行的方法。

持续 UI 测试

代码审查是成为开发人员的重要组成部分。它有助于尽早发现错误并保持高代码质量。

为确保拉取请求 (PR) 不会破坏生产环境，您通常会拉取代码并在本地运行测试套件。这会中断您的工作流程并花费大量时间。通过持续集成 (CI)，您可以获得测试的所有好处，而无需任何手动干预。

您可以调整 UI、构建新功能或更新依赖项。当您打开拉取请求时，CI 服务器将自动运行全面的 UI 测试——视觉、组合、可访问性、交互和用户流程。

您将通过 PR 徽章获得测试结果，其中提供了所有检查的摘要。

一目了然，您就可以判断拉取请求是否通过了所有质量检查。如果通过，则继续审查实际代码。如果未通过，请深入日志以找出问题所在。

“测试让我对自动化依赖项更新充满信心。如果测试通过，我们就合并它们。”

— Simon Taggart，Twilio 首席工程师

教程

前五章演示了如何测试 Taskbox UI 的各个方面。在此基础上，我们将使用 GitHub Actions 设置持续集成。

设置 CI

在您的存储库中创建一个 .github/workflows/ui-tests.yml 文件以开始使用。工作流程 是您想要自动化的 作业 的集合。它由 事件 触发，例如推送提交或创建拉取请求。

我们的工作流程将在代码推送到我们存储库的任何分支时运行，并且它将有三个作业

• 使用 Storybook 测试运行器运行交互和可访问性测试
• 使用 Chromatic 运行视觉和组合测试
• 使用 Cypress 运行用户流程测试

# .github/workflows/ui-tests.yml

name: 'UI Tests'

on: push

jobs:
  # Run interaction and accessibility tests
  interaction-and-accessibility:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: Install dependencies
        run: yarn
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Build Storybook
        run: yarn build-storybook --quiet
      - name: Serve Storybook and run tests
        run: |
          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
            "npx http-server storybook-static --port 6006 --silent" \
            "npx wait-on tcp:6006 && yarn test-storybook"
  # Run visual and composition tests with Chromatic
  visual-and-composition:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Required to retrieve Git history
      - name: Install dependencies
        run: yarn
      - name: Publish to Chromatic
        uses: chromaui/action@latest
        with:
          # Grab this from the Chromatic manage page
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
  # Run user flow tests with Cypress
  user-flow:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        run: yarn
      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          start: npm run dev

这里有几件事需要注意。对于测试运行器，我们结合使用了 concurrently、http-server 和 wait-on 库来构建和提供 Storybook，以便针对它运行测试。

要运行 Chromatic，您需要 CHROMATIC_PROJECT_TOKEN。您可以从 Chromatic 管理页面获取它，并将其添加到您的存储库机密中。

最后，创建一个新提交，将您的更改推送到 GitHub，您应该会看到您的工作流程正在运行！

缓存依赖项

每个作业独立运行，这意味着 CI 服务器必须在所有三个作业中安装依赖项。这会减慢测试运行速度。我们可以缓存依赖项，并且仅在锁定文件更改时运行 yarn install 以避免这种情况。让我们更新工作流程以包含 install-cache 作业。

# .github/workflows/ui-tests.yml

name: 'UI Tests'

on: push

jobs:
  # Install and cache npm dependencies
  install-cache:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Commit
        uses: actions/checkout@v4
      - name: Cache Yarn dependencies and Cypress
        uses: actions/cache@v4
        id: yarn-cache
        with:
          path: |
            ~/.cache/Cypress
            node_modules
          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-v1
      - name: Install dependencies if cache invalid
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn
  # Run interaction and accessibility tests
  interaction-and-accessibility:
    runs-on: ubuntu-latest
    needs: install-cache
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: Restore Yarn dependencies
        uses: actions/cache@v4
        id: yarn-cache
        with:
          path: |
            ~/.cache/Cypress
            node_modules
          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-v1
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Build Storybook
        run: yarn build-storybook --quiet
      - name: Serve Storybook and run tests
        run: |
          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
            "npx http-server storybook-static --port 6006 --silent" \
            "npx wait-on tcp:6006 && yarn test-storybook"
  # Run visual and composition tests with Chromatic
  visual-and-composition:
    runs-on: ubuntu-latest
    needs: install-cache
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Required to retrieve Git history
      - name: Restore Yarn dependencies
        uses: actions/cache@v4
        id: yarn-cache
        with:
          path: |
            ~/.cache/Cypress
            node_modules
          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-v1
      - name: Publish to Chromatic
        uses: chromaui/action@latest
        with:
          # Grab this from the Chromatic manage page
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
  # Run user flow tests with Cypress
  user-flow:
    runs-on: ubuntu-latest
    needs: install-cache
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Restore Yarn dependencies
        uses: actions/cache@v4
        id: yarn-cache
        with:
          path: |
            ~/.cache/Cypress
            node_modules
          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-v1
      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          start: npm run dev

我们还调整了其他三个作业，以等待 install-cache 作业完成以使用缓存的依赖项。推送另一个提交以重新运行工作流程。

成功！您已自动化您的测试工作流程。当您打开 PR 时，它将并行运行测试运行器、Chromatic 和 Cypress，并在 PR 页面本身上显示结果。

掌握 UI 测试工作流程

测试工作流程从使用 Storybook 隔离组件开始。然后在您编写代码时运行检查以获得更快的反馈循环。最后，使用持续集成执行您的整个测试套件。

第 8 章说明了实际应用中的完整工作流程。我们将看到如何在将新功能交付到生产环境之前对其进行测试。