木偶师:打开一个页面，获取数据，回到上一页，进入一个新页面获取数据

Question

从 1 页获取数据很简单，但是从第一页获取数据后如何返回，进入新页面，从该页面获取数据.. 等等。我正在尝试在网站上执行此操作 http://books.toscrape.com/。

因此，我选择打印库存中的书籍数量，因为只有输入链接才能访问它。例如，如果您运行代码，您将获得： { stock: 'In stock (22 available)' }

现在，我希望返回原始页面，输入第二个链接并获取与上一个相同的信息。等等..

如何使用vanilla JavaScript来完成此操作？

const puppeteer = require('puppeteer');
let scrape = async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('http://books.toscrape.com/');
    await page.click('#default > div > div > div > div > section > div:nth-child(2) > ol > li:nth-child(1) > article > div.image_container > a > img');
    await page.waitFor(1000);
    const result = await page.evaluate(() => {
        let stock = document.querySelector('#content_inner > article > table > tbody > tr:nth-child(6) > td').innerText;
        return {
            stock
        }
    });
    browser.close();
    return result;
};
scrape().then((value) => {
    console.log(value); // Success!
});

Answer 1

解释

您需要做的是在任务完成后调用page.goBack()返回一页，然后单击下一个元素。为此，您应该使用 page.$$ 来获取可点击元素的列表，并使用循环逐个单步跳过它们。然后，您可以重新运行脚本以提取下一页的相同信息。

法典

我调整了您的代码，以便在控制台中为下面的每个页面打印出您想要的结果。请注意，我更改了您问题的选择器，以删除选择所有可点击元素:nth-child(1)。

const puppeteer = require('puppeteer');
const elementsToClickSelector = '#default > div > div > div > div > section > div:nth-child(2) > ol > li > article > div.image_container > a > img';
let scrape = async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('http://books.toscrape.com/');
    // get all elements to be clicked
    let elementsToClick = await page.$$(elementsToClickSelector);
    console.log(`Elements to click: ${elementsToClick.length}`);
    for (let i = 0; i < elementsToClick.length; i++) {
        // click element
        elementsToClick[i].click();
        await page.waitFor(1000);
        // generate result for the current page
        const result = await page.evaluate(() => {
            let stock = document.querySelector('#content_inner > article > table > tbody > tr:nth-child(6) > td').innerText;
            return { stock };
        });
        console.log(result); // do something with the result here...
        // go back one page and repopulate the elements
        await page.goBack();
        elementsToClick = await page.$$(elementsToClickSelector);
    }
    browser.close();
};
scrape();