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

原文链接：storybook.js.org/blog/how-to…

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

Twilio、Target 和 Adobe 的领先 UI 工程团队自动化 UI 测试。当开发人员推送代码时触发测试。它们在后台执行并在完成时报告结果。这允许您自动检测回归。

本文向您展示如何使用 Github Actions 自动化您的测试管道。您将学习如何使用拉取请求检查报告测试的状态。在此过程中，我会指出要避免的常见错误。

持续的 UI 测试

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

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

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

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

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

教程

在上一篇博文中，我介绍了 Taskbox 应用程序并演示了如何测试此 UI的各个方面。在此基础上，我们将使用 GitHub Actions 设置持续集成。抓住代码并跟随。

设置 CI

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

当代码被推送到我们存储库的任何分支时，我们的工作流将运行，它将有三个工作：

• 使用 Jest 运行交互测试和可访问性审核
• 使用 Chromatic 运行视觉和合成测试
• 使用 Cypress 运行用户流测试

# .github/workflows/ui-tests.yml
name: 'UI Tests'

on: push

jobs:
  # Run interaction and accessibility tests with Axe
  interaction-and-accessibility:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: yarn
      - name: Run test
        run: yarn test
  # Run visual and composition tests with Chromatic
  visual-and-composition:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0 # Required to retrieve git history
      - name: Install dependencies
        run: yarn
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # 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@v2
      - name: Install dependencies
        run: yarn
      - name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          start: npm start

请注意，要运行 Chromatic，您需要CHROMATIC_PROJECT_TOKEN. 您可以从 Chromatic 管理页面获取它并将其添加到您的存储库机密中。虽然GITHUB_TOKEN默认情况下可用。

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

缓存依赖

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

name: 'UI Tests'

on: push

jobs:
  # Install and cache npm dependencies
  install-cache:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Commit
        uses: actions/checkout@v2
      - name: Cache yarn dependencies and cypress
        uses: actions/cache@v2
        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 with Axe
  interaction-and-accessibility:
    runs-on: ubuntu-latest
    needs: install-cache
    steps:
      - uses: actions/checkout@v2
      - name: Restore yarn dependencies
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: |
            ~/.cache/Cypress
            node_modules
          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-v1
      - name: Run test
        run: yarn test
  # Run visual and composition tests with Chromatic
  visual-and-composition:
    runs-on: ubuntu-latest
    needs: install-cache
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0 # Required to retrieve git history
      - name: Restore yarn dependencies
        uses: actions/cache@v2
        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@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # 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@v2
      - name: Restore yarn dependencies
        uses: actions/cache@v2
        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@v2
        with:
          start: npm start

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

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

充满信心地合并

您运行测试的频率越高，您遇到的错误就越少。Microsoft 研究支持的研究表明，通过自动化测试，您可以看到缺陷减少了20.9%。

UI 测试充当应用外观和感觉的健康检查。他们验证视觉外观，确认底层逻辑，甚至检测集成问题。持续集成可帮助您测试每个提交以减少错误，而无需您付出额外的努力。

当您的测试通过时，您将确信您的 UI 没有错误。