获取所有无序列表元素及其文本 - puppeteer

Question

我正在尝试检索无序列表及其中的所有元素。 <ul> 有 <li> 的城市名称作为文本，我想得到这些城市。

await page
      .$eval(
        "body > div.page > div.container.account.cf > div.account-content > div.addressPage > div.addressCard.addAddressCard > div:nth-child(6) > ul",
        (ul) => {
          console.log(ul.innerHTML);
          for (let i = 0; i < ul.children.length; i++) {
            cityArray.push(ul.children[i].textContent);
          }
        }
      )
      .then((array) => console.log(array))
      .catch((err) => console.log(err));

当我尝试使用 console.log 时，什么都没有打印出来。

Answer 1

console.log 不起作用，因为 pageFunction 是在浏览器上下文中评估的，因此您需要注意浏览器中的控制台输出。

作为替代方案，您可以将内部 HTML 保存在函数外部并记录它：

const ulHtml = '';

await page.$eval(
    "body > div.page > div.container.account.cf > div.account-content > div.addressPage > div.addressCard.addAddressCard > div:nth-child(6) > ul",
    (ul) => {
        ulHtml = ul.innerHTML;
    }
);

关于您的标题问题：.innerHTML 没有返回 Array[]，因此您不能将其保存在这样的数组中。要获取包含每个 <li> 文本的数组，只需在 pageFunction 中循环它即可：

await page.$eval(
    "body > div.page > div.container.account.cf > div.account-content > div.addressPage > div.addressCard.addAddressCard > div:nth-child(6) > ul",
    (ul) => {
        const cityArray = [];

        for (let i = 0; i < ul.children.length; i++) {
            cityArray.push(ul.children[i].textContent);
        }

        return cityArray;
    }
).then((cityArray) => { console.log(cityArray) });