Node.js

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>

我需要获取 link 和所有其他信息，即事件名称、流式传输时间和类型。因为我有一个 li 的列表，所以我决定使用 puppeteer 的 page.$$eval() 函数，但我不确定如何继续访问我需要的所有信息，因为有许多嵌套的 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 return 是一个 HTML 元素的数组，您可以遍历以更深入地研究每个 <li> 元素的 DOM .只需构建您想要 return 的对象的结构并使用 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)

输出：

[
  {
    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'
  }
]

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

Node.js - How to select nested HTML elements in Puppeteer using $$eval

javascript

puppeteer