专栏首页测试邦web自动化测试-puppeteer入门与实践

web自动化测试-puppeteer入门与实践

前言

对于web的自动测试,很多人熟悉的是selenium、webdriver的解决方案,比如说webdriver是按照server – client的经典设计模式设计的,server端是remote server,可以是任意的浏览器。以及常用到的一个爬虫框架PhantomJS 。对于这两款工具环境安装复杂,API 调用不友好的问题。puppeteer是一款基于chrome的自动化测试以及爬虫工具。

一、认识puppeteer

在chrome 59 chrome团队支持了headless模式,在Headless模式下,用于自动化测试和不需要可视化用户界面的服务器。例如,你想在一个网页上运行一些测试,从网页创建一个PDF,或者只是检查浏览器怎样递交URL。

Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。puppeteer的出现让很多lib的开发者放弃继续开发,比如PhantomJS 的作者当他看到puppeteer的出现就果断的放弃了PhantomJS的维护,很多小伙伴该伤心了吧。

Puppeteer 核心功能:

•利用网页生成PDF、图片

•爬取SPA应用,并生成预渲染内容(即“SSR” 服务端渲染)

•可以从网站抓取内容

•自动化表单提交、UI测试、键盘输入等

•帮你创建一个最新的自动化测试环境(chrome),可以直接在此运行测试用例

•捕获站点的时间线,以便追踪你的网站,帮助分析网站性能问题

Puppeteer是使用node语言进行开发的,在使用中你可以使用async/await异步解决方案,async/await可能是目前为止最简单的异步方案了。

二、环境准备

node:

Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。选着对应的版本进行安装,对于node官方介绍需要V6.4以后的版本,如果要使用async/await需要V7.6.而以后的版本,这里建议使用最新的稳定版本。

通过node -v 查看版本信息

Npm:

