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

开发人员每周花费 4-8 小时 修复 bug。如果 bug 潜入生产环境，情况只会变得更糟。修复 bug 需要 5-10 倍 的时间。因此，UI 测试对于交付高质量的体验至关重要，但它也可能非常耗时。每次更改后手动运行所有测试的工作量实在太大了。

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

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

持续 UI 测试

代码评审是开发人员工作的重要组成部分。它有助于及早发现 bug 并保持高代码质量。

为确保拉取请求（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 管理页面获取它，并将其添加到您的存储库 secrets 中。

最后，创建一个新的提交，将您的更改推送到 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 章演示了这一完整工作流程的实际应用。我们将看到如何在将新功能发布到生产环境之前对其进行测试。