如何使用Puppeteer提取元素src属性中的链接？

别担心，我来帮你搞定这个问题！在Puppeteer里获取元素属性其实比取innerText更直接，下面给你几种常用的方法，附代码示例：

方法1：使用getProperty获取单个元素的src #

如果目标是单个img元素，你可以先定位到元素，再用getProperty方法获取它的src属性：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('你的目标页面URL');

  // 定位到目标img元素（这里用选择器，比如根据alt、class或者其他属性）
  const imgElement = await page.$('img[alt="enter image description here"]');
  // 获取src属性值
  const srcProperty = await imgElement.getProperty('src');
  const srcValue = await srcProperty.jsonValue();

  console.log('提取到的src链接:', srcValue);

  await browser.close();
})();

方法2：在evaluate函数中直接获取属性 #

另一种更简洁的方式是用page.evaluate，在浏览器上下文里直接操作DOM获取属性，这种方法也适合批量获取多个img的src：

单个元素的情况 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('你的目标页面URL');

  const srcValue = await page.evaluate(() => {
    // 这里用DOM选择器定位元素，和前端JS写法一样
    const img = document.querySelector('img[alt="enter image description here"]');
    return img ? img.src : null; // 做个判断避免元素不存在报错
  });

  console.log('提取到的src链接:', srcValue);

  await browser.close();
})();

批量获取多个img的src #

如果页面上有多个img需要提取，可以这样写：

const srcList = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('img')).map(img => img.src);
});
console.log('所有img的src列表:', srcList);

额外提示 #

• 如果你提取到的是相对路径（比如/images/xxx.png），可以用page.url()配合new URL()来转换成绝对路径：

  const absoluteSrc = await page.evaluate((baseUrl) => {
    const img = document.querySelector('img[alt="enter image description here"]');
    return img ? new URL(img.src, baseUrl).href : null;
  }, page.url());
  

• 确保你用的选择器能准确定位到目标元素，比如可以根据class、id或者其他属性来编写更精准的选择器，避免选到错误的元素。

内容的提问来源于stack exchange，提问作者Nicholas Jennings