/自动化测试/ puppeteer环境搭建

▷1◁

puppeteer简介

我们先看下puppeteer的官网的说明

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headlessby default, but can be configured to run full (non-headless) Chrome or Chromium

puppeteer是一个nodejs的类库,通过devtools协议提供谷歌的chrome或者chromium的控制api,默认通过headless方式控制Chrome,当然puppeteer也支持非headless模式,而且是由谷歌团队维护,再看看github上的star数:https://github.com/GoogleChrome/puppeteer

37139,不用担心它的流行程度,puppeteer通过Javascript来编写脚本,擅长ui自动化测试和爬虫实现!

▷2◁

winodws系统下安装

首先要安装nodejs和npm

安装nodejs,https://nodejs.org/en/download/current/,在nodejs官网下载最新版本

下载完成后双击安装,安装完成后运行cmd命令行查看版本

node -v

证明安装成功

npm安装,安装完node默认会集成npm

查看npm版本

安装puppeteer

npm i puppeteer

如果你可以翻墙,安装过程应该是OK的,如果你被墙了,直接安装puppeteer会失败,因为puppeteer的安装过程回去下载chromium,而chromium被墙掉了

chromium的默认下载位置:D:\node_modules\puppeteer\.local-chromium\win64-579032\chrome-win32(每个人的路径不太相同)

▷3◁

实现example.js例子

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); await page.screenshot({path: 'example.png'}); await browser.close(); })();

在D:根目录下,保存为example.js

运行node example.js

会在D:根目录生成一个example.png的图片,图片内容为:

在ide上运行,这里我选择的是webstrom(对jerbrains全家桶有偏爱...)

运行结果:

提示找不到chromium,debug一下,添加browserFetcher和revisionInfo到watcher

得到puppeteer默认加载chromium的路径是:

C:\Users\quanh\node_modules\puppeteer\.local-chromium\win64-579032\chrome-win32\chrome.exe

和我们安装puppeteer时默认下载chromium的路径不相符,所以提示找不到

解决方案:查看官网文档,我们的目标是找到修改chromium启动path的方法

制定path后运行:

运行成功:

关于headless模式,默认puppeteer是开启headless模式的,也就是脚本运行过程中,看不到chromium的界面显示

如果要关闭headless模式,也是要在启动项配置,查看官网:

修改脚本:

运行结果:

▷4◁

Mac系统安装

具体步骤参考winodws,对应node版本安装mac版本即可

本文分享自微信公众号 - 测试邦(testerbang)

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

原始发表时间:2018-09-03

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏李才哥

我们不一样

因此,为了向处于美食诱惑之下的亲朋好友们解释软件相关工作的一般概念,这有一个比喻来帮助你。

9320
来自专栏京程一灯

在 JavaScript 中对象的深拷贝(及其工作原理)[每日前端夜话0x8F]

当你不想改变原始对象时,就需要克隆对象。例如,如果你有一个接受对象并改变它的函数,可能不想改变其原始对象。

12330
来自专栏京程一灯

Node.js 中的ES模块现状[每日前端夜话0x8D]

新的 ECMAScript(ES)模块与以前的语言版本不完全兼容,因此使用的 JavaScript 引擎需要知道每一个文件是“旧” JavaScript 代码还...

12240
来自专栏vivo互联网技术

一篇文章教你如何捕获前端错误

JavaScript代码在用户浏览器中执行时,由于一些边界情况、本地环境的不可控等因素,可能会存在js运行时错误。

19170
来自专栏全栈修炼

ES6 系列之我们来聊聊 Async

其实 async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。

10030
来自专栏全栈修炼

ES6 系列之异步处理实战

为了实现这个功能,我们需要用到几个 Nodejs 的 API,所以我们来简单介绍一下。

6520
来自专栏Node开发

NodeJS源码解析--Node如何处理HTTP请求

看过我之前的写的文章的朋友们应该会知道,使用NodeJS创建一个HTTP服务器是非常简单的。我们写的一个个API中使用req来接收请求,使用re...

25030
来自专栏Python绿色通道

Python 4.0 预计推出的新功能

Python 3.8 发布在即,核心开发者团队让我总结一下最近讨论的 Python 4.0 预计推出的新功能,代码名为“ Ouroboros:自噬蛇”。Pyth...

31320
来自专栏京程一灯

企业级JavaScript:机遇,威胁与解决方案[每日前端夜话0x8E]

Enterprise JavaScript: Opportunities, Threats, Solutions

11650
来自专栏李才哥

前端发展闲聊

先后涌现出了具备后端能力的node,具备移动开发能力的react native,具备游戏渲染能力的cocos2d-js,以及iOS上的热修复技术JSPatch等...

21360

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励