title: existing attribute selected by Cheerio sometimes return undefined (get HTML with Puppeteer)
body: <p>I use Puppeteer to get website HTML and then scrape data with Cheerio. Here is part of my code. It works fine almost every time, but sometimes I get undefined from companyAddress and companyIntro. In the beginning, I thought it may be due to the differences of different pages, but it happens even when I scraped the same page at different times (most of time I get the data but sometimes it is undefined). The page is rendered successfully, and the attributes and their value are confirmed to exist via devtool. I wonder the reason behind it. Could it be the problem of Puppeteer during fetching? Cheerio code is synchronous, so I don't think Cheerio is the problem. I never get error: cannot get attr('profile') of undefined, so it means there is a header element, but I get error: substring() of undefined. That is why I put a condition before it to check.</p>
  <pre><code>const puppeteer = require('puppeteer')
  const cheerio = require('cheerio')
  const baseUrl = 'https://www.104.com.tw'
  
  const sleep = (milisecond) =&gt; {
    return new Promise((resolve, reject) =&gt; setTimeout(resolve, milisecond))
  }
  
  const scrapeCompanyPage = async (dataList, page) =&gt; {
    for (let i = 0; i &lt; 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
  }
  </code></pre>
  <p>The website this section of code scrapes is this: <a href="https://www.104.com.tw/company/1a2x6bk72b?jobsource=2018indexpoc" rel="nofollow noreferrer">https://www.104.com.tw/company/1a2x6bk72b?jobsource=2018indexpoc</a>
  The content is different for different companyUrl, but the structure is the same.</p>
  <p>The below is the HTML tag I want to select.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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=""
          &gt;...&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>