返回博客

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

加速您的工作流程并交付更高质量的代码

loading
Varun Vachhar
@winkerVSbecks
最后更新于

开发者每周花费 4-8 小时修复 bug。如果 bug 溜进生产环境,情况只会变得更糟。修复它需要 5-10 倍的时间。UI 测试是交付高质量用户体验不可或缺的一部分,但也可能耗费大量时间。每次更改后手动运行所有测试工作量太大。

Twilio、Target 和 Adobe 的顶尖 UI 工程团队自动化了 UI 测试。当开发者推送代码时,测试会被触发。它们在后台执行并在完成后报告结果。这使您可以自动检测回归。

本文将向您展示如何使用 Github Actions 自动化测试流程。您将学习如何通过拉取请求检查来报告测试状态。在此过程中,我将指出一些常见的错误以及如何避免。

持续 UI 测试

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

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

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

您将通过 PR 徽章获取测试结果,徽章会提供所有检查的摘要。

一眼就能看出拉取请求是否通过了您的 UI 质量检查。如果通过,则继续审查实际代码。如果未通过,则深入查看日志找出问题所在。

教程

上一篇文章中,我介绍了 Taskbox 应用并演示了如何测试此 UI 的各个方面。在此基础上,我们将使用 GitHub Actions 设置持续集成。获取代码并跟着操作。

设置 CI

在您的仓库中创建 .github/workflows/ui-tests.yml 文件开始。一个工作流程(workflow)是一组需要自动化的作业(jobs)。它由事件(events)触发,例如推送提交或创建拉取请求。

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

  • 使用 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 页面上显示结果。

信心十足地合并

您运行测试的频率越高,您遇到的 bug 就越少。微软的调研研究表明,通过自动化测试,您可以将缺陷减少 20.9%

UI 测试就像应用的界面和体验的健康检查。它们验证视觉外观,确认底层逻辑,甚至检测集成问题。持续集成帮助您测试每个提交,无需您额外付出努力即可减少 bug。

当您的测试通过时,您将信心十足地知道您的 UI 没有 bug。

加入 Storybook 邮件列表

获取最新新闻、更新和发布信息

7,180位开发者及还在不断增加

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被数十万开发者用于生产环境的工具。远程优先。

查看职位

热门文章

UI 测试指南

一个不会拖慢您速度的测试流程
loading
Varun Vachhar

Storybook 按需架构

打包后的 Storybook 体积缩小 3 倍 & 加载速度更快
loading
Tom Coleman

测试用户流程

验证您的 UI 端到端工作正常
loading
Varun Vachhar
加入社区
7,180位开发者及还在不断增加
为何选择为何选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与其中博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

由以下机构维护
Chromatic - Storybook 中文
特别感谢 Netlify CircleCI