替换 Puppeteer 抓取结果中的缺失元素答案

【问题标题】：Replace missing element in Puppeteer scraping results替换 Puppeteer 抓取结果中的缺失元素
【发布时间】：2021-06-08 00:11:50
【问题描述】：

我使用脚本通过 Puppeteer 递归地抓取数据。它可以正常工作，但有时页面结构中缺少某个元素，此时脚本会崩溃。

我想设置一个条件以防元素丢失。我尝试了几种添加条件的方法，但都没有成功，比如使用 if/else 检查元素是否存在。这里有一个有趣的线程：Continue on Null Value of Result (Nodejs, Puppeteer) 但我无法在我的 Array.from 结构中复制解决方案。有没有办法做到这一点？欢迎任何开始的方向。

这是我查询元素的脚本部分：

  const results = await page.evaluate(() => 
          Array.from(document.querySelectorAll('article.main-wrap section'), value => ({
             name: value.querySelector('h1.title').innerText.trim(),
             frame: value.querySelector('ul li:nth-child(3)').innerText.trim(),
             // more elements to scrape
          }))
    );

当页面结构中缺少预期的元素时，我想替换键值对中的值，例如“null”。也许在 Array.from 中可能使用了某种三元语法，但我找不到任何东西。

【问题讨论】：

if(!results.length) {} 不会做这项工作吗？
恐怕不是因为每个页面废料都由大约 8 个查询（名称、框架、...）组成，而且有时会丢失其中的一两个，而不是整个数组。当然，如果我正确理解了您的建议。
frame : value.querySelector('ul li:nth-child(3)').innerText.trim() || 'NoFrame'; 怎么样？
不幸的是，我已经尝试过类似的解决方案，但仍然无法评估，并出现“无法读取属性 'innerText' of null”的错误。
value.querySelector('ul li:nth-child(3)') ? value.querySelector('ul li:nth-child(3)').innerText.trim() : 'foo'?

标签： javascript puppeteer

【解决方案1】：

您可以使用三元运算符来检查querySelector 是否返回真实值：

const results = await page.evaluate(() => 
    Array.from(document.querySelectorAll('article.main-wrap section'), value => ({
        name: value.querySelector('h1.title') 
            ? value.querySelector('h1.title').innerText.trim()
            : 'falsy value',
        frame: value.querySelector('ul li:nth-child(3)') 
            ? value.querySelector('ul li:nth-child(3)').innerText.trim()
            : 'falsy value',
    }))
);

【讨论】：