Node.js - 如何使用 $$eval 在 Puppeteer 中嵌套 select 元素 HTML

Question

我正在使用 puppeteer 從網站上抓取內容。 我有這個 HTML 標記結構：

<li>
    <div class="kode_ticket_text">
      <h6>Tennis</h6>
    <div class="ticket_title">
      <h2>ATP</h2>
      <span>VS</span>
      <h2>Monte Carlo (Monaco), terra battuta</h2>
    </div>
      <p>11:00 AM</p>
    </div>                          
    <div class="ticket_btn">                                
      <a href="https://example.com/event-live">Guarda Gratis</a>
    </div>
</li>

我需要獲取鏈接和所有其他信息，即事件名稱、流式傳輸時間和類型。 因為我有一個li列表，所以我決定使用page.$$eval() function 的 puppeteer，但我不確定如何繼續訪問我需要的所有信息，因為有許多嵌套的 HTML 元素，我不認為我選擇了所有的li之后就可以訪問它了嗎？

這是我目前使用的 node.js 代碼

puppeteer.launch({
    headless: false
}).then(  async (browser) => {

    const page = await browser.newPage()
    const navigationPromise = page.waitForNavigation()

    await page.goto('https://example.com/')

    //await page.setViewport({ width: 1280, height: 607 })

    await page.waitForSelector('.form-content > .form-items > .form-button > a > .ibtn')
    await page.click('.form-content > .form-items > .form-button > a > .ibtn')

    await navigationPromise

    // await page.waitForSelector('.container > .row > .results-item > .kode_ticket_wraper > .container')
    // await page.click('.container > .row > .results-item > .kode_ticket_wraper > .container')

    // await page.waitForSelector('.container > .kode_ticket_list > li:nth-child(1) > .ticket_btn > a')
    // await page.click('.container > .kode_ticket_list > li:nth-child(1) > .ticket_btn > a')

    // await navigationPromise

    await page.waitForSelector('ul.kode_ticket_list > li')
    await page.$$eval('ul.kode_ticket_list > li', (el) => {
      // here I want to select all the li and if possible all the informations needed
    })

    await browser.close()

})

Answer 1

page.$$eval的 pageFunction 返回一個包含 HTML 個元素的數組，您可以對其進行迭代以更深入地了解每個<li>元素的 DOM。 只需構建要返回的 Object 的結構，並使用querySelector()訪問嵌套元素。

例如：

const data = await page.$$eval('ul.kode_ticket_list > li', listElems =>
  listElems.map(li => {
    return {
      link: li.querySelector('.ticket_btn > a').href,
      title: li.querySelector('.kode_ticket_text > h6').innerText,
      time: li.querySelector('.kode_ticket_text > p').innerText
    }
  })
)
console.log(data)

Output：

[
  {
    link: 'https://example.com/event-live-1',
    title: 'Tennis 1',
    time: '11:00 AM'
  },
  {
    link: 'https://example.com/event-live-2',
    title: 'Tennis 2',
    time: '9:00 AM'
  },
  {
    link: 'https://example.com/event-live-3',
    title: 'Tennis 3',
    time: '10:00 AM'
  }
]