自定义函数未定义Puppeteer

Question

我做了这个自定义函数，并把它放在全局之外，这通常会工作。我也试着在主异步木偶函数中移动它，但也不起作用。这是一个简单的函数。在每个page evaluate函数中，我调用它并传递选择器。但是，它的说法没有定义和promise拒绝，这是奇怪的，因为函数不是promise....请帮助

const grabDomConvertNodlistToArray = (grabDomHtmlPath) => {
  // grabbing node list from html selector all
  const nList = document.querySelectorAll(grabDomHtmlPath);
  // converting nodelist to array to be returned
  const array = Array.from(nList);
  return array;
};

我尝试将函数转换为异步函数，添加了一个新的参数页。然后，我将async添加到我的评估函数中，然后将puppeteer页面作为参数传递，仍然出错且不起作用。

const grabDomConvertNodlistToArray = async (page, grabDomHtmlPath) => {
  try {
    // grabbing node list from html selector all
    const nList = await page.document.querySelectorAll(grabDomHtmlPath);
    // converting nodelist to array to be returned
    const array = Array.from(nList);
    return array;
  } catch (error) {
    console.log(error);
  }
};

在我的求值回调函数中添加了async，也就是async()=>{}。但是，当在上面的评估函数中调用我的自定义函数时，由于某种原因，它仍然不起作用。

找到了解决办法，但对我不起作用。我得到Array.foreach不是一个方法，它向我表明在我的grel腹convertnodlisttoArray函数中，它不抓取nodeList或将其转换为数组。如果是这样，那么forEach将是一个函数。

解决方案3

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(someURL);       

var functionToInject = function(){
    return 1+1;
}

var otherFunctionToInject = function(input){
    return 6
}

await page.exposeFunction("functionToInject", functionToInject)
await page.exposeFunction("otherFunctionToInject", otherFunctionToInject)

var data = await page.evaluate(async function(){
    console.log('woo I run inside a browser')
    return await functionToInject() + await otherFunctionToInject();
});

    return data

const grabDomConvertNodlistToArray = (grabDomHtmlPath) => {
    // grabbing node list from html selector all
    const nList = document.querySelectorAll(grabDomHtmlPath);
    // converting nodelist to array to be returned
    const array = Array.from(nList);
    return array;
  };

const rlData = async () => {
  const browser = await puppeteer.launch(
    {
      headless: true,
    },
    {
      args: ["--flag-switches-begin", "--disable-features=OutOfBlinkCors", "--flag-switches-end"],
    }
  );

const pageBodies = await browser.newPage();
  await pageBodies.goto("https://test.com/bodies", {
    waitUntil: "load",
  });

  const grabDomConvertNodlistToArray = (grabDomHtmlPath) => {
    // grabbing node list from html selector all
    const nList = document.querySelectorAll(grabDomHtmlPath);
    // converting nodelist to array to be returned
    const array = Array.from(nList);
    return array;
  };

  await pageBodies.exposeFunction("grabDomConvertNodlistToArray", grabDomConvertNodlistToArray);

  const rlBodyNames = await pageBodies.evaluate(async () => {
    // grabs all elements in html to make nodelist & converts it to an array
    const array = grabDomConvertNodlistToArray(".testbodies > div > h1");
    // push the data collected from array into data array and returned
    const data = [];
    array.forEach((element) => {
      data.push(element.textContent);
    });
    return data;
  });
}
rlData();

我放弃了让这个工作的尝试，决定只是这样做。是的，如果你有更多的页面要刮，它会使你的代码重复，所以你会多次使用相同的代码，这是我试图避免的，但是，puppeteer是更糟糕的重构你的代码，也许下一行，该软件包的开发人员将添加能力，轻松使用自定义函数，就像我尝试的那样。

const testNames = await pageBodies.evaluate(() => {
    const nodeList = document.querySelectorAll(".test > div h2");
    const array = Array.from(nodeList);
    const data = [];
    array.forEach((element) => {
      data.push(element.textContent);
    });
    return data;
  });

Answer 1

exposeFunction()不适合您的情况：公开的函数用于在浏览器和Node.js上下文之间传输数据，因此可以将其包装在代码中，这些代码对参数和返回的数据进行序列化和反序列化，一些不可序列化的数据（如DOM元素）可能会丢失。请尝试以下操作：

const rlData = async () => {
  const browser = await puppeteer.launch(
    {
      headless: true,
    },
    {
      args: ["--flag-switches-begin", "--disable-features=OutOfBlinkCors", "--flag-switches-end"],
    }
  );

  const pageBodies = await browser.newPage();

  await pageBodies.evaluateOnNewDocument(() => {
    window.grabDomConvertNodlistToArray = function grabDomConvertNodlistToArray(grabDomHtmlPath) {
      // grabbing node list from html selector all
      const nList = document.querySelectorAll(grabDomHtmlPath);
      // converting nodelist to array to be returned
      const array = Array.from(nList);
      return array;
    }
  });

  await pageBodies.goto("https://test.com/bodies", {
    waitUntil: "load",
  });

  const rlBodyNames = await pageBodies.evaluate(() => {
    // grabs all elements in html to make nodelist & converts it to an array
    const array = grabDomConvertNodlistToArray(".testbodies > div > h1");
    // push the data collected from array into data array and returned
    const data = [];
    array.forEach((element) => {
      data.push(element.textContent);
    });
    return data;
  });
}
rlData();