如何使用Playwright获取J_ItemPic类img元素的src属性并生成数组

你的代码返回空数组的核心原因是选择器逻辑有误。
从你控制台返回的元素结构img#J_Itemlist_Pic_xxx.J_ItemPic.img可以看出，目标img元素自身就携带了J_ItemPic类，但你使用的.J_ItemPic img[src]选择器，匹配规则是「父元素带有J_ItemPic类、自身带有src属性的img子元素」，和实际元素结构不匹配，所以找不到任何元素。

正确实现代码 #

// 选择自身带有J_ItemPic类、且存在src属性的img元素
const imgSrcList = await page.$$eval('img.J_ItemPic[src]', imgs => imgs.map(img => img.src));
console.log(imgSrcList);

常见异常场景排查 #

如果执行后还是拿不到结果，可以对应排查以下两种情况：

• 图片为懒加载实现：src属性值会在图片进入可视区后才赋值，初始属性可能是data-src/data-original这类自定义字段，修改代码取对应属性即可：

  const imgSrcList = await page.$$eval('img.J_ItemPic', imgs => imgs.map(img => img.getAttribute('data-src')));
  

• 执行代码时元素还未渲染完成：可以先添加等待逻辑，确认元素挂载到DOM后再执行提取：

  // 等待第一个目标img元素挂载到DOM
  await page.waitForSelector('img.J_ItemPic', { state: 'attached' });
  const imgSrcList = await page.$$eval('img.J_ItemPic[src]', imgs => imgs.map(img => img.src));
  console.log(imgSrcList);
  

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