首页 > 解决方案 > 获取所有无序列表元素及其文本 - puppeteer

问题描述

我正在尝试检索无序列表及其中的所有元素。<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,什么都没有打印出来。

标签: javascriptnode.jspuppeteer

解决方案


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) });

推荐阅读