试图用 puppeteer 从网页中抓取链接答案

【问题标题】：Trying to scrape a link from webpage with puppeteer试图用 puppeteer 从网页中抓取链接
【发布时间】：2021-10-09 20:57:03
【问题描述】：

我不明白为什么我无法使用 puppeteer 从该页面检索 href 链接： PubChem.

我已经运行 Chrome 并检查了页面，并找到了所需的化学物质 Headline，并复制了如下所示的 Selector： #featured-results > div:nth-child(2) > div.box-shadow > div > div.p-md-rectangle.flex-container.flex-nowrap.width-100 > div.flex-grow-1.p-md-left > div.f-medium.p-sm-top.p-sm-bottom.f-1125 > a

然后我用 nodejs 运行了这个 JS 代码。

     const puppeteer = require('puppeteer')
     puppeteer.launch({ headless: true }).then(async browser => {
         const page = await browser.newPage()
         await page.goto('https://pubchem.ncbi.nlm.nih.gov/#query=MES')
     //    const cookies = await page.cookies()
     //    console.log(cookies)
         const links = await page.evaluate(() => [document.querySelectorAll('#featured-results > div:nth-child(2) > div.box-shadow > div > div.p-md-rectangle.flex-container.flex-nowrap.width-100 > div.flex-grow-1.p-md-left > div.f-medium.p-sm-top.p-sm-bottom.f-1125 > a')].map(link => link.href))
         links.forEach(link => console.log(link))
        
         await browser.close()
     })

但我的结果是 NULL。请问这里有人可以睁开眼睛吗？谢谢。

【问题讨论】：

你的 CSS 选择器太具体了。您不能依赖 html 树始终是完全相同的结构。您能告诉我们您要准确提取页面的哪一部分吗？
你试过page.waitForSelector吗？

标签： javascript node.js web-scraping puppeteer

【解决方案1】：

您需要等待元素出现。
您需要展开 (...) 以根据 querySelectorAll() 结果创建一个数组。

const puppeteer = require('puppeteer')
puppeteer.launch({ headless: true }).then(async browser => {
    const page = await browser.newPage()
    await page.goto('https://pubchem.ncbi.nlm.nih.gov/#query=MES')

    await page.waitForSelector('#featured-results > div:nth-child(2) > div.box-shadow > div > div.p-md-rectangle.flex-container.flex-nowrap.width-100 > div.flex-grow-1.p-md-left > div.f-medium.p-sm-top.p-sm-bottom.f-1125 > a')

    const links = await page.evaluate(
        () => [...document.querySelectorAll('#featured-results > div:nth-child(2) > div.box-shadow > div > div.p-md-rectangle.flex-container.flex-nowrap.width-100 > div.flex-grow-1.p-md-left > div.f-medium.p-sm-top.p-sm-bottom.f-1125 > a')]
                .map(link => link.href)
    )
    links.forEach(link => console.log(link))

    await browser.close()
})

【讨论】：