puppeteer爬虫教程_python爬虫入门最好书籍

puppeteer爬虫教程_python爬虫入门最好书籍译者按: 本文通过简单的例子介绍如何使用Puppeteer来爬取网页数据,特别是用谷歌开发者工具获取元素选择器值得学习。原文: AGuidetoAutomating&am

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

译者按: 本文通过简单的例子介绍如何使用Puppeteer来爬取网页数据,特别是用谷歌开发者工具获取元素选择器值得学习。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

我们将会学到什么?

在这篇文章,你讲会学到如何使用JavaScript自动化抓取网页里面感兴趣的内容。我们将会使用Puppeteer,Puppeteer是一个Node库,提供接口来控制headless Chrome。Headless Chrome是一种不使用Chrome来运行Chrome浏览器的方式。

如果你不知道Puppeteer,也不了解headless Chrome,那么你只要知道我们将要编写JavaScript代码来自动化控制Chrome就行。

准备工作

你需要安装版本8以上的Node,你可以在这里找到安装方法。确保选择Current版本,因为它是8+。

当你将Node安装好以后,创建一个新的文件夹,将Puppeteer安装在该文件夹下。

npm install –save puppeteer

例1:截屏

当你把Puppeteer安装好了以后,我们来尝试第一个简单的例子。这个例子来自于Puppeteer文档(稍微改动)。我们编写的代码将会把你要访问的网页截屏并保存为png文件。

首先,创建一个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行:调用getPic()函数。

这里需要提醒注意getPic()函数是一个async函数,使用了ES 2017 async/await特性。该函数是一个异步函数,会返回一个Promise。如果async最终顺利返回值,Promise则可以顺利reslove,得到结果;否则将会reject一个错误。

因为我们使用了async函数,我们使用await来暂停函数的执行,直到Promise返回。

接下来我们深入理解一下getPic()

  • 第4行:

    const broswer = await puppeteer.launch();

    这行代码启动puppeteer,我们实际上启动了一个Chrome实例,并且和我们声明的browser变量绑定起来。因为我们使用了await关键字,该函数会暂停直到Promise完全被解析。也就是说成功创建Chrome实例或则报错

  • 第5行:

    我们在浏览器中创建一个新的页面,通过使用await关键字来等待页面成功创建

    const page = await browser.newPage();

  • 第6行:

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

    使用page.goto()打开谷歌首页

  • 第7行:

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

    调用screenshot()函数将当前页面截屏

  • 第9行:

    将浏览器关闭

    await browser.close();

执行实例

使用Node执行:

node test.js

下面截取的图片google.png

puppeteer爬虫教程_python爬虫入门最好书籍

现在我们来使用non-headless模式试试。将第4行代码改为:

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

  

然后运行试试。你会发现谷歌浏览器打开了,并且导航到了谷歌搜索页面。但是截屏没有居中,我们可以调节一下页面的大小配置。 

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

  

 截屏的效果会更加漂亮。

puppeteer爬虫教程_python爬虫入门最好书籍

下面是最终版本的代码:

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:爬取数据

首先,了解一下Puppeteer的API。文档提供了非常丰富的方法不仅支持在网页上点击,而且可以填写表单,读取数据。

接下来我们会爬取Books to Scrape,这是一个伪造的网上书店专门用来练习爬取数据。

在当前目录下,我们创建一个scrape.js文件,输入如下代码:

const puppeteer = require('puppeteer');

let scrape = async () => {
  // 爬取数据的代码
  
  // 返回数据
};

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

  

第一步:基本配置

我们首先创建一个浏览器实例,打开一个新页面,并且导航到要爬取数据的页面。

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;
};

  注意其中有一行代码让浏览器延时关闭。这行代码本来是不需要的,主要是方便查看页面是否完全加载。

await page.waitFor(1000);

  

第二步:抓取数据

我们接下来要选择页面上的第一本书,然后获取它的标题和价格。



puppeteer爬虫教程_python爬虫入门最好书籍

查看Puppeteer API,可以找到定义点击的函数:

page.click(selector[, options])

  • selector 一个选择器来指定要点击的元素。如果多个元素满足,那么默认选择第一个。

幸运的是,谷歌开发者工具提供一个可以快速找到选择器元素的方法。在图片上方右击,选择检查(Inspect)选项。



puppeteer爬虫教程_python爬虫入门最好书籍

谷歌开发者工具的Elements界面会打开,并且选定部分对应的代码会高亮。右击左侧的三个点,选择拷贝(Copy),然后选择拷贝选择器(Copy selector)。



