如何使用 Puppeteer 获取页数？答案

【问题标题】：How to get number of pages using Puppeteer?如何使用 Puppeteer 获取页数？
【发布时间】：2019-04-17 02:00:19
【问题描述】：

我是一名使用 Puppeteer 的爬行初学者。我成功爬取了以下站点。下面是从商城中提取特定产品名称的代码。

const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

(async () => {

    const width = 1600, height = 1040;

    const option = { headless: true, slowMo: true, args: [`--window-size=${width},${height}`] };

    const browser = await puppeteer.launch(option);
    const page = await browser.newPage();
    const vp = {width: width, height: height};
    await page.setViewport(vp);

    const navigationPromise = page.waitForNavigation();

    // 네이버 스토어팜
    await page.goto('https://shopping.naver.com/home/p/index.nhn');
    await navigationPromise;
    await page.waitFor(2000);

    const textBoxId = 'co_srh_input';
    await page.type('.' + textBoxId, '양말', {delay: 100});
    await page.keyboard.press('Enter');

    await page.waitFor(5000);
    await page.waitForSelector('ul.goods_list');
    await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});

    const result = await page.evaluate(() => {

        const data = [];

        $('ul.goods_list > li._itemSection').each(function () {

            const title = $.trim($(this).find('div.info > a.tit').text());
            const price = $(this).find('div.info > .price .num').text();
            const image = $(this).find('div.img_area img').attr('src');

            data.push({ title, price, image })

        });

        return data;

    });

    console.log(result);
    await browser.close();

})();

app.listen(3000, () => console.log("Express!!!"));

我有一个问题。如果我想从页数中获取信息，我应该怎么做？例如（1 页、2 页、3 页 ....）

【问题讨论】：

不是每个页面都有自己的网址吗？

标签： javascript node.js web-crawler google-chrome-devtools puppeteer

【解决方案1】：

由于默认情况下在该网站上显示多少页面的性质，这是一个困难的问题。但请耐心等待：我将向您展示您至少可以通过这个实现什么。

首先，您提供的网站在您可以循环浏览的项目列表下方一次列出 10 个页面。很抱歉，我不懂它的语言，所以我不知道在某个地方是否有显示更多页面的选项。因此，当您输入搜索文本时，它会显示如下：

但是，当您单击最后一个数字（数字 10）时，页面列表会更新为：

这使得查找总页数变得更加困难，因为没有“跳转”到最后一页的选项（随后也没有选项可以跳回第一页）。稍后我将向您展示另一个执行此操作的网站示例。

在您的情况下，我建议您使用一些简单的数学来确定要列出多少页。继续告诉puppeteer 会变得太复杂，例如，“继续单击最后一个可用的页码直到到达末尾”或类似的东西。但是我们可以通过执行几个简单的步骤来确定有多少页。

首先，您需要通过此元素获取搜索列表中返回的项目总数：

您可以通过执行以下代码来做到这一点：

const totalItems = await page.$eval('._productSet_total', (items) => {
  // Remove the characters before the total number, leaving only the number in isolation
  const child = items.querySelector('em');
  items.removeChild(child);

  // Now remove all commas from the total number
  let finalItems = items.textContent.trim();
  while(finalItems.indexOf(',') > -1) {
    finalItems = finalItems.replace(',', '').trim();
  }
  return finalItems;
});
console.log(totalItems); // Outputs 4337903 (or something similar)

所以现在你有了这个总数。下一步是确定每个页面上将显示多少项目。您可以通过计算当前页面上显示的项目数来做到这一点 - 如下：

const itemsPerPage = await page.$$eval('.goods_list li', (items) => {
  return items.length;
});
console.log(itemsPerPage); // Outputs 180 on my machine

现在您已经找到了找到的项目总数以及要在每个页面上显示的项目数。下一部分是您的简单数学运算，以确定列出所有这些项目需要多少页：

const pages = totalItems / itemsPerPage;
console.log(Math.ceil(pages));

就是这样！这是一个相当困难的例子，因为网站本身的设计很糟糕（实际上它应该始终有一条直接到第一页和/或最后一页的路线）。

例如，如果您在 Stack Overflow（这个非常棒的网站）中单击 puppeteer 标签，它将带您到：https://stackoverflow.com/questions/tagged/puppeteer

现在滚动到页面底部，您会看到如下内容：

这是确定在一个简单的步骤中列出多少页的理想选择，如下所示：

const lastPage = await page.$$eval('div[class*="pager"] > a > span[class*="page-numbers"]', (spans) => {
  return spans[spans.length - 2].textContent;
});
console.log(lastPage); // Outputs 78

希望这里有一些东西可以帮助您完成木偶学习之旅！

【讨论】：

这个答案很好！

【解决方案2】：

将属性 footerTemplate 与 displayHeaderFooter 一起用于最初使用 puppeteer API 的显示页面

await page.pdf({
  path: 'hacks.pdf',
  format: 'A4',
  displayHeaderFooter: true,
  footerTemplate: '<div><div class='pageNumber'></div> <div>/</div><div class='totalPages'></div></div>'
});

https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pagepdfoptions

// footerTemplate 用于打印页脚的 HTML 模板。

// 应该是具有以下 CSS 类 的有效 HTML 标记，用于将打印值注入其中：

// - 日期格式化打印日期

// - 标题文档标题

// - url 文档位置

// - pageNumber 当前页码

// - totalPages 文档中的总页数

【讨论】：

【解决方案3】：

  if (!this.browser) {
    this.browser = await puppeteer.launch(this.OPT)
    const pages: puppeteer.Page[] = await this.browser.pages()

    // close chromium by catching 'targetdestryed'
    this.browser.on('targetdestroyed', async () => {
      if (this.browser) {
        const pages: puppeteer.Page[] = await this.browser.pages()
        if (pages.length === 0) {
          process.exit(0)
        }
      }
    })
  }

上面是我用 Typescript 写的代码。您可以从browser.pages() 获取 Array of Page(=Tab) 而且 Puppeteer 第一次绝对有 1 个标签。

【讨论】：