就像NPM的官网(http://npmjs.org/)上介绍的那样,安装NPM仅仅是一行命令的事情:

curl http://npmjs.org/install.sh | sh

这里详解一下这句命令的意思,curl http://npmjs.org/install.sh是通过curl命令获取这个安装shell脚本,按后通过管道符| 将获取的脚本交由sh命令来执行。这里如果没有权限会安装不成功,需要加上sudo来确保权限

yarn:

brew install yarn mac下使用该命令即可安装,yarn的安装也是很简单的

其他平台参https://yarn.bootcss.com/docs/install.html

Puppeteer:

Puppeteer因为是一个npm的包,所以安装很简单,你可以通过npm或者yarn的方式去安装:

npm i puppeteer/yarn add puppeteer

三、使用与例子

本篇内容主要介绍启动实例以及debug相关

Class:Puppeteer

Puppeteer 模块提供了一种启动 Chromium 实例的方法。

1.下面就是使用 Puppeteer 进行自动化的一个典型示例:

上述代码通过puppeteer.launch方法生成了一个browser的实例,此时在默认情况下是headless模式,对应于浏览器,接着通过browser.newPage方法去打开一个tab,然后使用page.goto打开一个url,接着使用page.screenshot()进行截图,最后browser.close关闭browser。

2.通过launch的options设置参数

上述代码通过puppeteer.launch({headless:false})此时headless模式是关闭的,但我们执行代码的时候回发现此时会打开一个chrome,并且可以看到执行的步骤,这在我们平时的调试过程中是非常重要的。

上述代码中在options中加了slowMo:250,减慢速度,slowMo选项以指定的毫秒减慢Puppeteer的操作。这种情况下执行的每个步骤都会变缓慢,当然对于人眼而言250ms是很难分出差别的,你可以把slowMo设置成2500,这时候你就能清晰的看出做了什么。

3.控制台输出

上述代码通过await page.evaluate(() => console.log(`url is ${location.href}`));在控制台把url打印出来,evaluate是个非常强大的函数,来看下这个函数:

page.evaluate(pageFunction, …args)

• pageFunction <[function]|[string]> 要在页面实例上下文中执行的方法 • ...args <…[Serializable]|[JSHandle]> 要传给 pageFunction 的参数 • 返回: <[Promise]<[Serializable]>> pageFunction执行的结果

如果pageFunction返回的是[Promise],page.evaluate将等待promise完成,并返回其返回值。

如果pageFunction返回的是不能序列化的值,将返回undefined

来看下事例:

给pageFunction传参数示例:

const result = await page.evaluate(x => { return Promise.resolve(8 * x); }, 7); // 7 可以是你自己代码里任意方式得到的值 console.log(result); // prints "56"

也可以传一个字符串:

console.log(await page.evaluate('1 + 2')); // prints "3" const x = 10; console.log(await page.evaluate(`1 + ${x}`)); // prints "11"

可以通过该函数向页面注入我们的函数,这样就有了无限可能

4.调试技巧

对于在测试中的调试,在puppeteer中可以在launch中配置headless为false关掉无界面模式,查看浏览器显示的内容这是一种调试方式,同是通过添加slowMo的方式也是为调试提供了方便。除了这些我们还可以打开debug的方式进行调试。直接上代码

上述代码中通过 await puppeteer.launch({devtools: true});打开调试模式。

我们可以看到在打开的界面中可以通过paused in debugger 中的执行或者跳过对代码进行任意的操作了。

今天就写到这里吧,这里给出git源代码的地址 https://github.com/SummerGancf/puppeteerDemo.git

如何执行代码呢???

1.通过git clone https://github.com/SummerGancf/puppeteerDemo.git把代码checkout在本地。

2.接着进入代码目录执行yarn install该命令会自动的安装相关的依赖,当然这是在你吧文章中的环境相关的都安装好了的情况下。

3.最后执行 node package/launchSetting.js 这会执行本篇文章中的所有的实例,如果你不想执行所有的话可以对它进行注释,如果有疑问欢迎咨询。

本文分享自微信公众号 - 测试邦(testerbang),作者:夏天夏了

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • puppeteer recorder详解

    “ puppeteer recorder 是一款专门为puppeteer提供的插件,用来进行录制”

    测试邦
  • web自动化|pyppeteer的使用-python版本puppeteer

    pyppeteer:puppeteer的非官方python库.支持python3.5|3.6|3.7

    测试邦
  • UnitTest:maven中使用Jacoco计算代码覆盖率

    jacoco 官网 https://www.eclemma.org/jacoco/

    测试邦
  • Puppeteer实现选择性截图

    截图的代码很简单,比如如果我想实现对百度搜索框部分截图怎么做呢,查询page.screenshot api 可以看到其api说明中包含clip 选项,用于设置截...

    Jerremy
  • Puppeteer之爬虫入门

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

    Fundebug
  • 精读《async/await 是把双刃剑》

    终于,async/await 也被吐槽了。Aditya Agarwal 认为 async/await 语法让我们陷入了新的麻烦之中。

    wangxl
  • centos7 lldb 调试netcore应用的内存泄漏和死循环示例(dump文件调试)

    lldb工具的安装,linux下netcore如何生成dump文件,查看下文 centos7使用lldb调试netcore应用转储dump文件

    旺财的城堡
  • JavaScript 事件绑定

    事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。 一.传统事...

    汤高
  • CDN与项目应用测试

    虽然很早听过CDN,但对其原理处于模糊的状态。如今国内访问量较高的网站、直播、视频平台,均使用CDN网络加速技术,小编所在项目有使用CDN技术,谨以此篇学习共...

    用户5521279
  • PHP处理高分辨率图片的问题

    上图的意思就是说,我们能使用的内存最大是8M,但是处理这个图片还需要额外的41bytes,就会导致内存不足,这是一个很严重的错误。在对图片进行操作前需要将图片的...

    猿哥

扫码关注云+社区

领取腾讯云代金券