CI 设置

简介

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

您将学习

设置 GitHub Actions

当使用 VS Code 扩展或 npm init playwright@latest 安装 Playwright 时，您可以选择添加 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 存储库，以便您可以添加、提交和推送您的代码。

打开工作流程

单击 Actions 选项卡以查看工作流程。在这里您将看到您的测试是否通过或失败。

opening the workflow

查看测试日志

单击工作流程运行将显示 GitHub 执行的所有操作，单击 Run Playwright tests 将显示错误消息、预期内容和接收内容以及调用日志。

Viewing Test Logs

HTML 报告

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

下载 HTML 报告

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

查看 HTML 报告

本地打开报告将无法按预期工作，因为您需要 Web 服务器才能使一切正常工作。首先，解压缩 zip 文件，最好在已安装 Playwright 的文件夹中。使用命令行更改到报告所在的目录，并使用 npx playwright show-report，后跟解压缩文件夹的名称。这将启动报告并使您能够在浏览器中查看它。

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

viewing the HTML report

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

查看 Trace

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

playwright trace viewer

在 Web 上发布报告

将 HTML 报告作为 zip 文件下载不是很方便。但是，我们可以利用 Azure Storage 的静态网站托管功能，以轻松有效地在 Internet 上提供 HTML 报告，而只需最少的配置。

创建 Azure 存储帐户。
为存储帐户启用静态网站托管。

在 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>

使用上一步中的凭据在您的 GitHub 存储库中设置加密的密钥。转到您的存储库设置，在GitHub Actions 密钥下，添加以下密钥
- AZCOPY_SPA_APPLICATION_ID
- AZCOPY_SPA_CLIENT_SECRET
- AZCOPY_TENANT_ID
有关如何使用客户端密钥授权服务主体的详细指南，请参阅此 Microsoft 文档。

添加一个步骤，将 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 存储库创建的拉取请求，因为此类工作流程无权访问密钥。

简介​

您将学习​

设置 GitHub Actions​

创建存储库并推送到 GitHub​

打开工作流程​

​

查看测试日志​

​

HTML 报告​

下载 HTML 报告​

查看 HTML 报告​

查看 Trace​

在 Web 上发布报告​

下一步​

简介