如何在浏览器上下文中执行Node.js代码？

Question

如何在page.evaluate()语句中执行客户端JS代码（不仅仅是浏览器JavaScript代码，Node.js代码）？

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await page.evaluate(() => {
    document.querySelector('button[type=submit]').click();
  });
  console.log('yes') 
  await browser.close();
})();

Answer 1

传递给page.evaluate()的第一个参数应该是一个将在浏览器的页面上下文中评估的函数。

Node.js是服务器端代码，旨在在服务器上执行。

您可以使用以下方法将参数从Node.js环境传递到页面函数：

// Node.js Environment
const hello_world = 'Hello, world! (from Node.js)';

await page.evaluate(hello_world => {
  // Browser Page Environment
  console.log(hello_world);
}, hello_world);

您可以侦听页面上下文中发生的'console'事件，并使用page.on()打印结果：

page.on('console', msg => {
  for (let i = 0; i < msg.args().length; i++) {
    console.log(`${i}: ${msg.args()[i]}`);
  }
});