跳到主要内容

配置持续集成(CI)

简介​

Playwright 测试可以在任何 CI 服务提供商上运行。本指南介绍了一种使用 GitHub Actions 在 GitHub 上运行测试的方法。如果您想了解更多信息，或了解如何配置其他 CI 提供商，请查看我们详细的持续集成文档。

您将学习​

设置 GitHub Actions​

当使用 VS Code 扩展 或通过 npm init playwright@latest 安装 Playwright 时，系统会提供添加 GitHub Actions 工作流的选项。这将在 .github/workflows 文件夹中创建一个 playwright.yml 文件，包含所有必要配置，使您的测试能在每次推送到主分支或拉取请求时自动运行。以下是该文件的内容：

.github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

该工作流执行以下步骤：

  1. 克隆您的代码仓库
  2. 安装 Node.js
  3. 安装 NPM 依赖项
  4. 安装 Playwright 浏览器
  5. 运行 Playwright 测试
  6. 将 HTML 报告上传至 GitHub UI

要了解更多信息，请参阅 "理解 GitHub Actions"。

创建仓库并推送到 GitHub​

一旦你完成了 GitHub Actions 工作流的设置，接下来只需要 在 GitHub 上创建仓库 或将代码推送到现有仓库。按照 GitHub 的指引操作，别忘了使用 git init 命令 初始化 git 仓库，这样你才能 添加、提交 和 推送 你的代码。

创建仓库并推送到 GitHub

查看工作流​

点击 Actions 标签页查看工作流。在这里你可以看到测试是通过还是失败。

​

查看工作流

查看测试日志​

点击工作流运行记录会显示 GitHub 执行的所有操作，点击 Run Playwright tests 会显示错误信息、预期结果、实际结果以及调用日志。

​

查看测试日志

HTML 报告​

HTML 报告会展示完整的测试报告。你可以按浏览器、通过的测试、失败的测试、跳过的测试和不稳定的测试来筛选报告。

下载 HTML 报告​

在 Artifacts 部分点击 playwright-report 以下载 zip 格式的报告文件。

下载 HTML 报告

查看 HTML 报告​

直接在本地打开报告可能无法正常工作，因为需要 Web 服务器才能确保所有功能正常运行。首先解压 zip 文件，建议解压到已安装 Playwright 的文件夹中。使用命令行切换到报告所在目录，然后执行 npx playwright show-report 命令并跟上解压后的文件夹名称。这将启动报告服务，使您能在浏览器中查看报告。

npx playwright show-report 我的解压后的playwright报告名称

查看 HTML 报告

要了解更多关于报告的信息，请查看我们的详细指南：HTML 报告器

查看追踪记录​

使用 npx playwright show-report 启动报告服务后，点击测试文件名旁边的追踪图标（如上图所示）。您可以查看测试的追踪记录，并检查每个操作以找出测试失败的原因。

Playwright 追踪查看器

在网页上发布报告​

将HTML报告下载为zip文件并不十分方便。不过，我们可以利用Azure Storage的静态网站托管功能，以最简配置轻松高效地在互联网上提供HTML报告服务。

  1. 创建一个 Azure存储账户

  2. 为存储账户启用 静态网站托管

  3. 在Azure中创建服务主体并授予其访问Azure Blob存储的权限。命令执行成功后，将显示用于下一步的凭据：

    az ad sp create-for-rbac --name "github-actions" --role "Storage Blob Data Contributor" --scopes /subscriptions/<SUBSCRIPTION_ID>/resourceGroups/<RESOURCE_GROUP_NAME>/providers/Microsoft.Storage/storageAccounts/<STORAGE_ACCOUNT_NAME>

  4. 使用上一步获取的凭据在GitHub仓库中设置加密密钥。进入仓库设置页面的 GitHub Actions密钥 部分，添加以下密钥：

    • AZCOPY_SPA_APPLICATION_ID
    • AZCOPY_SPA_CLIENT_SECRET
    • AZCOPY_TENANT_ID

    关于如何使用客户端密钥授权服务主体的详细指南，请参考 微软官方文档

  5. 添加将HTML报告上传至Azure Storage的步骤：

    .github/workflows/playwright.yml
    ...
        - name: Upload HTML report to Azure
          shell: bash
          run: |
            REPORT_DIR='run-${{ github.run_id }}-${{ github.run_attempt }}'
            azcopy cp --recursive "./playwright-report/*" "https://<STORAGE_ACCOUNT_NAME>.blob.core.windows.net/\$web/$REPORT_DIR"
            echo "::notice title=HTML report url::https://<STORAGE_ACCOUNT_NAME>.z1.web.core.windows.net/$REPORT_DIR/index.html"
          env:
            AZCOPY_AUTO_LOGIN_TYPE: SPN
            AZCOPY_SPA_APPLICATION_ID: '${{ secrets.AZCOPY_SPA_APPLICATION_ID }}'
            AZCOPY_SPA_CLIENT_SECRET: '${{ secrets.AZCOPY_SPA_CLIENT_SECRET }}'
            AZCOPY_TENANT_ID: '${{ secrets.AZCOPY_TENANT_ID }}'

通过使用网站的 公开URL，可以在浏览器中访问$web存储容器的内容。

备注

此步骤不适用于从fork仓库创建的拉取请求，因为此类工作流 无法访问密钥

正确处理敏感信息​

诸如跟踪文件、HTML 报告甚至控制台日志等产物都包含有关测试执行的信息。它们可能包含敏感数据，如测试用户的凭证、预发布后端访问令牌、测试源代码，有时甚至是您的应用程序源代码。请像对待这些敏感数据一样谨慎处理这些文件。如果将报告和跟踪文件作为 CI 工作流的一部分上传，请确保仅上传至受信任的产物存储库，或在上传前对文件进行加密。与团队成员共享产物时同样适用：使用受信任的文件共享方式或在共享前加密文件。

下一步​