Playwright命令行测试时浏览器窗口提前关闭致断言超时问题排查

问题现象 #

为React Web应用编写的Google登录Playwright测试，在VS Code的Playwright扩展中运行、调试均正常，但通过命令行npx playwright test执行时，在断言头像元素可见的步骤超时。调试发现，Google登录弹窗关闭后，主浏览器页面会提前关闭，导致Playwright无法找到目标元素。

测试代码 #

test("Validate Google Login", async ({ page }) => {
  try {
    await page.goto("/");
    await page.getByRole("button", { name: "LOGIN" }).click();

    // login with Google
    const userLogin = process.env.GOOGLE_USER;
    const userPassword = process.env.GOOGLE_PASSWORD;
    if (!userLogin || !userPassword) throw new Error("Test Credentials not set.");

    const popupPromise = page.waitForEvent("popup");
    await page.getByText("Log in with Google").click();
    const popup = await popupPromise;

    await popup.fill('input[type="email"]', userLogin);
    await popup.getByRole("button", { name: "Next" }).click();
    await popup.fill('#password >> input[type="password"]', userPassword);
    await popup.locator("#passwordNext").getByRole("button", { name: "Next" }).click();

    // wait for Google popup to close, confirming authentication
    await expect(page.getByRole("img", { name: "Avatar" })).toBeVisible(); // times out right here

    // verify Login;
    const baseURL = config.use?.baseURL;
    if (!baseURL) throw new Error("Base URL not set.");
    await page.goto(`${baseURL}/profile`);
    const locator = page.getByRole("heading", { name: "Profile" });
    await expect(locator).toBeVisible();
  } catch (error) {
    console.error("error: ", error);
  }
});

错误日志 #

error:  Ze [Error]: Timed out 5000ms waiting for expect(received).toBeVisible()
Call log:
  - expect.toBeVisible with timeout 5000ms
  - waiting for getByRole('img', { name: 'Avatar' })

问题分析 #

VS Code Playwright扩展默认以有头模式（显示浏览器窗口）运行测试，而命令行默认启用无头模式，两种模式下浏览器的页面生命周期处理存在细微差异：

• 无头模式下，浏览器对页面状态变化的响应更快，可能在Playwright尚未完成断言前，就因应用的跳转/刷新逻辑触发了页面关闭。
• 另外，命令行环境与VS Code环境的环境变量加载方式、浏览器启动参数可能存在差异，间接导致登录后的页面行为异常。

解决方案 #

1. 命令行强制使用有头模式验证 #

先通过有头模式确认问题是否由无头模式导致：

npx playwright test --headed

若此命令能正常运行，则可确定是无头模式下的行为差异引发的问题。

2. 优化等待逻辑，适配页面生命周期 #

替换原有的头像断言逻辑，先等待页面加载/跳转完成，再进行元素断言，并适当延长超时时间：

// 替换原头像断言代码
await page.waitForNavigation({ waitUntil: 'networkidle' }); // 等待页面跳转或加载完成
await expect(page.getByRole("img", { name: "Avatar" })).toBeVisible({ timeout: 10000 });

3. 排查页面关闭的触发源 #

监听主页面的close事件，输出调试信息，确认页面关闭的触发时机和原因：

// 在page.goto后添加监听
page.on('close', () => {
  console.log('主页面已关闭');
  // 可结合应用日志，排查是否是登录后的跳转逻辑异常导致页面关闭
});

4. 确保环境变量一致 #

命令行运行时，确认GOOGLE_USER和GOOGLE_PASSWORD环境变量正确加载，避免因登录失败导致页面异常关闭：

// 在代码开头添加验证
console.log('当前Google测试账号:', process.env.GOOGLE_USER);

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