能否通过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
相关产品推荐
相关产品推荐

