测试开发Web-UI自动化-selenium

Web UI自动化框架-Puppeteer

2020-05-23  本文已影响0人  沈宥

Puppeteer 是什么

Puppeteer 能做什么

安装

在项目中使用 Puppeteer:

npm I puppeteer
# or "yarn add puppeteer"

Note: 安装 Puppeteer 时,它会下载最新版本的Chromium(~170MB Mac,~282MB Linux,~280MB Win),以保证可以使用 API。 如果想要跳过下载,请阅读环境变量

HTTP_PROXY,HTTPS_PROXY,NO_PROXY-定义用于下载和运行Chromium的HTTP代理设置。
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD-在安装步骤中请勿下载捆绑的Chromium。
PUPPETEER_DOWNLOAD_HOST-覆盖用于下载Chromium的URL的主机部分
PUPPETEER_CHROMIUM_REVISION-指定您希望Puppeteer使用的特定版本的Chromium。 
PUPPETEER_EXECUTABLE_PATH-指定要在puppeteer.launch中使用的可执行路径。 
安装报错

本地node版本为v10.11.0,默认安装puppeteer最新3.1.0版本时,一直报错:

$ npm install puppeteer --save

> puppeteer@3.1.0 install /Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer
> node install.js

(node:42761) ExperimentalWarning: The fs.promises API is experimental
ERROR: Failed to set up Chromium r756035! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to skip download.
{ Error: read ECONNRESET
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)
  -- ASYNC --
    at BrowserFetcher.<anonymous> (/Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer/lib/helper.js:94:19)
    at fetchBinary (/Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer/install.js:148:8)
    at download (/Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer/install.js:54:9) errno: 'ECONNRESET', code: 'ECONNRESET', syscall: 'read' }
npm WARN ws@7.3.0 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.3.0 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN puppeteer2e@1.0.0 No description
npm WARN puppeteer2e@1.0.0 No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! puppeteer@3.1.0 install: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the puppeteer@3.1.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wangpingyang/.npm/_logs/2020-05-23T07_29_44_741Z-debug.log

在github的issues中找到其他人也有同样问题,给出的解决方法是将puppeteer安装版本指定为2.1.1
npm install puppeteer@2.1.1 --save
终于安装成功

$ npm install puppeteer@2.1.1 --save

> puppeteer@2.1.1 install /Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer
> node install.js

Downloading Chromium r722234 - 116.4 Mb [====================] 100% 0.0s 
Chromium downloaded to /Users/wangpingyang/Program/puppeteer2e/node_modules/puppeteer/.local-chromium/mac-722234
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN puppeteer2e@1.0.0 No description
npm WARN puppeteer2e@1.0.0 No repository field.

+ puppeteer@2.1.1
added 44 packages from 26 contributors in 221.508s

puppeteer-core

puppeteer-core 是一个的轻量级的 Puppeteer 版本,用于启动现有浏览器安装或连接到远程安装。自 1.7.0 版本以来,会发布一个 puppeteer-core 包,这个包默认不会下载 Chromium。

npm i puppeteer-core
# or "yarn add puppeteer-core"

具体见 puppeteer vs puppeteer-core.

使用

环境要求
1、Puppeteer 至少需要 Node v6.4.0
2、 async / await,仅在 Node v7.6.0 或更高版本中被支持。

示例

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://zhaoqize.github.io/puppeteer-api-zh_CN/');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

上述代码执行的操作为:
1、puppeteer.launch() 创建一个浏览器实例 Browser 对象
2、 Browser 对象创建页面 Page 对象
3、 page.goto() 跳转到指定的页面
4、调用 page.screenshot() 对页面进行截图
5、关闭浏览器

执行无浏览器界面结束后,会在项目目录下生成一张截图:


Chrome扩展插件

功能

Chrome扩展程序,用于记录浏览器的交互并生成Puppeteer脚本。
-记录点击次数,输入事件等
-记录屏幕截图。
-导航时暂停录音。
-监视记录的事件。
-导出到Puppeteer代码。
-调整生成代码的设置。

安装后直接点击插件开始录制,在浏览器中对web页面进行操作,会自动生成Puppeteer脚本。录制完成后,直接将已生成的脚本复制出来即可。


常用API

1、加载导航页面
page.goto:打开新页面
page.goBack :回退到上一个页面
page.goForward :前进到下一个页面
page.reload :重新加载页面
page.waitForNavigation:等待页面跳转

2、等待元素、请求、响应
page.waitForXPath:等待 xPath 对应的元素出现,返回对应的 ElementHandle 实例
page.waitForSelector :等待选择器对应的元素出现,返回对应的 ElementHandle 实例
page.waitForResponse :等待某个响应结束,返回 Response 实例
page.waitForRequest:等待某个请求出现,返回 Request 实例

3、获取元素
page.('#uniqueId'):获取某个选择器对应的第一个元素 page.$$('div'):获取某个选择器对应的所有元素 page.x('//img'):获取某个 xPath 对应的所有元素
page.waitForXPath('//img'):等待某个 xPath 对应的元素出现
page.waitForSelector('#uniqueId'):等待某个选择器对应的元素出现

4、元素操作
elementHandle.click():点击某个元素
elementHandle.tap():模拟手指触摸点击
elementHandle.focus():聚焦到某个元素
elementHandle.hover():鼠标 hover 到某个元素上
elementHandle.type('hello'):在输入框输入文本

上一篇下一篇

猜你喜欢

热点阅读