javascript - 如何从所有这些元素创建 CSV 文件?
问题描述
我正在尝试从这两个部分获取文本并将其转换为 puppeteer 的 CSV 列表:
货号:(货号 1055688)
价格:(16.59 美元)
这是我尝试过的,但似乎无法找到 SKU,例如:
let elements = await.self.page.$$('div[class="row item-row"]');
for (let element of elements) {
let sku = await element.$eval(('div[class="body-copy custom-body-
copy"]'), node => node.innerText.trim());
}
这是我试图从中提取数据的代码:
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-8 col-xs-6">
<div class="product_desc_txt">
<a href=" https://www.costcobusinessdelivery.com/.product.1055688.html
" class="body-copy-link">
Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct
</a>
<div class="body-copy custom-body-copy">
Item 1055688
</div>
<div class="margin_tp_10"></div>
<div class="body-copy hidden visible-md visible-sm visible-xs
visible-lg">
<span data-wishlist-linkfee="false" > $16.59</span>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 body-copy text-right hidden visible-xl ">
<span data-wishlist-linkfee="false" > $16.59</span>
</div>
到目前为止,这是我的代码:
const puppeteer = require("puppeteer-extra")
const pluginStealth = require("puppeteer-extra-plugin-stealth")
puppeteer.use(pluginStealth())
puppeteer.launch({ headless: false }).then(async browser => {
const page = await browser.newPage()
await page.setViewport({ width: 1920, height: 1080 })
await page.goto("https://www.costcobusinessdelivery.com")
await page.waitFor(5000);
await page.waitForSelector("#header_sign_in");
await page.click("#header_sign_in");
await page.waitForSelector("#logonId");
await page.type('#logonId', 'username', {delay: 20});
await page.type('#logonPassword_id', 'password', {delay: 20});
await page.type('#deliveryZipCode', 'zipcode', {delay: 20});
await page.click('#sign_in_button');
await page.waitForSelector('body > div.bd-specific > div > div > div > div > div > ul > li.set-zip-code.left-lg.colo-md-5.zipped > ul > li:nth-child(1) > a');
await page.click('body > div.bd-specific > div > div > div > div > div > ul > li.set-zip-code.left-lg.colo-md-5.zipped > ul > li:nth-child(1) > a');
await page.waitForSelector('#tiles-body-attribute > div:nth-child(2) > div.myaccount-lists > div > div:nth-child(2) > div > span > h5 > a');
await page.click('#tiles-body-attribute > div:nth-child(2) > div.myaccount-lists > div > div:nth-child(2) > div > span > h5 > a');
我是 puppeteer 的新手,所以我不确定我是否做得对,任何帮助或指导将不胜感激。谢谢!
解决方案
我想你的页面结构类似于这个
在这种情况下,您可以使用以下代码:
// Find product descriptions
const csv = await page.$$eval('.product_desc_txt', function(products){
// Iterate over product descriptions
let csvLines = products.map(function(product){
// Inside of each product find product SKU and its price
let productId = product.querySelector(".custom-body-copy").innerText.trim();
let productPrice = product.querySelector("span[data-wishlist-linkfee]").innerText.trim();
// Fomrat them as a csv line
return `${productId};${productPrice}`
})
// Join all lines into one file
return csvLines.join("\n");
});
这段带有链接 HTML 结构的代码产生了这样的结果:
项目 1055688;$16.59
项目 1055688;$16.59
项目 1055688;$16.59
项目 1055688;$16.59
用箭头函数重写它的更紧凑的方法如下(尽管我认为它不是很易读)
const csv = await page.$$eval('.product_desc_txt', products => products.map(product => product.querySelector(".custom-body-copy").innerText.trim() + ";" + product.querySelector("span[data-wishlist-linkfee]").innerText.trim()).join("\n"));
推荐阅读
- windows-10 - Windows 10 更新和 BSOD 后 signtool.exe 失败
- python - 如何有效地将 Python 代码嵌入 Django
- c++ - 在 C++ 中编写由缩进分隔的列文件文本
- r - 将文本标签放在箱线图 ggplot2 的顶部
- javascript - 如何使用 JavaScript 或 Jquery 删除输入文本上的所有内联脚本或 html 注入
- laravel - laravel livewire 数据未以模态显示
- makefile - 在项目的makefile中包含cpputest
- google-chrome - 烧瓶会话没有持续
- xslt - 使用 xslt 识别 xml 文件中的重复元素
- reactjs - 为什么 componentDidUpdate 参数 preState 或 prevProps 不给出引用错误?