使用 puppeteer 实现前端 E2E 测试

金钱豹子
• 阅读 3227

前言

页面交互一直是前端最为重要的组成部分,可要实现其 UI 层次的自动化测试一直是老大难的问题。过去,我们只能通过人工去点击页面,测试页面交互、数据传输。因此,E2E 测试应需而生,E2E 测试极为便捷的解决了用户层面的交互测试。

基于 puppeteer 的 E2E 测试

什么是 E2E

E2E(End To End)即端对端测试,属于沙盒测试,通过编写测试用例,模拟用户操作,确保页面交互时,组件间通信正常、数据传递如预期。结合 Puppeteer 和谷歌浏览器扩展程序 Puppeteer recorder 可以很快实现一个 E2E 测试用例。

Puppeteer

Puppeteer 是一个 Node 库,它提供了一个许多高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。
Puppeteer API 是分层次的,反映了浏览器结构。

What can puppeteer do?

  • 生成页面的屏幕截图和PDF。
  • 抓取SPA并生成预渲染内容(即“SSR”)。
  • 自动表单提交,UI测试,键盘输入等。
  • 创建最新的自动化测试环境。 使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
  • 捕获您网站的[时间线跟踪]
  • 实现简单的爬虫

安装依赖

新建 node 项目下执行指令:

cnpm install puppeteer --save

按需引入

const puppeteer = require('puppeteer')

Puppeteer recorder

Puppeteer recorder 是一个 Chrome 扩展程序,可记录您的浏览器交互并生成 Puppeteer 脚本。编写用于抓取、测试和监视的 Puppeteer 脚本可能很棘手,而Puppeteer recorder 可以很便捷的实现。

简单的说,Puppeteer recorder 可以帮助你记录在 Chrome 浏览器上执行的操作,并生成 Punppeter 代码。实现“一次操作,生成测试”,极大的缩短了我们书写 E2E 测试的时间。

点赞
收藏
评论区
推荐文章
liam liam
3年前
高效进行接口测试,简单易懂!
前言日常测试过程中,常常需要多种工具来接力完成自己的接口测试任务。比如说,使用swagger查看接口文档,使用mock编造接口数据对前端页面做测试使用postman测试后端接口,用Jmeter来做接口自动化测试/性能测试。那有没有一款软件可以完美集成以上所有的功能?笔者发现一款叫Apifox的软件,一款完成能完成以上几乎所有软件的功能。官方给出Apifox(
C_N_Candy C_N_Candy
4年前
Postman接口测试学习笔记(入门到精通)
Postman使用1.什么是接口:分为内外部接口,软件给外部提供的一种服务,用于数据传输2.软件为什么需要接口:接口能让内部数据被外部进行修改3.为什么要做接口测试:前后端分离,开发进度不一,测试左移,尽早测试。基于安全考虑,前端认证容易绕过,需要测试接口安全性。接口测试的本质:就是测试接口能否正常的交互数据,权限控制以及异常场景接口测试协议1.w
Stella981 Stella981
3年前
Robot Framework 使用【1】
前言RobotFramework作为公司能快速落地实现UI自动化测试的一款框架,同时也非常适合刚入门自动化测试的朋友们去快速学习自动化,笔者计划通过从搭建逐步到完成自动化测试的过程来整体描述它的使用。RobotFramework环境搭建步骤RobotFramework
Stella981 Stella981
3年前
RobotFramework自动化测试之元素定位
前言:最近在做基于RF框架的Web自动化测试,其中涉及到元素的定位,主要用到id、name、xpath、css四中定位方法,尤其后面的两种方法特别有效,可以解决大部分的定位问题。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
京东云开发者 京东云开发者
2个月前
探索Playwright:前端自动化测试的新纪元
作者:京东科技张新磊背景在前端开发中,自动化测试是确保软件质量和用户体验的关键环节。随着Web应用的复杂性不断增加,手动测试已经无法满足快速迭代和持续交付的需求。自动化测试通过模拟用户与应用的交互,能够高效地执行重复性测试任务,加快测试周期,提升测试覆盖率
API 小达人 API 小达人
1年前
【前端小技巧】如何使用 Eolink Apilkit 调用 Mock
在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。这个时候Mock就可以很好的解决这个问题,前端团队可以在API还没开发完成的情况下,借助MockAPI实现预对接,加速开发进程。测试团队可以通过MockAPI解决不必要的系统,完成集成测试。EolinkApikit为前端工程师提供API文档管理,快速接口测试,以及MockAPI创建与调用,及查看文档变更历史的能力。有助于前端工程师快速查看API文档详情与历史记录,快速生成和使用MockAPI提前进行页面效果验证。
Java服务总在半夜挂,背后的真相竟然是... | 京东云技术团队
最近有用户反馈测试环境Java服务总在凌晨00:00左右挂掉,用户反馈Java服务没有定时任务,也没有流量突增的情况,Jvm配置也合理,莫名其妙就挂了
API 小达人 API 小达人
1年前
国投证券如何引领金融行业的 API 治理创新?
在开发、对接阶段,因为API资产统一托管在平台上,因此可以通过API文档快速生成MockAPI,前端开发人员只需要通过MockAPI就可以快速对接后端接口,将前后端开发工作解耦,提高工作效率。在测试阶段,测试人员可以基于API文档快速创建单元测试用例,API文档和测试用例之间自动形成绑定关系。当API发生变更的时候,平台可以将数据同步到测试用例,并且可以与CI/CD流程结合,实现单元测试用例的自动化回归测试工作,并且将测试报告推送给相应邮箱。
京东云开发者 京东云开发者
8个月前
探索Playwright:前端自动化测试的新纪元
作者:京东保险张新磊背景在前端开发中,自动化测试是确保软件质量和用户体验的关键环节。随着Web应用的复杂性不断增加,手动测试已经无法满足快速迭代和持续交付的需求。自动化测试通过模拟用户与应用的交互,能够高效地执行重复性测试任务,加快测试周期,提升测试覆盖率
金钱豹子
金钱豹子
Lv1
十指紧紧的相扣,也总有一天会分开。
文章
3
粉丝
0
获赞
0