Nightwatch v2.2 自带集成的 HTML 报告器，可更好地汇总测试结果以及其他详细信息。在本博文中，我们将设置 Nightwatch 项目，该项目会在测试完成后自动将生成的 HTML 报告发布到 GitHub Pages 上。

以下是 Nightwatch HTML 报告的预览

创建项目

1. 设置 Nightwatch

我使用 nightwatch-examples 仓库作为模板来设置一些示例测试。

您也可以使用 Nightwatch 的 init 命令，它可以管理所有配置和依赖项，并在您的项目中添加一些示例测试。

💡
您可以在 此处 详细了解 Nightwatch 入门客户端。
npm init nightwatch

2. 在本地运行测试

为了检查测试是否在本地运行，在 nightwatch-examples 模板中，package.json 中已经有一个测试脚本。

// package.json

"scripts": {
    "test": "nightwatch --env chrome"
  },

使用以下命令运行测试：

npm test

定义 GitHub 工作流

让我们继续使用 GitHub Actions 自动执行和发布测试报告。

1. 创建测试工作流

创建一个目录 .github/workflows 并添加 test.yml

//test.yml

name: nightwatch.tests
on:
  push:
    branches: 
    - main
jobs:
  tests: 
    name: 'nightwatch tests'
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@v2
        with:
          node-version: "14.x"
      - name: Install dependencies
        run: npm ci
      - name: Run Nightwatch tests
        continue-on-error: true
        run: xvfb-run --auto-servernum npm test -- --env chrome
      - name: "Publish test results"
        uses: peaceiris/actions-gh-pages@v3.7.3
        with: 
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: './tests_output/nightwatch-html-report'
          keep_files: true
          user_name: <user-name>
          user_email: <user-email>

我选择主分支来运行 GitHub Actions。在以下步骤中，它将下载依赖项、运行测试并将报告发布到一个名为 gh-pages 的分支，该分支将用于托管 HTML 页面。

一些配置详细信息

  • continue-on-error 设置为 true，因为我们需要在失败的情况下发布报告。
  • publish_dir 指向 Nightwatch HTML 报告默认生成的目录。这些可以通过 Nightwatch 输出配置进行更改。
  • user_name、user_email 和 github_token 用于创建提交并将内容推送到选定的分支。
💡
详细了解 Github Actions

在无头模式下运行测试并不总是 100% 可靠，因此我们添加了使用 xvfb 在 Chrome 中运行测试的支持。

💡
Xvfb 是一个 X 服务器，可以在没有显示硬件或物理输入设备的 Linux 机器上运行。它使用虚拟内存模拟帧缓冲区。

2. 设置 GitHub Pages

最后一步是在项目的 设置 → Pages 中启用 GitHub Pages。

然后我们就可以开始了 ⭐。

为了验证所有内容都已正确设置，请将所有更改推送到 GitHub，这将触发 Actions。

🚀
查看演示项目的测试报告 此处

3. 触发测试工作流

通常，我们希望不仅在更新测试时运行作业，而且在有新部署或需要安排作业时也运行作业。

💡
详细了解 触发 GitHub 工作流的事件

结论

使用 GitHub Actions 有助于我们自动化测试执行，而使用 GitHub Pages 可以发布我们的测试报告。该报告包含所有测试详细信息，包括原始 HTTP 日志，这将有助于以后进行调试。