Playwright 在 GitHub actions 在 GitHub 上运行测试的方法

设置 GitHub Actions
¥Setting up 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

工作流执行以下步骤：

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

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

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

Create a Repo and Push to GitHub
打开工作流程
单击“操作”选项卡可查看工作流程。在这里你将看到你的测试是通过还是失败。

opening the workflow

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

Viewing Test Logs

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