Skip to main content

CI GitHub Actions

介绍​

¥Introduction

Playwright 测试可以在任何 CI 提供商上运行。在本节中，我们将介绍使用 GitHub actions 在 GitHub 上运行测试。如果你想了解如何配置其他 CI 提供程序，请查看我们详细的 持续集成文档。

¥Playwright tests can be run on any CI provider. In this section we will cover running tests on GitHub using GitHub actions. If you would like to see how to configure other CI providers check out our detailed doc on Continuous Integration.

当 安装 Playwright 使用 VS Code 扩展 或 npm init playwright@latest 时，你可以选择添加 GitHub Actions 工作流程。这会在 .github/workflows 文件夹中创建一个 playwright.yml 文件，其中包含你需要的所有内容，以便你的测试在每个推送请求和拉取请求到 main/master 分支上运行。

¥When installing Playwright using the VS Code extension or with npm init playwright@latest you are given the option to add a GitHub Actions workflow. This creates a playwright.yml file inside a .github/workflows folder containing everything you need so that your tests run on each push and pull request into the main/master branch.

你将学习​

¥You will learn

设置 GitHub Actions​

¥Setting up GitHub Actions

在推/拉请求时​

¥On push/pull_request

测试将在主/主分支上的推送或拉取请求上运行。workflow 将安装所有依赖，安装 Playwright，然后运行测试。它还将创建 HTML 报告。

¥Tests will run on push or pull request on branches main/master. The workflow will install all dependencies, install Playwright and then run the tests. It will also create the HTML report.

.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: 18
    - 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

在 push/pull_request 上（分片）​

¥On push/pull_request (sharded)

GitHub Actions 支持 在多个作业之间分片测试。查看我们的 分片文档，了解有关分片的更多信息，并查看 GitHub actions 示例，了解如何配置作业以在多台机器上运行测试以及如何合并 HTML 报告。

¥GitHub Actions supports sharding tests between multiple jobs. Check out our sharding doc to learn more about sharding and to see a GitHub actions example of how to configure a job to run your tests on multiple machines as well as how to merge the HTML reports.

通过容器​

¥Via Containers

GitHub Actions 通过使用 jobs.<job_id>.container 选项支持 在容器中运行作业。这对于不通过依赖污染主机环境以及拥有一致的环境（例如）很有用。 跨不同操作系统的屏幕截图/视觉回归测试。

¥GitHub Actions support running jobs in a container by using the jobs.<job_id>.container option. This is useful to not pollute the host environment with dependencies and to have a consistent environment for e.g. screenshots/visual regression testing across different operating systems.

.github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  playwright:
    name: 'Playwright Tests'
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.43.0-jammy
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Run your tests
        run: npx playwright test
        env:
          HOME: /root

部署中​

¥On deployment

这将在 GitHub 部署 进入 success 状态后开始测试。Vercel 等服务使用此模式，因此你可以在其部署的环境中运行端到端测试。

¥This will start the tests after a GitHub Deployment went into the success state. Services like Vercel use this pattern so you can run your end-to-end tests on their deployed environment.

.github/workflows/playwright.yml
name: Playwright Tests
on:
  deployment_status:
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: 18
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
      env:
        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}

创建 Repo 并推送到 GitHub​

¥Create a Repo and Push to GitHub

一旦你完成了 GitHub actions 工作流程 设置，那么你需要做的就是 在 GitHub 上创建存储库 或将你的代码推送到现有的存储库。按照 GitHub 上的说明进行操作，不要忘记使用 git init 命令进行 初始化 git 存储库，这样你就可以对代码进行 add、commit 和 push。

¥Once you have your GitHub actions workflow setup then all you need to do is Create a repo on GitHub or push your code to an existing repository. Follow the instructions on GitHub and don't forget to initialize a git repository using the git init command so you can add, commit and push your code.

Create a Repo and Push to GitHub

打开工作流程​

¥Opening the Workflows

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

¥Click on the Actions tab to see the workflows. Here you will see if your tests have passed or failed.

Opening the Workflows

在拉取请求中，你还可以单击 PR 状态检查.xml 中的“详细信息”链接。

¥On Pull Requests you can also click on the Details link in the PR status check.

pr status checked

查看测试日志​

¥Viewing Test Logs

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

¥Clicking on the workflow run will show you the all the actions that GitHub performed and clicking on Run Playwright tests will show the error messages, what was expected and what was received as well as the call log.

Viewing Test Logs

HTML 报告​

¥HTML Report

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

¥The HTML Report shows you a full report of your tests. You can filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests.

下载 HTML 报告​

¥Downloading the HTML Report

在“工件”部分中，单击 Playwright 报告以 zip 文件格式下载你的报告。

¥In the Artifacts section click on the playwright-report to download your report in the format of a zip file.

Downloading the HTML Report

查看 HTML 报告​

¥Viewing the HTML Report

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

¥Locally opening the report will not work as expected as you need a web server in order for everything to work correctly. First, extract the zip, preferably in a folder that already has Playwright installed. Using the command line change into the directory where the report is and use npx playwright show-report followed by the name of the extracted folder. This will serve up the report and enable you to view it in your browser.

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

viewing the HTML report

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

¥To learn more about reports check out our detailed guide on HTML Reporter

查看踪迹​

¥Viewing the Trace

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

¥Once you have served the report using npx playwright show-report, click on the trace icon next to the test's file name as seen in the image above. You can then view the trace of your tests and inspect each action to try to find out why the tests are failing.

playwright trace viewer

在网络上发布报告​

¥Publishing report on the web

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

¥Downloading the HTML report as a zip file is not very convenient. However, we can utilize Azure Storage's static websites hosting capabilities to easily and efficiently serve HTML reports on the Internet, requiring minimal configuration.

  1. 创建 Azure 存储账户。

    ¥Create an Azure Storage account.

  2. 为存储账户启用 静态网站托管。

    ¥Enable Static website hosting for the storage account.

  3. 在 Azure 中创建服务主体并授予其对 Azure Blob 存储的访问权限。成功执行后，该命令将显示下一步将使用的凭据。

    ¥Create a Service Principal in Azure and grant it access to Azure Blob storage. Upon successful execution, the command will display the credentials which will be used in the next step.

    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 的密钥 下，然后添加以下密钥：

    ¥Use the credentials from the previous step to set up encrypted secrets in your GitHub repository. Go to your repository's settings, under GitHub Actions secrets, and add the following secrets:

    • AZCOPY_SPA_APPLICATION_ID

    • AZCOPY_SPA_CLIENT_SECRET

    • AZCOPY_TENANT_ID 有关如何使用客户端密钥授权服务主体的详细指南，请参阅 此微软文档。

    ¥For a detailed guide on how to authorize a service principal using a client secret, refer to this Microsoft documentation.

  5. 添加将 HTML 报告上传到 Azure 存储的步骤。

    ¥Add a step that uploads the HTML report to 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 存储容器的内容。

¥The contents of the $web storage container can be accessed from a browser by using the public URL of the website.

注意

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

¥This step will not work for pull requests created from a forked repository because such workflow doesn't have access to the secrets.

下一步是什么​

¥What's Next