javascript - Cheerio 选择的现有属性有时会返回未定义(使用 Puppeteer 获取 HTML)

Question

我使用 Puppeteer 获取网站 HTML，然后使用 Cheerio 抓取数据。这是我的代码的一部分。它几乎每次都工作正常，但有时我从 companyAddress 和 companyIntro 中得到 undefined。一开始，我认为可能是不同页面的差异，但即使我在不​​同时间抓取同一页面也会发生这种情况(大多数时候我得到了数据，但有时它是未定义的)。页面渲染成功，通过devtool确认属性及其值存在。我想知道这背后的原因。会不会是Puppeteer在fetching时的问题？ Cheerio 代码是同步的，所以我不认为 Cheerio 是问题所在。我从来没有得到错误:无法获得未定义的 attr('profile')，所以这意味着有一个标题元素，但我得到错误:未定义的 substring()。这就是为什么我在它之前放了一个条件来检查。

const puppeteer = require('puppeteer')
const cheerio = require('cheerio')
const baseUrl = 'https://www.104.com.tw'

const sleep = (milisecond) => {
  return new Promise((resolve, reject) => setTimeout(resolve, milisecond))
}

const scrapeCompanyPage = async (dataList, page) => {
  for (let i = 0; i < dataList.length; i++) {
    await page.goto(dataList[i].companyUrl)
    const html = await page.content()
    const $ = cheerio.load(html)
    const header = $('div.header')
    //sometimes company data below is undefined, but header exists
    dataList[i].companyAddress = header.attr('address') ? header.attr('address') : null
    dataList[i].companyIntro = header.attr('profile') ? header.attr('profile').substring(0, 50) : null 
    await sleep(1000)
  }
  return dataList
}

这段代码抓取的网站是这样的:https://www.104.com.tw/company/1a2x6bk72b?jobsource=2018indexpoccompanyUrl不同，内容不同，但结构是一样的。

下面是我要选择的HTML标签。

<div data-v-690c5d70="" data-v-09405bf2="" class="header mb-4" productpictures="" custno="13000000010336" industrydesc="..." indcat="..." empno="30" capital="80" address="..." custlink="https://unnotech.com"profile="..." management="..." phone="..." fax="..." hrname="HR" lat="25.0755569" lon="121.5756586" news="" newslink="" linkmore="[object Object]" corpimage1="" corpimage3="" corplink2="" corplink1="" corplink3="" envpictures="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" historys="" addrnodesc="..." reporturl="//www.104.com.tw/question_admin/reaction.cfm? j=5070426e34463e6730323a632c2e365f2444a42252525256a47682e2987j48" postalcode=""
        >...</div>

Answer 1

按Ctrl-U，你会看到主要内容的源代码是空的。该网站可能由 React、Vue 或其他 Javascript 库来渲染。所以你需要等待元素出现。

但是如果我在 Developer Tools > Network tab > XHR Filter 中检查网站，重新加载页面，你会看到他们的 API调用以获取这些元数据，例如地址、个人资料等...您可能不需要抓取 html。