如何在Playwright中处理谷歌登录弹窗？调试正常运行报错求助

调试时能正常运行，直接跑就报错，核心原因是代码执行速度比页面加载/渲染快——调试时手动停顿给了页面足够时间加载元素，直接运行时程序没等元素就绪就开始操作，导致找不到元素超时。

针对你这段Playwright代码，具体调整点如下：

1. 去掉强制跳转，等待登录状态同步 #

你在Google登录后直接page.goto到communities页面，这时候登录状态可能还没同步到主页面，页面元素还没加载完成。应该等待弹窗关闭，或者主页面跳转到目标页后再继续：

// 替换原来的await page.goto(...)
// 等待popup关闭，确保登录流程完成
await page1.waitForClose();
// 等待主页面跳转到目标地址
await page.waitForURL("https://sma-fe.aa-qa.global-drum.com/communities");

2. 操作元素前显式等待就绪 #

点击Company列的输入框前，先等这个元素可交互，避免因为表格加载慢导致找不到：

// 替换原来的点击代码
const companySearchBox = page.getByRole("columnheader", { name: "Company" }).getByRole("textbox");
// 等待元素可见且可交互
await companySearchBox.waitFor({ state: "visible" });
await companySearchBox.click();

完整调整后的代码 #

import { test, expect } from "@playwright/test";

test("test", async ({ page }) => {
  await page.goto("https://sma-fe.aa-qa.global-drum.com/login");

  await page.getByRole("button", { name: "Login With Google" }).click();
  const page1Promise = page.waitForEvent("popup");
  const page1 = await page1Promise;
  
  await page1.getByLabel("Email or phone").fill("testing@tempmail.com");
  await page1.getByLabel("Email or phone").press("Enter");
  await page1.getByLabel("Enter your password").fill("user123@");
  await page1.getByLabel("Enter your password").press("Enter");
  
  // 等待弹窗关闭，确保登录完成
  await page1.waitForClose();
  // 等待目标页面加载完成
  await page.waitForURL("https://sma-fe.aa-qa.global-drum.com/communities");
  
  // 等待搜索框就绪后操作
  const companySearchBox = page.getByRole("columnheader", { name: "Company" }).getByRole("textbox");
  await companySearchBox.waitFor({ state: "visible" });
  await companySearchBox.click();
});

另外，也可以开启Playwright的trace功能录制运行过程，直观排查哪一步出问题：

npx playwright test --trace on

运行完后用npx playwright show-trace查看详细执行日志。

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