通过 puppeteer 监听自定义事件

Question

我目前正在开发一个 GitLab CI 测试环境，并且我有一个测试工具，用于测试我们的 SDK。我已经着手设置一个在指定测试运行结束的页面上触发的自定义事件。在我的 puppeteer 实现中，我想监听这个自定义事件“TEST_COMPLETE”。

我还没有成功地让它工作，所以我想我至少要确保 puppeteer repo 上的 custom-event.js 示例有效，而且我也没有看到我认为我应该得到的东西。我克隆了下面的主仓库并执行了 npm 安装。当我执行下面的 js 测试，设置 headless:false 并且不关闭浏览器时，我没有看到任何显示任何自定义事件被触发的登录控制台。

我的理解是，我应该看到一些带有“已触发”的控制台事件消息，然后是“应用程序就绪”事件和信息，但事实并非如此。即使我与页面交互，我也看不到一些“features_loaded”和“features_unveil”日志之外的任何内容。

https://github.com/puppeteer/puppeteer/blob/main/examples/custom-event.js

今天有人能够在此代码上获得预期的行为吗？不确定这是否以前有效并且从那以后就坏了，或者我只是做错了什么。任何信息都会有很大帮助，谢谢！

Answer 1

不确定这是否是您需要的，但我可以使用此简化代码（puppeteer 8.0.0）在 Node.js 控制台中收到消息“TEST_COMPLETE fired.”：

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

try {
  const [page] = await browser.pages();

  await page.goto('https://example.org/');

  await page.exposeFunction('onCustomEvent', async (type) => {
    console.log(`${type} fired.`);
    await browser.close();
  });

  await page.evaluate(() => {
    document.addEventListener('TEST_COMPLETE', (e) => {
      window.onCustomEvent('TEST_COMPLETE');
    });

    document.dispatchEvent(new Event('TEST_COMPLETE'));
  });
} catch (err) { console.error(err); }