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

工作流执行以下步骤

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

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

创建存储库并推送到 GitHub

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

打开工作流

单击“**操作**”选项卡以查看工作流。在这里，您将看到您的测试是通过还是失败。

opening the workflow

查看测试日志

单击工作流运行将显示 GitHub 执行的所有操作，并且单击“**运行 Playwright 测试**”将显示错误消息、预期结果和接收到的结果以及调用日志。

Viewing Test Logs

HTML 报告

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

下载 HTML 报告

在“工件”部分，单击“**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

在网上发布报告

将 HTML 报告下载为 zip 文件不是很方便。但是，我们可以利用 Azure 存储的静态网站托管功能轻松有效地在互联网上提供 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存储容器的内容。

注意

此步骤对从派生存储库创建的拉取请求不起作用，因为此类工作流无法访问机密。

简介​

您将学习​

设置 GitHub Actions​

创建存储库并推送到 GitHub​

打开工作流​

​

查看测试日志​

​

HTML 报告​

下载 HTML 报告​

查看 HTML 报告​

查看跟踪​

在网上发布报告​

下一步​

简介