前端e2e测试尝试

最新推荐文章于 2024-08-09 08:25:11 发布
最新推荐文章于 2024-08-09 08:25:11 发布
阅读量458 收藏
点赞数
分类专栏： 工程化 测试 nodejs 文章标签： 前端 e2e puppeteer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanglei1991gao/article/details/106884381
版权
工程化 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
nodejs
5 篇文章 0 订阅
订阅专栏
测试
3 篇文章 0 订阅
订阅专栏

环境

node: 12.14.0 
puppeteer：3.3.0
resemblejs：3.2.4

解决问题

通过puppeteer模拟用户操作，将操作后的页面效果进行截屏保存，此外保留第一次成功运行后的所有截屏图片，回归测试时可利用新旧截屏图片对比是否一致找出问题。

目录及文件介绍

  • compared ：存放前后图片对比结果生成的图片
  • imgs ：存放页面截图
    • first-test ：存放第一次运行测试脚本(main.js)所产生的的页面截图
  • src：存放核心源码
    • test ：存放测试脚本
  • compare.js ：存放基于resemblejs的图片对比脚本
  • main.js ：入口文件
  • runDiff.js ：执行图片对比

源码地址GIthub

wl_
关注
专栏目录
端到端的测试（e2e）
weixin_43058364的博客
11-13 3385
端到端的测试（e2e） 端到端测试类似于系统测试，测试级的“宏大”的端点，涉及整个应用系统环境在一个现实世界使用时的模拟情形的所有测试。例如与数据库对话，用网络通讯，或与外部硬件、应用系统或适当的系统对话。端到端架构测试包含所有访问点的功能测试及性能测试。从某种意义上来说，端到端架构测试实质上是一种"灰盒"测试，一种集合了白盒测试和黑盒测试的长处的测试方法。端到端架构测试所要求的单项功能和性能测试...
这一次，彻底入门前端测试，覆盖单元测试、组件测试（2.4w 字）
小王的技术库
03-02 2322
什么是软件测试？要回答这个问题，我们首先需要先明确为什么要进行软件测试？答案很简单，就是为了保证软件质量。对于软件来说，不论采用什么技术和什么方法来进行开发，软件产品中都或多或少会存在一些错误和问题。采用先进的开发方式、完善的开发过程，可以减少错误的引入，但是不可能完全杜绝软件中的错误，而这些错误就需要通过测试来找出。因此，软件测试是软件质量保证的关键步骤。关于软件测试的定义，一直有正反两方面的争辩。
e2e 测试（1）
CWW2016的博客
10-19 717
距离上一随笔，已经有一个月没有没写。到今天，刚刚好好，是学习e2e测试的一个月。今天有点时间可以总结一下这个月来的收获。 1、搭建e2e的测试环境 我是使用 Vue 构建项目，所以我也是通过Vue-cli生成已经包含 Selenium 与 Nightwatch 的 Vue 种子项目。 setup e2e tests with Nightwatch?Yes(单元测...
Resemble.js 开源项目教程
最新发布
gitblog_00525的博客
08-09 411
Resemble.js 开源项目教程 Resemble.js项目地址:https://gitcode.com/gh_mirrors/res/Resemble.js 1. 项目的目录结构及介绍 Resemble.js 项目的目录结构如下： Resemble.js/ ├── demoassets/ ├── github/ │ └── workflows/ ├── libs/ │ └── tw...
e2e测试
SongGuoQ的博客
08-30 2889
e2e测试及cypress工具使用
E2E测试
CJohnSnow的博客
01-11 462
执行语句：scripts/e2e.sh 测试单个文件：test/e2e/specs/block-volume/operate_block_volume_test.js 执行条件：–testcase “Test set snapshot protection” （只执行上方文件某一部分）
博客系统的实现（前端+后端+测试）
XPmai的博客
10-09 839
想要实现完整的博客系统，需要实现前端的页面（博客列表页+博客详情页+登录页+博客编辑页）和后端代码（部署到服务器+连接到数据库）。并且对博客系统的登录页进行功能测试和性能测试，对博客编辑页和博客详情页进行功能测试。
基于ngMockE2E实现后台数据模拟
08-27
这个工具在E2E测试中非常有用，因为它可以确保前端代码在预期的响应下正常工作，同时避免了网络延迟和依赖服务器状态的问题。 **安装与配置** 首先，你需要确保已经安装了AngularJS和AngularJS-Mock库。如果还没有...
前端单元测试及其工具介绍（一）
qq_33024515的博客
06-30 4231
文章目录前端单元测试及其工具介绍为什么需要单元测试单元测试的一些要素工具mocha介绍API钩子函数chai介绍使用mochawesomenyc/Istanbul介绍Sinonkarma定义介绍一些karma中需要了解的插件以及知识参考@vue/test-utils一些约定附录Unit Testing和E2E Testing常用的测试有vue-cli中支持参考TDD和BDD开发方式测试覆盖率Jes...
cypress——前端自动化测试框架
m0_46266264的博客
07-27 6437
前端自动化测试概述 MVC（Model View Controller）模式开始流行。MVC是模型（Model）、视图（View）和控制器（Controller）的缩写，它使业务逻辑、数据、界面显示分离。这时Web开发属于View层。 Ajax（Asynchronous JavaScript and XML）的出现改变了上述情况，作为一种能够创建交互式网页应用的网页开发技术，它使用户操作与服务器响应异步化。特别是随着Gmail这个里程碑式产品的使用，Web开发全面进入了“响应式页面”时代，也催生了前端开发
e2e基准测试：最终平台的性能测试
02-25
端到端基准测试脚本 此存储库包含性能测试脚本，该脚本可安装，配置，执行和评估工作负载。
js-e2e:JavaScript端到端
03-17
JavaScript端到端示例 这些示例是文档的一部分。 JS开发人员中心文档中使用的JS e2e示例 JS e2e开发人员中心使用的示例包括 代码段 这些是Azure服务的基于任务的简短代码-在此存储库中找到。 端到端应用 这些是使用Azure服务的客户端，服务器或全栈应用程序-在其他存储库中可以找到。 样本 对应的文档 资源 蔚蓝 学习电视 开发者倡导者资源-由倡导者产生 社区资源-由社区成员生产 让我们知道 如果代码，文档或其他信息有错误或不完整，请告知我们。
[front-end] 测试 e2e
hudk114的专栏
02-08 445
最近好玩，根据vue-cli里的e2e看了下nightwatch的使用 之后有空研究下内部原理 night watch night watch本身只是一个测试框架而已。如图，webdriver与dev都不是night watch的内容，因此需要在配置文件中指定。night watch中则包含测试逻辑。 当然，night watch也可以包含其他测试框架，比如mocha，通过配置文件中的...
前端测试：e2e测试
前端御书房
06-06 2346
对于前端来说，测试主要是对HTML、CSS、JavaScript进行测试，以确保代码的正常运行。常见的测试有单元测试、集成测试、端到端（e2e）的测试。单元测试：对程序中最小可测试单元进行测试。我们可以类比对汽车的测试，在汽车组装之前需要对零件进行测试，这种情况下就和单元测试一致。只有零件正常才会进行下一步的组装集成测试：对多个可执行单元组成的整体进行测试。类比于汽车的测试，就相当于测试发动机之前，需要把发动机所需的零件组装在一起对组装后的发动机这个整体进行测试。
端到端测试（e2e测试）
qq_42666043的博客
07-27 3044
端到端测试：end to end测试，又称为e2e测试，可以看做一个自动化的测试脚本，其目的是模拟用户行为，通过自动的访问一个真实浏览器环境下的页面，对于页面上的任意操作，断言浏览器中发生特定的行为。 ...
web前端测试——e2e测试
热门推荐
xishaoguo的博客
09-12 2万+
开发环境：安装有node的macbook（windows没测） 第一步： 创建自己需要测试的项目，如在桌面创建一个test目录作为我们的项目根目录。 打开sublim text ，并将项目拖到sublim text中，方便管理。 第二步： 打开终端，输入命令cd Desktop/test进入到项目根目录，输入npm init ，一路回车生成package.json文件。 第...
E2E测试学习
岳来的博客
05-14 600
E2E测试学习
Puppeteer E2E测试入门
程序员-小枫的博客
08-28 875
Puppeteer E2E测试入门 本文内容涉及ES6 async、jest的相关知识，对于以上内容不太了解的读者可以先了解相关内容。 Puppeteer是什么 它由Chrome官方团队提供，通过Devtools协议在Node层提供了一系列API来控制chrome或者chromium，也就是说我们能够编写Node环境的代码即可对浏览器的行为进行控制。通过它我们可以做到以下行为： 生成页面快照：图片、pdf 抓取spa应用生成预渲染页面 自动化表单提交、UI测试、键盘输入
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wl_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值