当前位置: 主页>网站教程>JS教程> 使用Node.js+Chrome+Puppeteer实现网站的爬取

分享文章到：

使用Node.js+Chrome+Puppeteer实现网站的爬取

发布时间：09/01 来源：未知浏览：关键词：

我们将学到什么？

在本教程中，您将学习怎样使用 JavaScript 主动化和清算 web 。要做到这一点，我们将使用 Puppeteer 。Puppeteer是一个同意我们操纵无头Chrome 的 Node 库 API。Headless Chrome是一种在不真实运转 Chrome 的状况下运转 Chrome 阅读器的办法。

假如这一切都没成心义，您真正需要知道的是，我们将编写 JavaScript 代码，使 Google Chrome 实现主动化。

开端此前

开端此前，您需要在运算机上安置 Node 8+。您可以在此处停止安置。确保选中「当前」版本 8+ 版本。

假如您之前从未使用过 Node 并想学习，请查看：学习 Node JS 3 种最好在线 Node JS 课程。

安置完 Node 后，创立一个新的项目文件夹并安置 Puppeteer。 Puppeteer 附带了 Chromium 的最新版本，该版本可以与 API 一起使用：

npm install --save puppeteer

例 #1 — 截图

安置完 Puppeteer 之后，我们将第一介绍一个简便的示例。此示例来自Puppeteer 文档(停止了少量更换)。我们将通过代码逐渐介绍对您拜访的网站怎样截图。

第一，创立一个名为test.js的文件，然后复制以下代码：

const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

让我们逐行阅读这个例子。

第1行： 我们需要我们先前安置的 Puppeteer 依靠项
第3-10行：这是我们的主函数getPic()。该函数将留存我们所有的主动化代码。
第12行：在第12行上，我们调取getPic()函数。

需要留意的是，getPic()函数是一个异步函数，并利用了新的ES 2017async/await功效。由于这个函数是异步的，所以当调取时它返回一个Promise。当Async函数终究返回值时，Promise将被解析(假如存在错误，则Reject)。

由于我们使用的是async函数，因此我们可以使用await表达式，该表达式将暂停函数施行并等候Promise解析后再连续。 假如此刻所有这些都没成心义，那也不妨。随着我们连续学习教程，它将变得愈加清楚。

此刻，我们概述了主函数，让我们深入理解其内部功效：

第4行：

const browser = await puppeteer.launch();

这是我们实际启动 puppeteer 的地方。实际上，我们正在启动 Chrome 实例，并将其设定为等于我们新创立的browser变量。由于我们使用了await关键字，因此该函数将在此处暂停，直到Promise解析(直到我们成功创立 Chrome 实例或出错)为止。

第5行：

const page = await browser.newPage();

在这里，我们在主动阅读器中创立一个新页面。我们等候新页面翻开并将其留存到我们的page变量中。

第6行：

await page.goto('https://google.com');

使用我们在代码的最后一行中创立的page，此刻可以告诉page导航到URL。在此示例中，导航到 google。我们的代码将暂停，直到页面加载完毕。

第7行：

await page.screenshot({path: 'google.png'});

此刻，我们告诉 Puppeteer 截取当前页面的屏幕。screenshot()办法将自定义的.png屏幕截图的留存位置的对象作为参数。一样，我们使用了await关键字，因此在施行操纵时我们的代码会暂停。

第9行：

await browser.close();

最后，我们到了getPic()函数的结尾，并且关闭了browser。

运转示例

您可以使用 Node 运转上面的示例代码：

node test.js

这是生成的屏幕截图：

太棒了！为了增添乐趣(并简化调试)，我们可以不以无头方式运转代码。

这到底是啥意思？本人尝试一下，看看吧。更换代码的第4行从：

const browser = await puppeteer.launch();

改为:

const browser = await puppeteer.launch({headless: false});

然后使用 Node 再次运转：

node test.js

太酷了吧？当我们使用{headless：false}运转时，您可以真实看到 Google Chrome 依照您的代码工作。

