You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否通过XPath获取img标签srcset属性中浏览器实际渲染的资源链接

问题描述

现有img标签示例如下:

<img class="lazyautosizes lazyloaded" src="//cdn.shopify.com/s/files/1/0332/0178/2916/products/trm044_150x150.png?v=1583128930"
data-srcset="//cdn.shopify.com/s/files/1/0332/0178/2916/products/trm044_180x.png?v=1583128930 180w, //cdn.shopify.com/s/files/1/0332/0178/2916/products/trm044_240x.png?v=1583128930 240w, //cdn.shopify.com/s/files/1/0332/0178/2916/products/trm044_360x.png?v=1583128930 360w" 
srcset="//cdn.shopify.com/s/files/1/0332/0178/2916/products/trm044_180x.png?v=1583128930 180w, //cdn.shopify.com/s/files/1/0332/0178/2916/products/trm044_240x.png?v=1583128930 240w, //cdn.shopify.com/s/files/1/0332/0178/2916/products/trm044_360x.png?v=1583128930 360w">

需求为从该img标签的srcset属性中获取浏览器当前实际渲染的资源链接,src属性的值并非实际渲染资源。
当前在Puppeteer中使用的通用XPath调用逻辑如下,不希望针对该场景编写额外专用逻辑:

const getXpathElement = await page.$x(xpath)
const promises = getXpathElement.map((element) => page.evaluate(el => {
                    return el.textContent
                 }, element));

提问:是否存在可以直接实现该需求的XPath写法?


解答
  • 不存在能直接实现该需求的XPath写法。XPath仅支持查询DOM节点的静态内容、属性值,无法识别浏览器根据视口尺寸、设备像素比等动态参数从srcset中选中的渲染资源,这个动态选择结果不会存储在DOM的静态属性中。
  • 不需要额外编写专用逻辑,仅需要微调evaluate回调的返回值即可。img元素原生提供了currentSrc属性,会直接返回浏览器当前实际加载渲染的图片地址,同时兼容src和srcset两种场景。
    调整后的代码如下:
const getXpathElement = await page.$x(xpath)
const promises = getXpathElement.map((element) => page.evaluate(el => {
                    return el.currentSrc
                 }, element));

内容的提问来源于stack exchange,提问作者Anurag

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.07 01:15:02