Playwright实现点击后自动截图遇TypeError问题求助

错误原因 #

• page.evaluate的返回值会经过序列化处理，函数无法被序列化，所以你从页面上下文返回的document.body.addEventListener到Playwright环境后，已经不是可执行的函数，调用时自然抛出TypeError: listener is not a function。
• 退一步说，就算能拿到这个函数，你在回调里调用page.screenshot()也会失败——page是Playwright Node.js环境的对象，根本没法在浏览器的页面上下文中访问。

正确实现方案 #

方案1：直接监听Playwright页面的点击事件 #

这是最直接的方式，在Playwright环境里直接监听页面的click事件，触发时执行截图：

// 监听页面点击，每次点击后生成带时间戳的截图
page.on('click', async () => {
  await page.screenshot({ path: `screenshot-${Date.now()}.png` });
});

方案2：页面上下文触发，Playwright执行截图 #

如果需要在页面里做特定判断（比如只监听某个元素的点击），可以先把截图方法暴露给页面上下文，再在页面里添加监听：

// 把Playwright的截图方法暴露给页面上下文，命名为takeScreenshot
await page.exposeFunction('takeScreenshot', async () => {
  await page.screenshot({ path: `screenshot-${Date.now()}.png` });
});

// 在页面上下文添加点击监听，触发时调用暴露的截图方法
await page.evaluate(() => {
  document.body.addEventListener('click', async () => {
    await window.takeScreenshot();
  });
});

内容的提问来源于stack exchange，提问作者Ch Asjad Mahmood