如何從所有這些元素創建 CSV 文件？

Question

我正在嘗試從這兩個部分獲取文本並將其轉換為來自 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&nbsp;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 的新手，所以我不確定我是否做對了，任何幫助或指導將不勝感激。 謝謝！

Answer 1

我想你的頁面結構類似於這個

在這種情況下，您可以使用以下代碼：

// 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"));