web前端自动化测试利器puppeteer介绍

web前端自动化测试利器puppeteer介绍

Intro

Chrome59(linux、macos)、 Chrome60(windows)之后,Chrome自带headless(无界面)模式很方便做自动化测试或者爬虫。但是如何和headless模式的Chrome交互则是一个问题。通过启动Chrome时的命令行参数仅能实现简易的启动时初始化操作。Selenium、Webdriver等是一种解决方案,但是往往依赖众多,不够扁平。

Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。

Github 仓库:https://github.com/GoogleChrome/puppeteer

安装

Puppeteer本身依赖6.4以上的Node,但是为了异步超级好用的async/await,推荐使用7.6版本以上的Node。另外headless Chrome本身对服务器依赖的库的版本要求比较高,centos服务器依赖偏稳定,v6很难使用headless Chrome,提升依赖版本可能出现各种服务器问题(包括且不限于无法使用ssh),最好使用高版本服务器。

Puppeteer因为是一个npm的包,所以安装很简单:

npm i puppeteer

或者

yarn add puppeteer

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

Use

用 puppeteer 来做什么

Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:

  • Generate screenshots and PDFs of pages.
  • Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. "SSR" (Server-Side Rendering)).
  • Automate form submission, UI testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
  • Capture a?timeline trace?of your site to help diagnose performance issues.
  • Test Chrome Extensions.

大多数在浏览器里手动可以做的事都可以用 puppeteer 来做,比如说:

  • 生成一些网页的截图和 pdf
  • 爬取一个 SPA(单页 WEB 应用)并且生成预渲染内容(比如说过SSR,服务器端渲染)
  • 自动化的表单提交,UI 测试,文本输入等
  • 创建一个现代化的自动化测试环境,在最新版的Chrome 里使用最新的 JavaScript 和浏览器新特性来跑你的测试。
  • 捕获你的网站的 timeline trace 来帮助分析诊断性能问题
  • 测试谷歌扩展插件

你可以在 https://try-puppeteer.appspot.com/ 尝试一些 puppeteer 的功能。

Api 文档:https://github.com/GoogleChrome/puppeteer/blob/v1.10.0/docs/api.md
示例:https://github.com/GoogleChrome/puppeteer/tree/master/examples

Reference

Contact

Contact me: [email protected]

原文地址:https://www.cnblogs.com/weihanli/p/introduction-to-puppeteer.html

时间: 2024-10-11 06:11:22

web前端自动化测试利器puppeteer介绍的相关文章

web前端开发利器——基于ruby的sass,compass和Dreamever+emmet插件

引言:web前端的html页面和css文件有时写起来会很麻烦,但是借助一些工具能够帮助我们轻松的构建相应的页面.sass是css的一款开发工具,有相应的语法,可以有逻辑和简洁编写css代码.本文介绍的主要是基于Dreamever cs5加上emmet插件快速编写简洁html页. 1. ruby安装与配置 ruby可以从百度搜索中的百度软件安装中心找到或者官网下载.安装很简单,以.exe文件进行安装,直接进行下一步安装就行.安装完成之后,在命令行窗口中输入 ruby -v,如果显示了相应的版本说明

Web前端调试利器—FireBug使用方法推荐

概述 FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件.它可以用于调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.它提供了几乎前端开发需要的全部功能.官方网站:www.getfirebug.com 如何获取Firebug? 因为它是Firefox浏览器的一个扩展插件,所以首先需要下载Firefox浏览器.读者可以访问www.mozilla.com下载并安装Firefox浏览器.安装完成后用它访问https://addons.

学习web前端之神器sublime text 3

第一次在博客园写博客,以前都是看别人写的技术在自己慢慢的学习.现在想自己把每天学习的东西理解并记录下来,加深下印象以后可以做个回顾.不知道自己能否坚持每周至少写2篇博文. 古话说的好:工欲善其事,必先利其器.所以我们要找到一个神器来帮助我们更好的学习前端开发,要么记事本怎么样?不错是不错估计要写到猴年马月了. 百度一搜,web前端开发利器有很多,比如:EditPlus,Dreamweaver,HBuilder,Webstorm,Aptana Studio,Sublime text,这么多最后我还

第二篇web前端自我介绍

各位面试官,大家好 我叫汤慧来自湖南益阳专业是电子商务web前端方向我今天应聘的职位是web前端开发. 在校期间我主修的课程是HTML CSS JavaScript及JQuery,在课余我喜欢通过逛论坛博客github来了解一些前端的前沿的开发技术,并且通过自学学习了bootstrap angular . 我有过半年的企业实习经验,做过几个项目有团队项目和个人项目,在实习期间我清楚的了解了开发的流程,也巩固了在大学学习的知识点,并且意识到团队合作的重要性.所以我很感谢这段实习的经历让我受益匪浅.

web前端介绍

web前端内容介绍 标签(空格分隔): web前端 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为"牛皮癣"网页.例如一篇QQ日志.一篇博文等展示性文章.在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性).相信可能大多数人都听过"网页三剑客 Dreamweaver+Firework

web前端 -- web介绍

1.先简单介绍几个概念: H5是HTML标准的5.0版本,HTML5简称H5.需要用到的技术:HTML + CSS.JavaScript. web前端:是根据H5的功能和作用所起的一个别名.这里可以举个栗子:微博 - 新浪微博 类比 web前端  - H5. 网页:标记成对出现,标记不会显示在浏览器页面上,这些标记超越了普通文本的意义,叫做HyperText. HTML:Hypertext Markup Language(超文本标记语言). 总的来说,H5和HTML5是同一个东西,web前端是H

web前端html实例-optgroup标签的用法介绍

此标签可能使用频率并不是太高,但是对于组织数据还是大有用处的,一般要和select标签配合使用,看一段代码实例一切就都明白了,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>we

Web 前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工