How to use Axios inside page.evaluate - Error: Evaluation failed: ReferenceError: Axios is not defined

Hi Team,

I am trying to downalod file behind Site Logins with Axios, does not work. I am getting Error: Evaluation failed: ReferenceError: Axios is not defined.

const { chromium} = require("playwright");
const fs = require("fs");
const Axios = require("axios");
....
....
....
for (let val of listings) {
    const downloadUrl = val.URL;
    const name = val.Filename;


    const downloadedContent = await page.evaluate(async (downloadUrl) => {
      const response = await Axios({
        url: downloadUrl,
        method: "GET",
        headers: {
          "Upgrade-Insecure-Requests": "1",
          "User-Agent":
            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
      Chrome/80.0.3987.163 Safari/537.36",
          "Sec-Fetch-Dest": "document",
          Accept:
            "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
        },
        withCredentials: true,
      });


      return response.data;

    }, downloadUrl);

    fs.writeFile(`./${name}`, downloadedContent, () =>
      console.log("Wrote file")
    );

I have another function - fetch . This function works inside page.evaluate, can download and save file (also behind Site Logins because of { credentials: “include” } ) -> Problem is files are corrupt. I do not why. I am not able to open file. For CSV it works.

const { chromium} = require("playwright");
const fs = require("fs");
.....
.....
const downloadedContent = await page.evaluate(async (downloadUrl) => {
    const fetchResp = await fetch(downloadUrl, { credentials: "include" });
    return await fetchResp.text();
  }, downloadUrl);

  fs.writeFile(`./${name}`, downloadedContent, () =>
  console.log("Wrote file")

I tryed also to call external function :

const { chromium, webkit } = require("playwright");
const fs = require("fs");
const Axios = require("axios");
const download_function = require("./download_function");
 ....
....
 ....
for (let val of listings) {
     const downloadUrl = val.URL;
    const name = val.Filename;
 
 const downloadedContent = await page.evaluate(
       async (Filename, downloadUrl) => {
         const downloadfile = await download_function.downloadFileAxios(
           name,
           downloadUrl
         );
       },
       name,
       downloadUrl
     );

and in external function i have:

const fs = require("fs");
const Path = require("path");
const Axios = require("axios");

async function downloadFileAxios(Filename, URL) {
  const url = `${URL}`;
  const path = Path.resolve(__dirname, "images", `${Filename}`);
  const writer = fs.createWriteStream(path);

  const response = await Axios({
    url,
    method: "GET",
    headers: {
      "Upgrade-Insecure-Requests": "1",
      "User-Agent":
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36",
      "Sec-Fetch-Dest": "document",
      Accept:
        "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
    },
    responseType: "stream",
    withCredentials: true,
  });

  response.data.pipe(writer);

  return new Promise((resolve, reject) => {
    writer.on("finish", resolve);
    writer.on("error", reject);
  });
}
exports.downloadFileAxios = downloadFileAxios;

how can i call axios inside page.evaluate with param: withCredentials: true and download files behind login page?

Thanks in advance for your help.

[mxschmitt]

Hey, basically the evaluation functions work only with JavaScript which is directly inside of the passed function. (Under the hood it basically uses toString()).

So if you try to call external functions, imports/require statements, it does not work.

Regarding your axios question, here is some example maybe it helps: https://try.playwright.tech/?s=gvdfa

[osmenia]

hi Team,

tnx a lot!