设置 CI

简介

Playwright 测试可以在任何 CI 提供商上运行。本指南介绍了一种在 GitHub 上使用 GitHub Actions 运行测试的方法。如果您想了解更多信息，或如何配置其他 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 仓库，以便您可以添加、提交和推送您的代码。

打开工作流程

点击 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 Storage 帐户。
启用静态网站托管用于存储帐户。

在 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 secrets 下，添加以下密钥
- 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 }}'

$web 存储容器的内容可以使用网站的公共 URL 从浏览器访问。

注意

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

简介​

您将学习​

设置 GitHub Actions​

创建仓库并推送到 GitHub​

打开工作流程​

​

查看测试日志​

​

HTML 报告​

下载 HTML 报告​

查看 HTML 报告​

查看 Trace​

在 Web 上发布报告​

下一步​

简介