一、简介

Cypress是新一代ui测试框架,类似于selnium,它基于node js,支持webpack构建。


功能特点:

1.时间旅游:测试的每一步都有 snapshot,只需将鼠标悬停在命令日志中的命令上,就可以准确地查看每个步骤中发生了什么。


2.可调试:我们无需猜测测试用例为何失败,直接从熟悉的工具进行调试(例如:谷歌浏览器的开发者工具),可读错误和堆栈跟踪让调试更有效率。


3.自动等待:再也无需在测试用例代码中添加 wait 或 sleep 代码,Cypress 会自动等待命令和断言完成。


4.函数间谍:响应劫持、时钟回拨:验证和控制函数、服务器响应和时钟。常用的单元测试功能。


5.网络通信控制:无需涉及服务器即可控制、保存和测试边缘情况。你可以根据需要保留网络流量。


6.视图快照和视频:从命令行运行测试时,我们可以查看失败用例的视图快照和整个测试过程的视频。


二、开发工具

1.VSCode 由微软研发的一款免费、开源的跨平台文本(代码)编辑器。几乎完美的编辑器

下载地址https://code.visualstudio.com/Download


2.webstorm WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。习惯intelij idea开发java的同学可以选择它

下载地址https://www.jetbrains.com/webstorm/


三、Cypress的目录结构

Cypress(二)Cypress相关介绍-LMLPHP

fixtures:测试用例中需要用到的资源,包括测试数据、图片、json信息等,可以使用cy.fixture读取


integration:测试脚本存放目录,允许多级目录,其下的example目录是官方提供的测试脚本样例


cypress.json:Cypress的配置文件


package.json和package-lock.json  npm初始化项目自动生成的文件


测试脚本不按规范命名,结尾不写spec也能运行,但是最好还是按照规范.spec.js结尾。


四.测试用例运行

Cypress(二)Cypress相关介绍-LMLPHP

右上角选择你电脑上的浏览器,我这里选的是谷歌,可以单个点测试用例脚本文件,也可以点右上角Run all specs统一执行所有的用例。


五.Cypress元素定位

Cypress(二)Cypress相关介绍-LMLPHP

在脚本运行界面点击右边左上角定位的图标,这个时候你就可以选择你要定位的元素了,选择好要定位的元素,图3位置直接就会出现定位的代码了,你可以直接拷贝到你的项目里,方便至极。


六.优缺点分析

优点:

1.安装简单,API简单易上手


2.速度上比selenium要快,轻便


3.定位元素相当方便,不像selenium很多时候元素找不到,必须通过copy全的xpath或者定位到父节点然后遍历直到找到子节点


4.有重试机制,某些步骤运行失败时自动重试,这样可以提高运行的稳定性,不至于一旦网络卡顿导致失败抛异常立即退出


5.运行过程直观,可以回看某一步执行过程,运行失败时自动截图


6.内置的cy.request可以跳过ui层,直接调用接口


7.自带数据mock机制


8.支持webpack构建打包及相关配置


缺点及不足

1.不擅长浏览器兼容性测试


2.不擅长oauth2授权登录验证


3.目前只能测试web页面


Cypress(一)Windows环境Cypress环境搭建


本文分享自微信公众号 - 软件测试架构师俱乐部(gh_03227f9a322f)。
如有侵权,请联系 [email protected] 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

09-05 01:56