GitHub Actions中Playwright测试认证失败排查求助

核心排查方向 #

虽然GitHub Actions日志显示Secrets已注入（），但实际可能存在环境变量未正确传递或认证后页面状态异常*两种情况，按以下步骤逐一排查：

1. 先确认环境变量是否真的传递到测试代码 #

直接在测试的beforeEach中添加调试日志（不会泄露敏感信息）：

test.beforeEach(async ({ page }) => {
  // 确认变量是否存在
  console.log('USERNAME exists:', !!process.env.USERNAME);
  console.log('PASSWORD exists:', !!process.env.PASSWORD);
  
  await page.goto('/');
  // ... 后续代码
});

重新运行CI，如果日志输出false，说明变量未正确传递；如果是true，则问题出在认证流程或页面跳转上。

2. 修复环境变量传递问题 #

如果变量未传递，尝试以下两种方案：

方案A：在CI中创建临时.env文件

和本地测试逻辑保持一致，在GitHub Actions中生成.env文件，避免依赖dotenv的加载差异：
在Run Playwright tests步骤前添加：

- name: Generate .env file for CI
  run: |
    echo "USERNAME=${{ secrets.USERNAME }}" >> .env
    echo "PASSWORD=${{ secrets.PASSWORD }}" >> .env

确保你的代码中已经通过dotenv.config()加载.env文件（本地测试应该已经配置）。

方案B：移除TypeScript非空断言的潜在隐患

直接使用变量前添加校验，避免!断言掩盖变量未定义的问题：

test.beforeEach(async ({ page }) => {
  await page.goto('/');
  
  const username = process.env.USERNAME;
  const password = process.env.PASSWORD;
  
  if (!username || !password) {
    throw new Error('环境变量USERNAME或PASSWORD未设置');
  }
  
  await page.getByPlaceholder('Email').fill(username);
  await page.getByPlaceholder('Password').fill(password);
  // ... 后续代码
});

如果变量未设置，会直接抛出明确错误，而非模糊的超时。

3. 排查认证后的页面异常 #

如果变量已确认存在，问题大概率是认证失败或页面跳转未完成：

方案A：添加导航等待

点击登录按钮时，同步等待页面跳转完成，避免提前查找元素：

// 替换原有的登录点击代码
await Promise.all([
  page.waitForNavigation({ waitUntil: 'networkidle' }),
  page.getByRole('button', { name: 'Sign in' }).click()
]);

确保页面完全加载后再执行下一步操作。

方案B：查看Playwright测试报告

CI执行完成后，下载playwright-report artifact，查看测试的视频和截图：

• 确认登录时是否填入了正确的用户名/密码
• 点击登录后页面是否跳转到预期的仪表盘，还是显示错误页
• 检查是否有页面崩溃或跳转异常的情况

4. 额外优化：增加超时时间 #

CI环境网络可能较慢，适当延长测试超时时间：
在playwright.config.ts中调整：

export default defineConfig({
  timeout: 60000, // 全局超时设为60秒
  use: {
    actionTimeout: 15000, // 单个操作超时设为15秒
  },
});

内容的提问来源于stack exchange，提问作者user22068518