设置 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@v5
    - uses: actions/setup-node@v5
      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

工作流执行以下步骤

克隆你的仓库
安装 Node.js
安装 NPM 依赖项
安装 Playwright 浏览器
运行 Playwright 测试
将 HTML 报告上传到 GitHub UI

要了解更多信息，请参阅 “了解 GitHub Actions”。

创建仓库并推送到 GitHub

设置好 GitHub Actions 工作流后，您需要做的就是在 GitHub 上创建一个仓库或将代码推送到现有仓库。请按照 GitHub 上的说明操作，并且不要忘记使用 git init 命令初始化一个 git 仓库，以便您可以添加、提交和推送您的代码。

打开工作流

点击 Actions 选项卡查看工作流。在这里你可以看到你的测试是否通过或失败。

opening the workflow

查看测试日志

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

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 报告器的详细指南

查看跟踪

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

playwright trace viewer

在 Web 上发布报告

将 HTML 报告下载为 zip 文件不太方便。但是，我们可以利用 Azure 存储的静态网站托管功能，轻松高效地在 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 存储的步骤。

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

注意

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

正确处理秘密

像跟踪文件、HTML 报告甚至控制台日志这样的制品包含有关您的测试执行的信息。它们可能包含敏感数据，例如测试用户的用户凭据、对暂存后端的访问令牌、测试源代码，甚至有时是您的应用程序源代码。像对待敏感数据一样小心地对待这些文件。如果您将报告和跟踪作为 CI 工作流的一部分上传，请确保您只将它们上传到受信任的制品存储，或者在上传前加密文件。与团队成员共享制品也是如此：使用受信任的文件共享或在共享前加密文件。

简介​

你将学到​

设置 GitHub Actions​

创建仓库并推送到 GitHub​

打开工作流​

​

查看测试日志​

​

HTML 报告​

下载 HTML 报告​

查看 HTML 报告​

查看跟踪​

在 Web 上发布报告​

正确处理秘密​

接下来​

简介