跳到主要内容

设置 CI

简介​

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

您将学习​

设置 GitHub Actions​

使用 安装 Playwright 时，通过 VS Code 扩展或 npm init playwright@latest 您可以选择添加 GitHub Actions 工作流。这会在 .github/workflows 文件夹中创建一个 playwright.yml 文件，其中包含所需的一切，以便您的测试在每次推送到 main/master 分支或向其发送拉取请求时运行。该文件如下所示

.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 仓库，这样您就可以添加、提交和推送您的代码了。

Create a Repo and Push to GitHub

打开工作流​

单击Actions标签页以查看工作流。在这里您将看到您的测试是通过还是失败。

​

opening the workflow

查看测试日志​

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

​

Viewing Test Logs

HTML 报告​

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

下载 HTML 报告​

在 Artifacts 部分，单击playwright-report以下载 zip 格式的报告。

Downloading the HTML Report

查看 HTML 报告​

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

npx playwright show-report name-of-my-extracted-playwright-report

viewing the HTML report

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

查看追踪查看器​

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

playwright trace viewer

将报告发布到 Web​

将 HTML 报告下载为 zip 文件不太方便。然而，我们可以利用 Azure 存储的静态网站托管功能，轻松高效地在互联网上提供 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 仓库中设置加密的 secret。转到仓库设置，在GitHub Actions secrets下，添加以下 secret：

    • AZCOPY_SPA_APPLICATION_ID
    • AZCOPY_SPA_CLIENT_SECRET
    • AZCOPY_TENANT_ID

    关于如何使用客户端 secret 授权服务主体的详细指南，请参阅此 Microsoft 文档。

  5. 添加一个将 HTML 报告上传到 Azure 存储的步骤。

    .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 存储容器的内容。

注意

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

下一步​