How to load script in puppeteer?

Question

I'm trying to load axios in chromium using puppeteer, the code is as follows:

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/[email protected]/dist/axios.min.js');
    document.head.appendChild(script);
    var r = await axios.get('https://httpbin.org/get')
    console.log(r)
  })
})()

But when I try to execute axios.get it returns Evaluation failed: ReferenceError: axios is not defined. What's the issue here?

Vaviloff · Accepted Answer · 2020-12-19 07:11:11Z

8

Use page.addScriptTag for this:

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

await page.addScriptTag({ url: 'https://unpkg.com/[email protected]/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
});

answered Dec 19, 2020 at 7:11

Vaviloff

16.9k6 gold badges55 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucio Mollinedo · Accepted Answer · 2023-04-12 18:59:57Z

In my case, I was trying to load a local script before loading a local HTML template.

I did not want to embed the script code into the HTML template since the HTML template was already too big.

The following code and the local js file with the script code (scriptCode.js) were in the same directory (hence the use of __dirname):

const path = require("path");
// ...
const page = await browser.newPage();
await page.addScriptTag({path: path.join(__dirname, 'scriptCode.js')})
await page.setContent(html);

If you have axios in a local folder, you have to point to the path where you've downloaded it.

But if you still want to download it off its CDN every time, instead of using the path option, the answer provided by Vaviloff is the perfect one.

Documentation:

ggorlen · Accepted Answer · 2024-11-24 00:52:36Z

page.addScriptTag is useful in the common case, but if you have reason to do this manually in the browser context as OP is attempting, the missing piece is setting a script.onload function to only run code from the script (like axios.get) after it's loaded.

If you want to return data from the onload function back to Node, then you can use a promise as follows:

const puppeteer = require("puppeteer"); // ^23.6.0

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  const result = await page.evaluate(async () => {
    const script = document.createElement("script");
    const result = new Promise(resolve =>
      script.onload = () => 
        resolve(axios.get("https://httpbin.org/get"))
    );
    const url = "https://unpkg.com/[email protected]/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(() => browser?.close());

Collectives™ on Stack Overflow

How to load script in puppeteer?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related