跳到主要内容

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

查看 Trace

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

playwright trace viewer

在 Web 上发布报告

将 HTML 报告作为 zip 文件下载不是很方便。但是,我们可以利用 Azure Storage 的静态网站托管功能,以轻松有效地在 Internet 上提供 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 存储库中设置加密的密钥。转到您的存储库设置,在GitHub Actions 密钥下,添加以下密钥

    • AZCOPY_SPA_APPLICATION_ID
    • AZCOPY_SPA_CLIENT_SECRET
    • AZCOPY_TENANT_ID

    有关如何使用客户端密钥授权服务主体的详细指南,请参阅此 Microsoft 文档

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

下一步