如何在 puppeteer 中加载脚本？

Question

我正在尝试使用 puppeteer 在 chromium 中加载 axios，代码如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless:false})
  const page = await browser.newPage()
  await page.goto('https://httpbin.org/get')
  await page.evaluate(async () => {
    var script = document.createElement('script');
    script.setAttribute('src','https://unpkg.com/axios@0.21.0/dist/axios.min.js');
    document.head.appendChild(script);
    var r = await axios.get('https://httpbin.org/get')
    console.log(r)
  })
})()

但是当我尝试执行axios.get时，它返回Evaluation failed: ReferenceError: axios is not defined 。 这里有什么问题？

Answer 1

为此使用page.addScriptTag ：

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

await page.addScriptTag({ url: 'https://unpkg.com/axios@0.21.0/dist/axios.min.js' }); 

const data = await page.evaluate(async () => {
  const response = await axios.get('https://httpbin.org/get')
  return response.data; // <-- this is important: the whole response cannot be returned
});

Answer 2

page.addScriptTag在常见情况下很有用，但如果您有理由在 OP 尝试时在浏览器上下文中手动执行此操作，则缺少的部分是将script.onload function 设置为仅运行脚本中的代码（如axios.get ) 加载后。

如果你想从onload function 返回数据到 Node，那么你可以使用一个 promise 如下：

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  const result = await page.evaluate(async () => {
    var script = document.createElement("script");
    const result = new Promise(resolve =>
      script.onload = () => 
        resolve(axios.get("https://httpbin.org/get"))
    );
    var url = "https://unpkg.com/axios@0.21.0/dist/axios.min.js";
    script.setAttribute("src", url);
    document.head.appendChild(script);
    return (await result).data;
  });
  console.log(result);
})()
  .catch(err => console.error(err))
  .finally(async () => await browser?.close())
;