在连续此前，我们将对这段代码做最后一件事。还记得我们的屏幕截图有点偏离中心吗？那是由于我们的页面有点小。我们可以通过增加以下代码行来更换页面的大小：

await page.setViewport({width: 1000, height: 500})

这个屏幕截图更好看点：

这是本示例的终究代码：

const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.setViewport({width: 1000, height: 500})
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

示例 #2-让我们抓取一些数据

既然您已经理解了 Headless Chrome 和 Puppeteer 的工作道理，那么让我们看一个更复杂的示例，在该示例中我们事实上可以抓取一些数据。

第一，在此处查看 Puppeteer 的 API 文档。如您所见，我们有许多办法可以使用, 不仅可以点击网站，还可以填写表格，输入内容和读取数据。

在本教程中，我们将抓取 Books To Scrape ，这是一家专门设定的假书店，旨在帮忙人们练习抓取。

在统一名目中，创立一个名为scrape.js的文件，并插入以下样板代码：

const puppeteer = require('puppeteer');

let scrape = async () => {
  // 实际的抓取从这里开端...

  // 返回值
};

scrape().then((value) => {
    console.log(value); // 成功!
});

抱负状况下，在看完第一个示例之后，上面的代码对您成心义。假如没有，那不妨！

我们上面所做的需要之前安置的puppeteer依靠关系。然后我们有scraping()函数，我们将在其中填入抓代替码。此函数将返回值。最后，我们调取scraping函数并处置返回值(将其记载到操纵台)。

我们可以通过在scrape函数中增加一行代码来测试以上代码。试试看：

let scrape = async () => {
  return 'test';
};

此刻，在操纵台中运转node scrape.js。您应当返回test！完善，我们返回的值正在记载到操纵台。此刻我们可以开端补充我们的scrape函数。

步骤1：设定

我们需要做的第一件事是创立阅读器实例，翻开一个新页面，然后导航到URL。我们的操纵办法如下：

let scrape = async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('http://books.toscrape.com/');
  await page.waitFor(1000); // Scrape browser.close();
  return result;};

太棒了！让我们逐行学习它：

第一，我们创立阅读器，并将headless模式设定为false。这使我们可以准确地视察发生了什么：

const browser = await puppeteer.launch({headless: false});

然后，我们在阅读器中创立一个新页面：

const page = await browser.newPage();

接下来，我们转到books.toscrape.com URL：

await page.goto('http://books.toscrape.com/');

我选中性地增加了1000毫秒的延迟。尽管平常没有必要，但这将确保页面上的所有内容都加载：

await page.waitFor(1000);

最后，完成所有操纵后，我们将关闭阅读器并返回结果。

browser.close();
return result;

步骤2：抓取

正如您此刻大概已经肯定的那样，Books to Scrape 具有大量的真实书籍和这些书籍的捏造数据。我们要做的是选中页面上的第一本书，然后返回该书的标题和价钱。这是要抓取的图书的主页。我有乐趣点第一本书(下面红色标志)

查看 Puppeteer API，我们可以寻到单击页面的办法：

page.click(selector[, options])

selector 用于选中要单击的元素的选中器，假如有多个知足选中器的元素，则将单击第一个。

荣幸的是，使用 Google Chrome 开发者工具可以非常轻松地肯定特定元素的选中器。只需右键单击图像并选中检查：

这将翻开元素面板，突出显示该元素。此刻，您可以单击左侧的三个点，选中复制，然后选中复制选中器：

太棒了！此刻，我们复制了选中器，并且可以将click办法插入程序。像这样：

await page.click('#default > p > p > p > p > section > p:nth-child(2) > ol > li:nth-child(1) > article > p.image_container > a > img');

我们的窗口将单击第一个产品图像并导航到该产品页面！

在新页面上，我们对商品名称和商品价钱均感乐趣(以下以红色概述)

为了检索这些值，我们将使用page.evaluate()办法。此办法使我们可以使用内置的 DOM 选中器，例如querySelector()。

我们要做的第一件事是创立page.evaluate()函数，并将返回值留存到变量result中：

