Cypress系列(1):Cypress尝鲜之旅-安装篇

2020/07/20 08:00
阅读数 398
e2e测试,即end to end(端到端)测试。理论上前端页面由前端框架来测试确实更为合适,而Cypress就是一款专注e2e的测试框架
看看网友们如何评价Cypress:能够让软件开发实现并行测试,持续集成;专有元素定位,框架级别元素自动等待,原生支持Mock;专有TestRunner,命令执行细节全景回放呈现,定位问题更加精准。听起来好牛逼,迫不及待的尝试一把。

1.安装Node.js

Node.js的安装方式就省略了,网上百度都有,安装完后通过node -v指令验证是否安装成功。

2.创建package.json

使用命令npm init在项目的根目录下来初始化一个package.json文件,运行这个命令后,它会询问一些关于包的基本信息,根据实际情况回答即可。如果不喜欢这种方式,可以使用npm init --yes (或npm init --y)命令直接使用默认的配置来创建package.json文件,最后根据需要修改创建好的package.json文件即可。

#在项目的根目录下执行npm init


3.安装cypress

Cypress有二种安装方式

一、下载安装

#下载地址https://download.cypress.io/

该网站会根据你的操作系统,自动下载最合适的版本;下载完后,解压文件,双击就可以使用 Cypress 了!但下载安装Cypress有个缺陷,无法运行 DashBoard 服务,直接下载仅用作快速尝试 Cypress;所以,不推荐此方式!

二、在线安装(推荐)

确保你已经运行了npm init,或者根目录存在node_modules文件夹,或者在你项目的根目录存在package.json文件, 以此来确保cypress被安装到正确的路径下。

由于不可说的原因,npm install 时,速度总是不尽如人意,解决办法是修改npm的数据源

#数据源修改到淘宝源npm config set registry http://registry.npm.taobao.org#修改后可以通过如下命令检查是否修改成功npm config get registry

进入cypress项目的根目录,输入如下命令,安装过程可能比较漫长,需要耐心等待,我可是下载安装了一天才完成,这里面的警告可以忽略

npm install cypress --save-dev


4.启动cypress

进入 .bin 目录,然后输入 cypress open 启动 cypress

第一次安装后启动时,可能会出现如下错误

我们只要删除 .bin 目录下的 cypress 文件,然后点击图中的“Try Again”出现如下界面表示启动成功了。


启动成功后,会在 .bin 目录下生成如下几个文件,还有其它不相关的文件就不列出来了

- cypress  cypress目录---- fixtures 测试数据配置文件,可以使用fixture方法读取---- integration 测试脚本文件---- plugin 插件文件---- support 支持文件- cypress.json  cypress全局配置文件

5.创建用例

1.我使用的是vscode,选择  File>Open Folder, 选择项目目录中cypress文件 夹,如 C:\cypress_test\node_modules\.bin\cypress
2.创建第一个用例,右击 integration 目录>New Folder, 起名为testcase,再在 testcase 下面新建一个 login.spec.js 的文件,切换到cypress,发现cypress自动帮我们刷新了目录,你新建的 login.spec.js 它已经帮你监测到了!

exam ples 文件夹中提供了很多示例程序,建议不要删除它们,方便参考。
我写的第一个自动化用例如下
/// <reference types="cypress" />describe('center登录测试用例',function(){    beforeEach(() =>{        cy.viewport(800,600)        cy.visit('/')    })    it('登录',function(){        cy.get('#username > input').click()        cy.get('#username > input').type('hubiao')        cy.get('#password > input').type('******{enter}')        cy.wait(2000)        cy.get('.login-btn > button').click()        cy.get('.logo-title').should('be.visible')        cy.get('.logo-title').should('contain','只有edit的企业')    })})
保存代码,在 cypress 应用程序里找到 login.spec.js ,点击它,你会发现它跑起来了,而且只要运行的界面没有关闭再次对用例修改并保存后,cypress 会自动检测到新的改动,并马上运行!当然,你也可以去掉这个自动重载机制

7.你可能会遇到的坑

1. 跨域导致执行不稳定,在 cypress.json 添加  "chromeWebSecurity" : false 即可
2. 执行用例时可能使用的是你本地的浏览器,导致执行失败,可切换成 Electron 的浏览器来执行
我对 cypress.json 还做了如下修改
{"chromeWebSecurity": false,"baseUrl": "http://center.lbuilder.cn","viewportWidth": 1280,"viewportHeight": 600,"integrationFolder": "cypress/integration","testFiles": "**/*.spec.js"}

cypress 执行速度确实很快,代码也很简单,但语法还是有点不习惯,学了python 又要学习JS了,哈哈,真是学无止境啊

本文章仅代表个人观点,如有纰漏喜欢私信或留言


如果你认同这篇文章,请点击 在看


本文分享自微信公众号 - 彪哥的测试之路(gh_c1b79633c733)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部