使用Puppeteer从网页表格提取图片src的问题求助

嘿，我看你在尝试用Puppeteer爬取汽车补漆网站的表格数据，目前已经能拿到颜色代码和描述，但卡在提取图片src上了对吧？我帮你梳理下代码里的问题，给你调整后的方案～

问题出在哪？ #

1. 选择器层级错误：你写的tr:nth-child(${i}) > tr:nth-child(2)明显有问题——HTML里<tr>标签是不能直接嵌套<tr>的，应该是<tr>下面包含<td>，你这里把层级写错了，导致找不到图片元素。
2. 获取属性的方式错了：图片的src是元素的属性，不是文本内容，你用el.innerText肯定拿不到值，应该用el.src或者el.getAttribute('src')来获取。

修正后的代码 #

我帮你调整了选择器，并且优化了代码逻辑（用$$eval一次性处理所有行，比循环调用更高效）：

puppeteer.launch({
  headless: false
}).then(async function (browser) {
  const page = await browser.newPage()
  await page.goto('https://www.automotivetouchup.com/touch-up-paint/alfa-romeo/2024/all-models/')

  class dataItem {
    constructor(chip, colorCode, colorDescription) {
      this.chip = chip
      this.colorCode = colorCode
      this.colorDescription = colorDescription
    }
  }

  // 直接用$$eval批量处理所有行，不用循环逐个获取
  const dataReturn = await page.$$eval('div > table > tbody > tr', rows => {
    return rows.map(row => {
      // 获取当前行的td元素
      const tds = row.querySelectorAll('td')
      // 提取图片src：第一个td里的img元素，用可选链防止无图报错
      const chipSrc = tds[0].querySelector('img')?.src || '无图片链接'
      // 颜色代码是第二个td的文本，trim去除多余空格
      const colorCode = tds[1].innerText.trim()
      // 颜色描述是第三个td的文本
      const colorDescription = tds[2].innerText.trim()
      return new dataItem(chipSrc, colorCode, colorDescription)
    })
  })

  console.log(dataReturn)
  await browser.close()
})

额外说明 #

• 用?.可选链操作符是为了防止某些行没有图片时报错，给个默认值兜底；
• trim()用来去除文本前后的空格，让数据更干净；
• 用$$eval一次性处理所有行，减少了多次和浏览器通信的开销，比原来的循环更高效。

备注：内容来源于stack exchange，提问作者3smark