Puppeteer爬虫初探

时间 2019-12-07

原文原文链接

今天发现了一个很好玩的node库，Puppeteer，准备玩一下。先来看看官方的介绍。html

Puppeteer 是一个 Node 库，它提供了一个高级 API 来经过 DevTools 协议控制 Chromium 或 Chrome。换句话说，它最大的特色就是它的操做Dom能够彻底在内存中进行模拟既在V8引擎中处理而不打开浏览器。前端

那么 Puppeteer能够用来作什么？node

能够生成页面PDF文件；
抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））；
自动提交表单，进行 UI 测试，键盘输入等；
建立一个时时更新的自动化测试环境。使用最新的 JavaScript；和浏览器功能直接在最新版本的Chrome中执行测试；
捕获网站的 timeline trace，用来帮助分析性能问题；
测试浏览器扩展；

这么多优秀的功能，简直是前端神器。jquery

Puppeteer 由于须要使用 async / await，因此尽可能保证Node的版本在v7.6.0以上。git

本文主要拿它的爬虫功能玩一玩。github

--------------------—--------------伪装分隔符--------------------------------------------ajax

安装很简单，一句话搞定： npm i puppeteer or yarn add puppeteerexpress

安装好之后，写个例子玩一下：npm

const puppeteer = require('puppeteer');
(async() => {
    // 配置浏览器
    const browser = await puppeteer.launch({headless: true})；
    
    // 打开一个新页面
    const page = await browser.newPage();
    
    // 进入页面
    await page.goto('https://juejin.im/timeline');

    // 截个图看一下
    await page.screenshot({
        path: 'image.png',
        fullPage: true,
     });
})();
复制代码

没错，咱们准备爬一下掘金的数据。看一下刚才的截图浏览器

很神奇有木有，几行代码就实现了长截图。

进去了网址，接着玩一下它的输入框。

// 进入页面
await page.goto('https://juejin.im/timeline');

// 找到输入框的class
await page.type('.search-input', "puppeteer");

// 按下enter键
await page.keyboard.press('Enter');

// 等两秒钟，模拟一下用户输入，也要登一下数据刷出来
await page.waitFor(2000);

// 再截个图看一下
await page.screenshot({
    path: 'image.png',
    fullPage: true,
 });
复制代码

查到数据了！！也就是仅仅几行代码，就实现了搜索。能够脑补一下，模拟用户登陆哦~~~

截图和操做输入框咱们都玩过了，那咱们就能够作一个简单的小东西，实现一个页面，在搜索框里面输入关键字，查找出掘金的相关文章。

正常操做，

安装一下express yarn add express

建立index.js

const express = require('express');
const app = express();
const ejs = require('ejs');
const main = require('./puppeteer');

app.set('view engine','ejs');

app.use('/index', (req, res) => res.render('index'));

app.use('/search', async(req, res) => {
    const { value, more } = req.query;
    const list = await main(value, more);
    res.send(list);
});

app.listen(3000, () => console.log('Example app listening on port 3000!'));
复制代码

咱们用到了ejs模板，有时间的童鞋能够写一个漂亮美观的前端页面~

在同级目录下建立views目录，而后再建立index.ejs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>node爬虫</title>
</head>
<body>
<ul class="list"></ul>
<input type="text" class="input_value">
<span class="search" style="cursor: pointer; color: blue;">Search</span>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('.search').click(() => {
        $.ajax({
            type: 'GET',
            url: '/search',
            data: {value: $('.input_value').val()},
            success: res => $('ul').html(res.reduce((total, item) => total + `<li><a target="_blank" href="${item.href}">${item.title}</a></li>`, ''))
        });
    });
</script>
</html>
复制代码

接着建立关键爬虫代码：

const puppeteer = require('puppeteer');

async function main(value) {
    // 配置浏览器
    const browser = await puppeteer.launch({headless: true});

    // 建立一个新页面
    const page = await browser.newPage();

    // 进入网址
    await page.goto('https://juejin.im/timeline');

    // 找到搜索框
    await page.type('.search-input', value);

    // 点击搜索
    await page.keyboard.press('Enter');

    // 等待文章列表出来
    await page.waitForSelector('.main-list');

    // 截图看一下
    await page.screenshot({
        path: 'image.png',
        fullPage: true,
    });

    // 找一下文章容器
    const list = await page.$('.main-list');

    // 组合一下文章标题和连接
    const result = await list.$$eval('.entry-link', e => e.map(v => ({
        href: v.href,
        title: v.querySelector('.title').firstChild.innerText
    })));

    return result;
}

module.exports = main;
复制代码

就建立三个文件，node index.js一下，看看效果~ （界面略丑）

好像少了点，再爬多一点, 把滚动条往下滑到3000的位置，试一下：

// 等待文章列表出来
await page.waitForSelector('.main-list');

// 把滚动条滚动到指定位置
await page.evaluate(() => window.scrollTo(0, 3000));

// 等待时间根据滚动条的位置要增长，否则来不及反应
await page.waitFor(2000);
复制代码

没截全，而后脑补一下，是否是能够用本身写的爬虫去爬本身的爬虫，来搞个长截图~（我就不试了，留给大家~）

好了，Puppeteer的确很强大，也很好玩，你们有兴趣的话，能够用它来爬一些本身感兴趣的网站。~

最后附上所有代码地址： github

1. 爬虫利器-Puppeteer初探
2. puppeteer爬虫
3. python爬虫初探
4. Puppeteer 初探
5. puppeteer初探
6. puppeteer爬虫服务
7. 爬虫利器 puppeteer
8. 爬虫利器 Puppeteer
9. PHP爬虫 -- 008 爬虫初探
10. puppeteer爬虫之（一）——认识爬虫
更多相关文章...
• 探索Redis事务回滚 - Redis教程
• 使用TCP协议检测防火墙 - TCP/IP教程
• 适用于PHP初学者的学习线路和建议
• Java Agent入门实战（一）-Instrumentation介绍与使用