const result = await page.evaluate(() => {// return something});

在函数里，我们可以选中所需的元素。我们将使用 Google Developers 工具再次解决这一问题。右键单击标题，然后选中检查：

正如您将在 elements 面板中看到的那样，标题只是一个h1元素。我们可以使用以下代码选中此元素：

let title = document.querySelector('h1');

由于我们但愿文本包括在此元素中，因此我们需要增加.innerText-终究代码如下所示：

let title = document.querySelector('h1').innerText;

一样，我们可以通过单击右键检查元从来选中价钱：

如您所见，我们的价钱有price_color类，我们可以使用此类选中元素及其内部文本。这是代码：

let price = document.querySelector('.price_color').innerText;

此刻我们有了所需的文本，可以将其返回到一个对象中：

return {
  title,
  price
}

太棒了！我们选中标题和价钱，将其留存到一个对象中，然后将该对象的值返回给result变量。放在一起是这样的：

const result = await page.evaluate(() => {
  let title = document.querySelector('h1').innerText;
  let price = document.querySelector('.price_color').innerText;
  return {
     title,
     price
}});

剩下要做的独一一件事就是返回result，以便可以将其记载到操纵台：

return result;

您的终究代码应如下所示：

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 > p > p > p > p > section > p:nth-child(2) > ol > li:nth-child(1) > article > p.image_container > a > img');
    await page.waitFor(1000);

    const result = await page.evaluate(() => {
        let title = document.querySelector('h1').innerText;
        let price = document.querySelector('.price_color').innerText;

        return {
            title,
            price
        }

    });

    browser.close();
    return result;
};

scrape().then((value) => {
    console.log(value); // 成功!
});

您可以通过在操纵台中键入以下内容来运转 Node 文件：

node scrape.js // { 书名: 'A Light in the Attic', 价钱: '￡51.77' }

您应当看到所选图书的标题和价钱返回到屏幕上！您刚刚抓取了网页！

示例 #3 ——完美它

此刻您大概会问本人，当标题和价钱都显示在主页上时，为什么我们要点击书？为什么不从那里抓取呢？而在我们尝试时，为什么不抓紧所有书籍的标题和价钱呢？

由于有许多办法可以抓取网站！ (此外，假如我们留在首页上，我们的标题将被删掉)。但是，这为您供给了练习新的抓取技艺的绝好时机！

挑衅
目标 ——从首页抓取所有书名和价钱，并以数组情势返回。这是我终究的输出结果：

开端！看看您可否可以本人完成此任务。与我们刚创立的上述程序非常类似，假如卡住，请向下滚动…
GO! See if you can accomplish this on your own. It’s very similar to the above program we just created. Scroll down if you get stuck…

提醒：
此挑衅与上一个示例之间的主要不同是需要遍历大量结果。您可以依照以下办法设定代码来做到这一点：

const result = await page.evaluate(() => {
  let data = []; // 创立一个空数组
  let elements = document.querySelectorAll('xxx'); // 选中全部   
    // 遍历每一个产品
    // 选中标题
    // 选中价钱
    data.push({title, price}); // 将数据放到数组里, 返回数据； 
    // 返回数据数组
});

假如您不清楚，没事！这是一个棘手的问题…… 这是一种大概的解决方案。在今后的文章中，我将深入研讨此代码及其工作方式，我们还将介绍更高级的抓取技术。假如您想收到通知，请务必 在此处输入您的电子邮件 。

方案：

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

    const result = await page.evaluate(() => {
        let data = []; // 创立一个空数组, 用来储备数据
        let elements = document.querySelectorAll('.product_pod'); // 选中所有产品

        for (var element of elements){ // 遍历每个产品
            let title = element.childNodes[5].innerText; // 选中标题
            let price = element.childNodes[7].children[0].innerText; // 选中价钱

            data.push({title, price}); // 将对象放进数组 data 
        }

        return data; // 返回数组 data
    });

    browser.close();
    return result; //  返回数据
};

scrape().then((value) => {
    console.log(value); // 成功!
});