puppeteer UI自动化测试demo(一)

一.简介

这个不大常见,比较常见的是selenium和weddriver;

所以就增加一个说明,来自官网的。


Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,但是可以通过修改配置文件运行“有头”模式。

你可以在浏览器中手动执行的绝大多数操作都可以使用 Puppeteer 来完成! 下面是一些示例:

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

二.安装

1)node

由上可知,该框架依赖于node,先安装node6+

到该地址 :http://nodejs.cn/download/选择合适的版本进行安装;

安装结束后(比如我是window),在cmd执行:node -v 

以上说明安装成功了。

2)puppeteer  

同样来源于官网:

安装
在项目中使用 Puppeteer:
npm i puppeteer
# or "yarn add puppeteer"
Note: 当你安装 Puppeteer 时,它会下载最新版本的Chromium(~170MB Mac,~282MB Linux,~280MB Win),以保证可以使用 API。 如果想要跳过下载,请阅读环境变量。
puppeteer-core
自 1.7.0 版本以来,我们都会发布一个 puppeteer-core 包,这个包默认不会下载 Chromium。
npm i puppeteer-core
# or "yarn add puppeteer-core"
puppeteer-core 是一个的轻量级的 Puppeteer 版本,用于启动现有浏览器安装或连接到远程安装。
具体见 puppeteer vs puppeteer-core.

三.运行

1)编写example.js脚本

官网都是以默认Chromium执行,我这边以自带的chrome执行。脚本如下:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({executablePath:"C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe"});
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'd:\\example.png'});
  await browser.close();
})();

2)执行example.js

执行命令:node example.js

报错

puppeteer UI自动化测试demo(一)_第1张图片

解决:将该js放置到node puppeteer模块的目录下再执行;

四. 结果

1)在D盘目录,产生example.png文件

2)打开文件,为该url界面的截图

 五.缺点

1)该工具是基于Chromium提供出的api,适合Chromium的接口,在chrome上执行未必成功;而我们客户一般是安装chrome,所以,就看涉及到的api了;

附:

官网地址:https://github.com/GoogleChrome/puppeteer

api地址:https://zhaoqize.github.io/puppeteer-api-zh_CN/#/

 

你可能感兴趣的:(puppeteer UI自动化测试demo(一))