Javascript page.evaluate和page.$的不同行为，带有后续功能

我有一个我加载的页面。以下

页面。$eval（）

代码有效：

const productName = await page.$eval('h1[role="main"]', el =>
    [].reduce.call(
      el.childNodes,
      (a, b) =>
        a +
        (b.nodeType === 3
          ? b.textContent
              .replace(/[\r\n]+/gm, "")
              .replace(/\s+/g, " ")
              .trim()
          : ""),
      ""
    )
  );

我所说的works是指它返回预期的产品名称。我在main函数中运行它

现在，我想将代码外包给原始上下文之外的自己的函数（以便重用）

我调用main函数中的函数，如下所示：

  const productName = await page
    .$('h1[role="main"]')
    .then(el => getProductNameFromSelector(el))
    .catch(err => console.log("failure product name", err));

const getProductNameFromSelector = async el =>
  el
    .evaluate(
      el,
      [].reduce.call(
        el.childNodes,
        (a, b) =>
          a +
          (b.nodeType === 3
            ? b.textContent
                .replace(/[\r\n]+/gm, "")
                .replace(/\s+/g, " ")
                .trim()
            : ""),
        ""
      )
    )
    .then(result => result)
    .catch(err => console.log("error in function", err, el));

外包功能如下所示：

  const productName = await page
    .$('h1[role="main"]')
    .then(el => getProductNameFromSelector(el))
    .catch(err => console.log("failure product name", err));

const getProductNameFromSelector = async el =>
  el
    .evaluate(
      el,
      [].reduce.call(
        el.childNodes,
        (a, b) =>
          a +
          (b.nodeType === 3
            ? b.textContent
                .replace(/[\r\n]+/gm, "")
                .replace(/\s+/g, " ")
                .trim()
            : ""),
        ""
      )
    )
    .then(result => result)
    .catch(err => console.log("error in function", err, el));

它遇到以下错误：

failure product name TypeError: Cannot read property 'evaluate' of null
    at reduce (<anonymous>)
    at getProductNameFromSelector (pathToFile.js:395:17)
    at page.$.then.el (pathToFile.js:119:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

失败产品名称TypeError:无法读取null的属性“evaluate”
在reduce（）
在getProductNameFromSelector上（pathToFile.js:395:17）
在第$.then.el页（pathToFile.js:119:21）
在进程中。_tick回调（内部/process/next_tick.js:68:7）

---

我应该从

page.$（'h1[role=“main”]”）收到
ElementHandle
。它表示
未定义
。
函数需要将
el
元素作为参数

const getProductNameFromSelector = async el =>
  el
    .evaluate(el =>  //HERE
      [].reduce.call(
        el.childNodes,
        (a, b) =>
          a +
          (b.nodeType === 3
            ? b.textContent
                .replace(/[\r\n]+/gm, "")
                .replace(/\s+/g, " ")
                .trim()
            : ""),
        ""
      )
    )
    .then(result => result)
    .catch(err => console.log("error in function", err, el));

您也可以等待选择器：

const productName=Wait页面
.waitForSelector（'h1[role=“main”]”）
。然后（el=>getProductNameFromSelector（el））
.catch（err=>console.log（“故障产品名称”，err））；
首先，谢谢。我尝试过并更改了它，但我收到了一个类似的错误
失败product name TypeError:无法读取null的属性“evaluate”
。将更改添加到主要问题中，因为我仍然收到错误。复制代码时一定犯了另一个错误，因为它与原始函数一起工作（即
$）
也不
等待选择器
）。对此表示歉意，并非常感谢您的帮助！