- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在 Puppeteer 上运行,全部更新。
预期的过程是访问网站,其中 url 是 url/{search item} 并运行搜索名称列表。然后对于每个搜索项 --> 搜索页面,获取每个列表的名称、价格和图像 url。现在出现错误,找不到选择器。感谢对此的任何帮助,非常感谢!
网站数据布局如下:
<div class="items-box-content">
<section class="items-box">
<a href="https://listingurl">
<figure class="items-box-photo">
<img data-src="https://imageurl.jpg" class=" lazyloaded" src="https://imageurl.jpg">
</figure>
<div class="items-box-main">
<h3 class="items-box-name"> listing name </h3>
<div class="items-box-figure">
<div class="items-price font-4"> $29.95 </div> // item's price
</h3>
</div>
我现在拥有的是(引发错误):
const puppeteer = require('puppeteer');
const searches = ["a", "b", "c"]; //appended to url
(async () => {
const browser = await puppeteer.launch({ headless: false });
let results =[];
for (const search of searches) {
try {
page = await browser.newPage();
await page.goto(`https://weburl/?keyword=${search}`);
await page.evaluate(() => { document.querySelector('div[class*="items-box"]').scrollIntoView();});
let elements = await page.$$('div[class*="items-box"]');
for (let element of elements) {
let listImg = await element.$eval(('img[class="items-box-photo]'), img => img.getAttribute('src'));
let listTitle = await element.$eval(('d[class="items-box-main"] > h[class="items-box-name"]'), node => node.innerText.trim());
let listPrice = await element.$eval(('d[class="items-box-figure"] > d[class="items-price"]'), node => node.innerText.trim());
let listUrl = await element.$eval(('d[class="items-box-content"] > a[class*="items-box"]'), node => node.getAttribute('href'));
results.push({
listImg,
listTitle,
listPrice,
listUrl
})
return results;
}
} finally {
await page.close
}
}
})();
抛出的错误是
(node:5168) UnhandledPromiseRejectionWarning: Error: Error: failed to find element matching selector "img[class="items-box-photo]"
最佳答案
我通过测试/调试更新了您的代码。
const puppeteer = require('puppeteer');
const searches = ["a"];
(async () => {
const browser = await puppeteer.launch({ headless: false });
function delay(timeout) {
return new Promise((resolve) => {
setTimeout(resolve, timeout);
});
}
let results = [];
for (const search of searches) {
try {
page = await browser.newPage();
await page.goto(`https:url/`);
await page.evaluate(() => { document.querySelector('section[class*="items-box"]').scrollIntoView(); });
let elements = await page.$$('section[class*="items-box"]');
console.log(elements.length)
console.log('wait 6 seconds')
await delay(6000);
for (let element of elements) {
// await delay(6000);
let listImg = await element.$eval(('img'), img => img.getAttribute('src'));
let listTitle = await element.$eval(('h3[class="items-box-name font-2"]'), node => node.innerText.trim());
let listPrice = await element.$eval(('div[class="items-box-price font-5"]'), node => node.innerText.trim());
let listUrl = await element.$eval(('div[class="items-box-content clearfix"] a'), node => node.getAttribute('href'));
results.push({
listImg,
listTitle,
listPrice,
listUrl
});
}
debugger;
} catch (error) {
console.log(error)
} finally {
//await page.close
await browser.close
}
}
console.log(results)
return results;
})();
<小时/>
更新内容:
1. for
循环中的返回结果
for(){
return result;
}
=>
for(){
}
return result;
querySelector
section[class*="items-box"]
img // There is only one img tags in "element"
h3[class="items-box-name font-2"] // removed outer 'element'
div[class="items-box-figure"] > div[class="items-price font-4"]
div[class="items-box-price font-5 // updated class name? on my side
items-box-price
div[class="items-box-content clearfix"] a
更新 sleep 持续时间 6 秒,这是相对网络速度(网络加载持续时间)。
尝试
捕获
终于
catch
帮助您处理下一步,尽管一步崩溃。
关于javascript - 错误: failed to find element matching selector for <img data-src="url>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55887523/
我正在尝试使用 jquery 获取图像 src,如下所示: HTML Javascript var imageSrc = $('.post_container img').attr('s
我遇到错误,无法完成构建。我搜索了 Stackoverflow 和 Github。我已经尝试了很多方法,但我无法修复。请帮忙。 (1) 在 [src/nullnull/debug, src/debug
我正在尝试使用图像制作一款类似 Match3 的游戏,但我无法进行比较。我正在为固定数量的 atm 执行此操作,只是为了让它正常工作,稍后应该在 foreach 循环中。如果有什么区别的话,该函数位于
我正在使用 jquery 插件 OwlCarousel,在我的一个 View 中使用 ng-repeat 场景,如下所示: 它运行良好,并为轮播中的每个项目输出以下标记: 有没
我的代码如下所示: Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.image1); int wi
如果未找到 src,我将使用 Angular 指令作为后备 url 作为名称首字母 指令 (function () { 'use strict'; angular .m
我是构建 chrome 扩展的新手,从一个小项目开始,我需要在弹出窗口中打印“构建版本”。构建版本被附加到 JS/CSS 资源中,如下所示: 需要从脚本 src 值中提取“6.0”。你能帮我看看如何
类型‘AbstractControl’上不存在属性‘Controls’。
这个tutorial演示如何使用指令 ngSrc 而不是 src : 他们要求: Replace the ng-src directive with a pl
我正在创建一个包含多个图像的图库,您可以在其中单击一个小缩略图,然后将打开该图像的更大版本。 打开后,如果您移动光标,图像将在 y 轴上跟随您。类似于 https://www.zara.com/es/
文档[] src.charAt src.length 这三样东西是什么? 我确定 pixState 会给我 1 或 0; var pixState = document[imgName].src.ch
问题背景: 我正在使用这个问题的解决方案:How to update AngularJS view when the value has not changed?所以在我看来我有: 当我更改照片时
我在 html 中有整个页面,在输出之前我想将所有 img src 替换为 data-src我正在使用 return (preg_replace('~]*\K(?=src)~i','data-',
Difference(s): android:src and tools:src? 如果有的话,什么时候使用 tools:src 而不是 android:src 是合适的? 最佳答案 如果您在运行时在
我需要检查每个 script 标签的 src 值,如果匹配,我想更改该脚本标签的 src 属性...像这样: var scripts = document.getElementsByTagName("
使用 img 标签的 data-src 或 src 属性有什么区别和后果(好的和坏的)?我可以使用两者获得相同的结果吗?如果是这样,应该什么时候使用它们? 最佳答案 属性 src 和 data-src
我使用 Vue。我尝试输出图像,当我使用 src 时效果很好,但当我使用 :src 时效果不佳。 作品 不起作用 我试过但没有用 @ 在路径的第一个。 ~ 路径中的第一个。 ./ 在路径的第一个。
在当前项目中我正在使用 jQuery。我只是想知道为什么会这样, $('#homeIcon').hover(function(){ document.getElementById('homeI
我在严格的 Java 环境中。 所以这个问题并不像标题中那么简单,我不是要解决我遇到的问题,它更理论化,以获得更好的知识。 我感兴趣的是用双引号或单引号匹配 src,但如果是双引号,它也必须用双引号结
我有一个 Joomla 2.5.28,现在使用 https 而不是 http。 一些文章(很多)包含来自 Vimeo 的嵌入视频。 最初,这些视频是使用http嵌入的,所以现在我的数据库中有字段int
我是一名优秀的程序员,十分优秀!