Day 24 - CI/CD Integration

今日目标

把 Playwright 放进 GitHub Actions 或公司 CI。
理解 CI 中的浏览器安装、依赖缓存、报告上传。

学习时间安排（60–120 分钟）

时间	模块	做什么
0-20 分钟	核心概念与词汇	读概念表，重点理解 npm ci 和 --with-deps。
20-45 分钟	官方文档阅读	读 CI 文档的 GitHub Actions 部分，对照官方 workflow。
45-75 分钟	实操练习	创建 .github/workflows/playwright.yml。
75-105 分钟	示例代码改写	加入报告上传、shard、secret 配置。
105-120 分钟	复盘与作业	完成 CI 运行策略说明，完成今日问题。

核心概念与词汇

English	中文	场景用法
CI/CD	持续集成/交付	Use it when you describe automated test runs on every push or PR.
workflow	工作流	Use it when you define a GitHub Actions pipeline in YAML.
`npm ci`	干净安装依赖	Use it when you install from package-lock.json for reproducible builds.
`--with-deps`	安装系统依赖	Use it when `npx playwright install` also installs OS libraries in CI.
`upload-artifact`	上传产物	Use it when you publish reports and traces from CI runs.
secret	CI 密钥	Use it when you store test accounts and tokens encrypted.
smoke / regression / nightly	测试分层	Use it when you split tests by scope and run frequency.
`if: always()`	无条件执行	Use it when artifacts must upload even if tests fail.
runner	运行器	Use it when you refer to the CI machine executing jobs.
retention-days	保留天数	Use it when you set how long CI artifacts are kept.

学习材料

必读：[CI - GitHub Actions](https://playwright.dev/docs/ci-intro)
必读：[GitHub Actions workflow 官方示例](https://playwright.dev/docs/ci-intro#github-actions)
选读：[Caching browsers](https://playwright.dev/docs/ci-intro#caching-browsers)（了解提速方式）

重点理解

GitHub Actions 示例：

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: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

CI 注意点：

使用 npm ci 保证依赖一致。
安装浏览器依赖。
上传 HTML report。
保存 trace、screenshots、videos。
区分 smoke、regression、nightly。
管理测试账号和环境变量。

实操步骤

创建：

.github/workflows/playwright.yml

并推送到 GitHub 或在本地检查 YAML。

示例代码

# 用 secret 注入测试账号
env:
  TEST_USER: ${{ secrets.TEST_USER }}
  TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}

# smoke 与 regression 分层
- name: Run smoke tests
  run: npx playwright test --grep @smoke
- name: Run full regression
  run: npx playwright test

常见坑

用 npm install 代替 npm ci，lockfile 漂移导致 CI 与本地行为不一致。
忘加 --with-deps，Ubuntu runner 缺系统库，浏览器起不来。
忘写 if: always()，测试一失败报告产物就不上传。
密钥写进 workflow YAML 提交，安全事件。
CI 上测试全绿但本地挂：环境差异（时区、locale、浏览器版本）没控制。

今日产出

一个 CI workflow 文件。
一份 CI 运行策略说明。

今日问题

CI 中为什么要使用 npm ci？
为什么要上传 report artifact？
CI 环境和本地环境差异会导致哪些问题？
如何管理测试账号密码？
Smoke、Regression、Nightly 应该如何分层？

复盘要点

CI 的目标不是“跑一遍”，而是“持续、可信、可追溯”：可复现安装、证据保留、失败可见。
分层策略决定反馈速度：PR 跑 smoke，合并跑 regression，夜间跑全量。
从今天起，你的测试不再属于本地，它属于团队的交付流水线。

AI 时代扩展：AI 辅助 Playwright 测试

新增概念

English	中文
pipeline design	流水线设计
CI failure triage	CI 失败分类
environment parity	环境一致性

适用场景

让 AI 根据你的测试规模设计 workflow 结构（分层、shard、缓存），或者把 CI 失败日志交给 AI 做初步分类。

可复用表达 / 提示词

我有 200 条 Playwright 测试，希望 PR 只跑 smoke，合并后跑全量并保留报告，请设计 GitHub Actions workflow。
这是 CI 失败日志，请判断是环境问题、依赖问题还是测试问题，并给出证据。

追问加练

AI 生成的 workflow 有安全风险（如密钥硬编码），你如何审查？
CI 失败分类中，“环境问题”和“测试问题”的区分标准是什么？
让 AI 维护 CI 流水线，你担心的最大风险是什么？

今日作业

完成 playwright.yml，本地校验 YAML 语法。
写一份 CI 运行策略说明（分层、触发时机、产物保留）。
让 AI 审查你的 workflow，重点看安全和产物配置。

自检清单

我的 workflow 使用 npm ci 和 --with-deps。
报告产物在失败时也会上传。
密钥通过 CI secrets 注入，没有硬编码。
我理解 smoke/regression/nightly 的分层策略。
明天复盘时，我的测试集能在 CI 上可持续运行。