javascript - 如何使用 Puppeteer 解决和定位元素
问题描述
屏幕抓取问题
我正在尝试学习如何使用 querySelector 定位元素。
在这个使用 Puppeteer 的小型 NodeJS 屏幕抓取应用程序中,我想添加 Marketplace 上列出的项目的“位置”。
在我尝试添加这个新节点之前,脚本运行良好,它将输出以下内容:
[
{
itemTitle: 'Iphone 7 Unlocked 32GB Gold',
itemPrice: '$195',
itemURL: 'https://facebook.com//marketplace/item/1094335687596621/',
itemImg: 'https://scontent-mia3-1.xx.fbcdn.net/v/t1.0-0/c0.29.261.261a/p261x260/94707992_155656332613238_7356296336775315456_o.jpg?_nc_cat=108&_nc_sid=843cd7&_nc_oc=AQk4lXrzsGBkPFIWqx-sRgcDWuNd2kZlc1XJavKl0ZLJBcZZfaLFFUpZbSTTStFuT9U&_nc_ht=scontent-mia3-1.xx&oh=bc6f948b7c5930f1f81f85cbdf889ad5&oe=5ECEB781'
},
{
itemTitle: 'iPhone X 64gb Unlocked Everything Works',
itemPrice: '$180',
itemURL: 'https://facebook.com//marketplace/item/2576925735968131/',
itemImg: 'https://scontent-mia3-2.xx.fbcdn.net/v/t1.0-0/c0.83.750.750a/s261x260/84641729_222957132082738_3587337422137982976_o.jpg?_nc_cat=105&_nc_sid=843cd7&_nc_oc=AQmueUdOvX-NNTmxZOZp5gvyt-Szz9emk0it5HseboNA38BvQvKV0FT7mDwtqJo6z1g&_nc_ht=scontent-mia3-2.xx&oh=fbf3ffe04007566227eb76c608dd7fae&oe=5ECF5178'
}
]
上述结果的选择器
以下是用于获取这些结果的内容:
const itemTitle = item.querySelector('div > div > span > div > a > div > div > div > span > div > span > div[class="l9j0dhe7 stjgntxs ni8dbmo4"').innerText;
const itemPrice = item.querySelector('div > div > span > div > a > div > div > div > div > span[class="oi732d6d ik7dh3pa d2edcug0 qv66sw1b c1et5uql a8c37x1j s89635nw ew0dbk1b a5q79mjw g1cxx5fr lrazzd5p oo9gr5id"').innerText;
const itemURL = `https://facebook.com/${item.getAttribute('href')}`;
const itemImg = item.querySelector('div > div > span > div > a > div > div > div > div > div > div > img').getAttribute('src');
所以现在我想添加项目的位置:
所以我尝试在 Chrome 开发工具中检查元素和 COPY->XPATH,并得到了这个:
//*[@id="u_0_c"]/div/div[1]/div/div/div/div/div[2]/div/div[2]/div/div/div[1]/div/span/div/a/div/div[2]/div[3]/span/div/span
当我将其插入现有代码时......
var location = item.querySelectorAll('div[@id="u_0_c"]/div/div[1]/div/div/div/div/div[2]/div/div[2]/div/div/div[1]/div/span/div/a/div/div[2]/div[3]/span/div/span').innerText;
它打破了。各种错误。
我该怎么做呢?
这段代码不是我写的。选择器看起来非常复杂。我是否在使用 CHrome 的开发工具的正确轨道上?我究竟做错了什么??
整个来源
const puppeteer = require('puppeteer');
const getItems = async searchTerm => {
//{headless: false, defaultViewport: null} --> put this in launch() method below as parameter for developtment purposes --> opens up browser window
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null
});
const page = await browser.newPage();
/* Go to page */
await page.goto(`https://facebook.com/marketplace/search/?query=${encodeURI(searchTerm)}`);
const itemList = await page.waitForSelector('div > div > span > div > a[tabindex="0"]')
.then(() => page.evaluate(() => {
const itemArray = [];
const itemNodeList = document.querySelectorAll('div > div > span > div > a[tabindex="0"]');
itemNodeList.forEach(item => {
const itemTitle = item.querySelector('div > div > span > div > a > div > div > div > span > div > span > div[class="l9j0dhe7 stjgntxs ni8dbmo4"').innerText;
const itemPrice = item.querySelector('div > div > span > div > a > div > div > div > div > span[class="oi732d6d ik7dh3pa d2edcug0 qv66sw1b c1et5uql a8c37x1j s89635nw ew0dbk1b a5q79mjw g1cxx5fr lrazzd5p oo9gr5id"').innerText;
const itemURL = `https://facebook.com/${item.getAttribute('href')}`;
const itemImg = item.querySelector('div > div > span > div > a > div > div > div > div > div > div > img').getAttribute('src');
//var location = item.querySelectorAll('div[@id="u_0_c"]/div/div[1]/div/div/div/div/div[2]/div/div[2]/div/div/div[1]/div/span/div/a/div/div[2]/div[3]/span/div/span').innerText;
itemArray.push({
itemTitle,
itemPrice,
itemURL,
itemImg
});
});
return itemArray;
}))
.catch(() => console.log("Selector error."));
return itemList;
}
const initScraper = async () => {
const items = await getItems('iphone');
items.sort(function (a, b) {
return a.itemPrice - b.itemPrice
});
console.log(items);
}
initScraper();
感谢您的关注。任何帮助,将不胜感激。
解决方案
我认为这就是你要找的:
- 有没有办法在 Selenium WebDriver 中使用 JavaScript 通过 XPath 获取元素?
- https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript
基本上,如果你从chrome DevTools获取XPATH,你不能只使用querySelector,你需要使用该document.evaluate
函数。
最好的!
推荐阅读
- python - 为什么我的 Collatz 序列代码执行但显示错误?
- python - 如何使 Tkinter GUI 线程安全?
- c# - 模型绑定的复杂类型不能是抽象类型或值类型,并且必须具有无参数构造函数
- android - 将apk上传到Nexus,maven插件是唯一的方法吗?
- c# - 有没有一种方法可以获取锁 c# 的递归级别
- javascript - How to send addicional information along with ember Delete model request
- xamarin.forms - Xamarin iOS:如何使用标准阅读器打开 pdf 文件
- powershell - 调用可执行文件时重复的动态参数
- sql - My first question — Violation of PRIMARY KEY constraint
- python - 装饰器的类不能改变类变量