Playwright CI 流水线冒烟测试

示例说明

冒烟测试是部署前的最后一道闸：只验证最关键的少数路径，几分钟内跑完。Playwright 的测试以用户可感知的角色与标签定位元素，比 CSS 选择器更能扛住 UI 重构。CI 集成的三个关键点：浏览器二进制缓存让安装秒级完成、retries 参数吸收环境类偶发失败、失败时的 trace 工件保留现场供离线回放。

技术要点

• 角色与标签定位优先于样式选择器
• retries 只应用于易碎而非确定性失败
• 失败工件上传保留完整排查现场

代码解读

第一个用例走完搜索到打开结果的核心路径，URL 断言钉住路由契约；第二个用例直接用请求上下文探测健康端点，无需页面开销。注释里的 workflow 片段展示缓存路径固定、重试次数与失败才上传工件的完整组合。

使用建议

冒烟套件保持精简，失败必须可行动。重试会让真 bug 延迟暴露，确定性失败要修根因。trace 查看器回放时要带当时的网络与控制台上下文。

代码示例

// e2e/smoke.spec.ts
import { test, expect } from '@playwright/test';

test('visitor can search and open a result', async ({ page }) => {
  await page.goto('/search');

  await page.getByLabel('Search').fill('rate limiting');
  await page.getByRole('button', { name: 'Search' }).click();

  await expect(page.getByRole('listitem')).not.toHaveCount(0);
  await page.getByRole('link', { name: /rate/i }).first().click();
  await expect(page).toHaveURL(/\/examples\//);
});

test('health endpoint is green', async ({ request }) => {
  const res = await request.get('/healthz');
  expect(res.ok()).toBeTruthy();
  expect(await res.json()).toMatchObject({ status: 'up' });
});

// .github/workflows/smoke.yml（节选）
// smoke:
//   runs-on: ubuntu-latest
//   steps:
//     - uses: actions/checkout@v4
//     - run: corepack enable
//     - run: pnpm install --frozen-lockfile
//     - run: pnpm exec playwright install --with-deps chromium
//       env:
//         PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/.cache/ms-playwright
//     - run: pnpm exec playwright test --project=chromium --retries=2
//     - uses: actions/upload-artifact@v4
//       if: failure()
//       with:
//         name: traces
//         path: test-results/