Playwright page.waitForEvent()无法捕获自定义事件求助

你混淆了Playwright Page 对象的内置事件和页面 window 的自定义DOM事件——page.waitForEvent() 只能监听Playwright框架定义的Page事件（比如 popup、framenavigated），无法直接捕获页面内触发的自定义DOM事件，这就是测试超时的根本原因。

方案1：用page.waitForFunction监听自定义事件 #

这是最通用的方式，通过在页面上下文中执行函数，直接监听window上的componentReady事件：

await Promise.all([
  // 等待自定义事件触发
  this.page.waitForFunction(() => {
    return new Promise(resolve => {
      // 监听事件，触发后立即resolve并自动移除监听器
      window.addEventListener('componentReady', resolve, { once: true });
    });
  }),
  // 点击按钮触发跳转
  this.page.locator('button').click()
]);

方案2：针对新窗口（Popup）场景 #

如果点击按钮会打开新浏览器窗口，需要先捕获新页面实例，再在新页面上监听事件：

// 同时等待新页面弹出和点击操作
const [newPage] = await Promise.all([
  this.page.waitForEvent('popup'),
  this.page.locator('button').click()
]);

// 在新页面上等待自定义事件
await newPage.waitForFunction(() => {
  return new Promise(resolve => {
    window.addEventListener('componentReady', resolve, { once: true });
  });
});

方案3：同页面导航后监听 #

如果是当前页面内跳转（不打开新窗口），可以先等待导航完成，再监听事件：

// 先等待页面导航完成
await Promise.all([
  this.page.waitForNavigation(),
  this.page.locator('button').click()
]);

// 导航完成后等待自定义事件触发
await this.page.waitForFunction(() => {
  return new Promise(resolve => {
    window.addEventListener('componentReady', resolve, { once: true });
  });
});

如果需要确认事件是否被正确捕获，可以在waitForFunction中添加日志，同时在测试中启用页面日志输出：

// 测试初始化时配置页面日志监听
this.page.on('console', msg => console.log(`页面日志: ${msg.text()}`));

// 带日志的事件监听
await this.page.waitForFunction(() => {
  console.log('等待componentReady事件...');
  return new Promise(resolve => {
    window.addEventListener('componentReady', (e) => {
      console.log('事件已捕获:', e);
      resolve();
    }, { once: true });
  });
});

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