puppeteer爬虫教程_python爬虫入门最好书籍

接下来将拷贝的选择器插入到函数中。

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

  加入了点击事件的代码执行后会直接跳转到详细介绍这本书的页面。而我们则关心它的标题和价格部分。

puppeteer爬虫教程_python爬虫入门最好书籍

为了获取它们,我们首选需要使用page.evaluate()函数。该函数可以让我们使用内置的DOM选择器,比如querySelector()

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

  然后,我们使用类似的手段获取标题的选择器。

puppeteer爬虫教程_python爬虫入门最好书籍

 

 使用如下代码可以获取该元素:

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

  但是,我们真正想要的是里面的文本文字。因此,通过.innerText来获取。

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

  价格也可以用相同的方法获取。

  

puppeteer爬虫教程_python爬虫入门最好书籍

 

 

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

  最终,将它们一起返回,完整代码如下:

const result = await page.evaluate(() => {
  let title = document.querySelector('h1').innerText;
  let price = document.querySelector('.price_color').innerText;
return {
  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/');
    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 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); // Success!
});

  运行node scrape.js即可返回数据

{ title: 'A Light in the Attic', price: '£51.77' }

  

例3:进一步优化

从主页获取所有书籍的标题和价格,然后将它们返回。



puppeteer爬虫教程_python爬虫入门最好书籍

提示

和例2的区别在于我们需要用一个循环来获取所有书籍的信息。

const result = await page.evaluate(() => {
  let data = []; // Create an empty array
  let elements = document.querySelectorAll('xxx'); // 获取所有书籍元素 
  // 循环处理每一个元素
    // 获取标题
    // 获取价格
    data.push({title, price}); // 将结果存入数组
  return data; // 返回数据
});

  

解法

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}); // 存入数组
        }

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

    browser.close();
    return result;
};

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

  

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167491.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • java按位取反运算符_二进制按位取反

    java按位取反运算符_二进制按位取反“~”运算符在c、c++、java、c#中都有,要弄懂这个运算符的计算方法,首先必须明白二进制数在内存中的存放形式,二进制数在内存中是以补码的形式存放的。另外正数和负数的补码不一样,正数的补码,反码都是其本身,既:正数9(二进制为:1001)在内存中存储为01001,必须补上符号位(开头的0为符号位)。补码为01001反码为01001,其中前面加的0是符号位,负数的

  • android之BitmapFactory.Options的使用

    ,BitmapFactory.Options的使用是在加载图片时,就从图片的加载和使用说起 怎样获取图片的大小?首先我们把这个图片转成Bitmap,然后再利用Bitmap的getWidth()和getHeight()方法就可以取到图片的宽高了。新问题又来了,在通过BitmapFactory.decodeFile(String path)方法将突破转成Bitmap时,遇到大一些的图片

  • 上市ASCII 表省内发现!

    上市ASCII 表省内发现!

  • 工作流引擎 Activiti 教程(非常详细)

    工作流引擎 Activiti 教程(非常详细)更多内容关注微信公众号:fullstack888一、工作流介绍1.1概念工作流(Workflow),就是通过计算机对业务流程自动化执行管理。它主要解决的是“使在多个参与者之间按照某种预定义的规则自动进行传递文档、信息或任务的过程,从而实现某个预期的业务目标,或者促使此目标的实现”。1.2工作流系统一个软件系统中具有工作流的功能,我们把它称为工作流系统,一个系统中工作流…

  • mysql通配符和正则表达式

    mysql通配符和正则表达式通配符关键字是like。表示要跟like后的字符串完全匹配才能匹配上。如果没有通配符,匹配字符串时,like就跟等于号是相同含义的。like和等于的区别就是like后字符串里面可以插入一些通配符,类似于可变字符,使得字符串匹配难度降低一点。通配符有下面两个。%(百分号)匹配任意多个字符(0个或多个)_(下划线)匹配一个字符(有且仅有一个)正则表达式关键字是regexp(regularexpression简写)。正则匹配不用完全匹配,只需包含…

  • python dll注入监听_DLL注入和API拦截

    python dll注入监听_DLL注入和API拦截读《Windows核心编程》笔记一DLL注入和API拦截在Windows中,每个进程相互独立,都有自己的私有的地址空间,程序中使用的指针都是进程自己地址空间的一个内存地址,无法创建也没法使用其他进程的指针。这种机制使得各个进程之间不会相互影响,万一自己出现了问题,也不会影响到其他的进程。对用户来说,系统更加的稳定了,但是对于开发人员来说,会使我们很难编写能够与其他进程通信的应用程序或对其他进程进…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号