Puppeteer学习笔记

小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。

一、Puppeteer与Puppeteer-Core的区别

1.Puppeteer-Core在安装时不会自动下载 Chromium
2.Puppeteer-Core忽略所有的PUPPETEER_* env 变量.

二、Puppeteer可以完成以下操作:

几乎所有你能在浏览器上做的事情, 通过调用puppeteer API 也能够实现, 比如:

  • 生成浏览器页面的屏幕截图或者是pdf文件

  • 方便的抓取单页面和预渲染页面的信息内容

  • 网站爬虫

  • 自动化执行页面提交,UI自动化测试,键盘输入等.

  • 可以建立基于最新Chrome和Javascript的测试环境

  • 抓取并跟踪网站的执行时间轴,帮助分析效率问题

  • 测试Chrome扩展程序。
    Puppeteer安装时自带一个最新版本的Chromium,可以通过设置环境变量或者npm config中的PUPPETEER_SKIP_CHROMIUM_DOWNLOAD跳过下载。如果不下载的话,启动时可以通过puppeteer.launch([options])配置项中的executablePath指定Chromium的位置。

三、安装Puppeteer

1.安装Node环境
2.E盘新建文件夹:Puppeter。
3.安装Puppeter,win+X+R

扫描二维码关注公众号,回复: 4570891 查看本文章

npm i puppeteer

或者

yarn add puppeteer

image.png

页面截图

初始化步骤完成后,node_modules放在根目录下,依次打开以下文件夹:node_modules—puppeteer—examples.

进入到examples文件夹下后,里面有很多js文件,这些一般都是一些小例子。以screenshot.js为例,看一个页面截图的例子。

我们以记事本方式打开该文件,主要js代码如下:

'use strict';constpuppeteer =require('puppeteer');//引入puppeteer库.

(async() => {

              constbrowser = await puppeteer.launch();//用指定选项启动一个Chromium浏览器实例。

              constpage = await browser.newPage();//创建一个页面.

              await page.goto('http://example.com');//到指定页面的网址.

              await page.screenshot({path:'example.png'});//截图并保存到当前路径,名称为example.png.

              await browser.close();//关闭已打开的页面,browser不能再使用。

            })();

方式1.在pycharm中新建一个file,命名为test.js,将上面的代码拷贝到test.js中并保存,在terminal中输入node screenshot.js//运行名为screenshot.js的文件.

方式2.还是在当前文件夹(examples)下,此处打开命令行窗口,输入:node screenshot.js//运行名为screenshot.js的文件.

运行完成后,就会在当前目录下看到图片,该图片即运行该js后截的图片。

 

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了9亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

原文链接: https://www.jianshu.com/p/1844baa3956e

猜你喜欢

转载自blog.csdn.net/qq_40126542/article/details/85093489
今日推荐