如何在Playwright中验证自定义事件是否已触发？

Playwright的waitForEvent确实仅支持浏览器默认事件，但我们可以通过页面上下文通信+自定义监听的方式实现对自定义事件的验证，以下是具体方案和参考依据：

两种实现方式 #

方式一：通过暴露函数传递事件数据到Playwright #

// 第一步：给页面暴露一个接收自定义事件的函数
await page.exposeFunction('handleCustomEvent', (eventData) => {
  // 可直接处理事件数据，或存入全局变量用于后续断言
  window.customEventResult = eventData;
});

// 第二步：在页面上下文添加自定义事件监听
await page.evaluate(() => {
  document.addEventListener('your-custom-event-name', (e) => {
    // 调用暴露的函数，把事件详情传给Playwright上下文
    window.handleCustomEvent(e.detail);
  });
});

// 第三步：触发事件源（比如点击目标元素）
await page.click('#your-trigger-element');

// 第四步：等待事件触发并获取数据
const receivedData = await page.waitForFunction(() => window.customEventResult, { timeout: 6000 });

方式二：直接在waitForFunction中等待事件 #

这种方式无需跨上下文传递函数，实现更直接：

// 先触发事件动作
await page.click('#your-trigger-element');

// 等待自定义事件触发，返回事件详情
const eventDetail = await page.waitForFunction(() => {
  return new Promise((resolve) => {
    const listener = (event) => {
      resolve(event.detail);
      // 及时移除监听，避免重复触发导致断言异常
      document.removeEventListener('your-custom-event-name', listener);
    };
    document.addEventListener('your-custom-event-name', listener);
  });
}, { timeout: 6000 });

// 断言事件数据符合预期
expect(eventDetail).toEqual({ key: 'expected-value' });

官方参考依据 #

Playwright官方文档没有单独针对自定义事件的章节，但以下核心API是实现验证的基础：

• page.exposeFunction()：用于打通Playwright与浏览器上下文的函数调用通道
• page.waitForFunction()：支持等待页面内任意异步条件满足，包括自定义事件触发状态
• page.evaluate()：允许在浏览器环境中执行任意JS代码，包括添加自定义事件监听

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