Playwright测试在GitHub Actions登录后启动应用时挂起求助

针对你遇到的本地正常但GitHub Actions中登录后停留在空白加载窗口的问题，可尝试以下几种解决方案：

1. 切换Headless模式版本 #

旧版Headless浏览器在CI环境中可能存在渲染或兼容性问题，建议改用Playwright的新版Headless模式，或者临时启用有界面模式排查问题：

• 修改测试运行命令为：

  npx playwright test LoginTest.spec.js --shard ${{ matrix.shard }} --browser=edge --headless=new
  

• 若要排查是否为Headless导致，可临时使用有界面模式（仅用于测试，不建议长期保留）：

  npx playwright test LoginTest.spec.js --shard ${{ matrix.shard }} --browser=edge --headed
  

2. 禁用浏览器沙箱 #

GitHub Actions的macOS环境可能存在浏览器沙箱权限限制，导致页面加载异常。在Playwright配置文件（playwright.config.js）中添加禁用沙箱的参数：

module.exports = {
  use: {
    browserName: 'edge',
    launchOptions: {
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    }
  }
};

3. 替换固定延迟为页面加载事件监听 #

不要依赖固定延迟（waitForTimeout），改为监听页面加载完成的关键事件或元素，确保页面真正加载完成：

• 登录后等待页面进入网络空闲状态：

  await page.waitForLoadState('networkidle'); // 等待网络请求基本停止
  

• 或者等待着陆页的标志性元素出现：

  await page.waitForSelector('#landing-page-header', { timeout: 60000 }); // 等待目标元素，延长超时时间到60秒
  

4. 复用登录会话避免重复验证 #

每次CI运行都从头走Microsoft Authenticator流程容易不稳定，可通过Playwright的存储状态功能复用登录会话：

1. 本地运行一次登录测试，导出存储状态：

   npx playwright test LoginTest.spec.js --browser=edge --storage-state=auth.json
   

2. 在CI测试中导入存储状态，跳过重复登录流程：
   修改Playwright配置或测试代码，添加storageState: 'auth.json'，同时将auth.json作为机密文件存入GitHub Secrets，在工作流中下载使用。

5. 增加调试日志定位问题 #

在测试代码中添加页面日志和网络请求失败监听，便于在GitHub Actions日志中排查页面内部错误：

// 监听页面控制台日志
page.on('console', msg => console.log(`[页面日志] ${msg.text()}`));
// 监听失败的网络请求
page.on('requestfailed', request => {
  console.log(`[请求失败] ${request.url()}`);
  console.log(`[失败原因] ${request.failure()?.errorText}`);
});

同时在工作流的测试运行命令中开启Trace：

npx playwright test LoginTest.spec.js --shard ${{ matrix.shard }} --trace=on

上传的Trace文件会包含更详细的页面加载过程，帮助定位卡壳点。

6. 简化工作流配置排查 #

暂时移除分片（shard）配置，确认是否为分片导致的问题：
修改工作流中的运行命令为：

npx playwright test LoginTest.spec.js

同时可添加步骤确认Playwright版本：

- name: Check Playwright version
  run: npx playwright --version

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