文:华为云DevCloud 乐少 1.背景 1.1 前端自动化测试较少 前端浏览器众多导致页面兼容性问题比较多,另外界面变化比较快,一个月内可能页面改版两三次,这样导致对前端自动化测试较少,大家也不是很care.18年英国的一位开发者做过一些前端测试工具调查如图1-1所示.从图中可以发现有43%的用户未使用过任何前端测试工具. 图1-1 1.2 基于Puppteer的自动化测试 Puppeteer(中文翻译为“木偶”)是Google Chrome团队官方的无界面(Headless)Chrome工…

官方文档:Puppeteer 今天大概介绍一下我项目用到的puppeteer操作: // 启动浏览器 const browser = await puppeteer.launch({ executablePath: 'xxxx', // 这里可以替换Chromium or Chrome的可执行文件,代替安装puppeteer附带的chrome args: [ '--disabled-gpu', // 正常服务器连显卡都没有 '--no-sandbox', // 非沙箱模式 ] }) // 打开页…

原文链接:https://developers.google.com/web/tools/puppeteer/articles/ssr 注:由于英文水平有限,没有逐字翻译,可以选择直接阅读原文 tips:Headless浏览器完全可以作为服务端渲染的一个替代方案,在服务端转化js 站点为静态html页面:在webserver 上运行Headless 浏览器完全可以预渲染现代js 模式的应用,增加响应速度,对SEO也更加友好 本篇涉及到的技术展示了如何通过Google Headless 框架(pu…

接上篇 防止重新渲染 其实说不对客户端代码做任何修改是忽悠人的.在我们的Express 应用中,通过Puppteer加载页面,提供给客户端响应,但是这个过程是有一些问题的. js脚本在服务端的Headless Chrome 中执行过一次,但是等浏览器拿到真正的结果后,并不会阻止js再次执行,所以这种情况下js会执行两次(客户端一次,服务端一次) 针对我们的例子,我们可以简单的修复一下,我们需要告诉页面,需要的html已经生成了,不需要再次生成了,所以我们可以简单的检测<ul id="pos…

不要相信前端是安全的,今天简单验证一下,但是希望大家支持正版,支持原作者,毕竟写书不易. 安装Puppteer npm install --save puppeteer 选择目标网站 我们这里选择胡子大哈大神的网站 http://huziketang.mangojuice.top : 爬取所有文章 基本思想思路 实现方案 爬取书籍目录->根据目录爬取没个章节的内容 注意的地方 本书有付费章节和免费章节,爬取付费章节需要禁用javascript执行,然后移除对应的mask的dom节点 核心代码 c…

page对象是puppeteer最常用的对象,它可以认为是chrome的一个tab页,主要的页面操作都是通过它进行的.Google的官方文档详细介绍了page对象的使用,这里我只是简单的小结一下. 客户端模拟 页面模拟设置相关函数有如下几个, page.setViewport: 设置视图大小 page.setUserAget: 设置UserAgent page.SetCookie: 设置Cookie 另外,也可以使用emulate函数提供快捷设置,puppeteer/DeviceDescript…

为什么需要网络拦截工具 通常我们会遇到这样的场景: 线上一个图片有异常,线下修正之后需要发布之前进行测试,有些情况下,QA同学有直接在线上环境测试的需求,只是链接本地资源,通常在windows下有一个很好的工具fiddler可以完成这个功能,当然mac下也有其对应的工具Charles,但是工具收费,在不付费的前提下,使用体验很差. 线上js资源出了bug,线下修复之后通过测试区不好还原场景,因为只有在线上的数据环境下才能重现bug,但是在线上的代码一般都是混淆过的,调试很不友好(这里不考虑生成s…

原文:https://blog.csdn.net/LaySwift/article/details/79458947 1,vscode原生支持markdown,导出需要插件,基于node.js,需要node.js环境.2,只需要装一个预览插件神器:Markdown Preview Enhanced.  3,Markdown Preview Enhanced的键盘映射,按ctrl-shift-m or cmd-k v显示流程图,实时渲染 4,导出流程图时需要安装插件puppteer sudo np…

CukeTest+Puppeteer的Web自动化测试 一.初识BDD.Cucumber(黄瓜).CukeTest 行为驱动开发(Behavior Driven Development,BDD).行为驱动开发能够保持文档和测试脚本的一致性,便于维护.也便于业务人员和技术人员沟通,始终保持应用软件的技术实现反映业务的需求. Cucumber是行为驱动开发最流行的一个框架,它使用自然语言描述的行为来驱动测试代码,也支持多种语言,如Ruby.Python.JavaScript.Java等. Cucum…