微信号:testing51testing

介绍:51Testing软件测试网,人气最旺的软件测试技术门户,提供软件测试社区交流,软件测试博客,人才服务,测试沙龙,测试杂志,测试资料下载等全方位信息服务,是国内最专业的软件测试就业培训、企业服务供应商...

网红端到端测试神器Cypress开箱试用报告

2018-11-29 17:30 CC先生

点击上方蓝色字体,关注我们


  最新一期TW的技术雷达上出现了一款端到端的开源测试神器Cypress,号称是不懂代码的测试人员、业务人员都可以使用,同时还不依赖于已经是端到端测试扛把子的Selenium,CC先生很好奇,以下是开箱试用报告:


1

安装Cypress 

  官网下载,Windows下的安装包大概有233M,下载耗费时间依赖于你的网速咯。 也可以直接到github的cypress项目下获取 : https://github.com/cypress-io/cypress Windows下解压后点击cypress的安装文件,一路默认,直到出现以下画面:  

install

  1)打开cypress客户端, 点击箭头位置,通过资源管理器选择/CypressTest目录或者新建一个目录名称为CypressTest(此处为自己取的名字,你也可以写其它名称) 2)如果/CypressTest目录下没有cypress目录,那么cypress就会在CypressTest目录下新建cypress目录,并初始化一些文件  

install default

  想使用npm安装的小伙伴先要需要配置node的环境。(此环节可Google)


2

初始化Cypress 

  安装完成后安装目录下有一个cypress目录和cypress.json的配置文件,cypress目录下的结构如下:

  |-- fixtures

  |-- integration

  |   `-- example_spec.js

  |-- plugins

  |   `-- index.js

  `-- support

  |-- commands.js

  `-- index.js

  fixtures 文件夹存放自定义 json 文件,integration 文件夹编写测试,plugins 和 support 是非必须使用的文件夹,需要自定义指令的时候会用到。


3

运行Cypress 

  可以点击examples里的任意一个js文件,它会单独打开一个浏览器并开始执行。下图是执行了actions_example.js的情况。

  actions_example

  1. 编写一个测试用例 设计一个常见的登录功能的测试流程

  2. 访问某个页面

  3. 查找DOM进行交互,例如输入,点击,选择之类

  4. 进行断言

describe('InfoQ登录测试', () => {

  it('登录页面', () => {

   cy.visit('https://account.geekbang.org/infoq/signin?redirect=https%3A%2F%2Fwww.infoq.cn%2F')

   cy.get('input[name="cellphone"]').eq(0).type('18013457889')

   cy.get('input[name="password"]').eq(0).type('password')

   cy.get('input[value="登录"]').click()

   cy.get('body').should('contain', 'Bad login')

  })

})

  运行后得到以后结果:  

login_result

  可以看到以上的运行结果时有错误的提示,出错的地方来自于DOM中"登录"按钮没有被识别到,具体的可参考 https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html# 这个就当课后作业了。

  以下给一个进阶版的脚本,大家可以运行一下看看效果:

describe('should display a correct error message when you enter wrong login information', function () {

 before(function () {

   cy.visit('https://www.amazon.com/')

 })


 var randomEmail = Math.random();

 var randomPassword = Math.random();


 it('displays a correct error message', function () {

   cy.get('#nav-your-amazon').click()

   cy.get('#ap_email').type(randomEmail + '@gmail.com')

   cy.get('#ap_password').type(randomPassword)

   cy.get('#signInSubmit').click()

   cy.get('#auth-error-message-box').should('be.visible')

 })

})

  上面的代码涉及到了before函数的用法。cypress本身是支持before,beforeEach的这类测试套件的用法。


4

试用小结 

  Cypress感觉非常容易上手而且它使用了Mocha和Chai来写测试用例,已有Mocha和Chai使用经验的同学可以很容易转换,对于已经习惯使用Selenium+Python/Java的同学来说有没有必要一定要转过来需要进一步考虑一下,而且Selenium Grid对分布式的支持目前在Cypress上还没有看到很好的实现。

具体一点来说,喜欢Cypress的理由:


  • cypress不使用Selenium:我们已经尝试过的大多数端到端工具都在使用Selenium,这就是为什么他们有几乎相同的问题。

  • cypress很好地支持任何框架或网站:有数百个项目使用最新的React,Angular,Vue,Elm等框架。cypress在旧服务器渲染页面或应用程序上也同样有效。

  • cypress测试只用JavaScript编写:虽然您可以从任何其他语言编译成JavaScript,但最终测试代码在浏览器内部执行。没有语言或驱动程序绑定 ,只有JavaScript。

  • 没有依赖关系,你把测试放在package.json中就是这样。

  • 与我们已经实验过的Selenium的端到端工具相比,cypress的运行速度要快得多。集成在CI中的时候速度的优势可以尽情体现。

  • 你的脚本的每一步都有屏幕截图,如果有任何错误的通过或失败的测试,这可能非常有用,所见即所得,这一点和以前大家用LoadRunner等老牌的商用工具的体验感是一样的棒,非常有利于调试!

  • 当然cypress也有一个明确的cyntax,容易阅读,从学习成本的角度出发大部分人都会喜欢它!

不喜欢Cypress的理由:


  • 该结构与其他Selenium端到端工具不同,之前习惯使用其它E2E测试工具的使用者来说,您可能需要花费更多时间来理解结构并找到创建脚本的最佳方法。

  • 社区:由于cypress相对较新,社区规模较小。 你很难找到问题的答案等。

  • 特征: 没有文件上传支持。 没有跨浏览器测试。 谁知道什么时候会涵盖这些东西,对于大项目这些功能至关重要。

  • 页面对象模型: 这已经被时间证明了。 赛普拉斯支持一种可能引起争议的不同方法。

  • 它仅适用于一个客户端(语言),即仅适用于JavaScript。 因此,要使用它,您必须知道JavaScript:但是这可能是JavaScript应用程序的一个优势,同时也将是cypress的一个缺点。

51Testing福利



推荐阅读

阅读☞8种技巧,玩转端到端的移动测试

阅读☞系统测试VS端到端测试:哪一个更好?

阅读☞五款最热的Node.js端到端测试框架评测

阅读☞接口测试神器—Postman从入门到上手

阅读☞TestWriter自动化测试菜鸟进阶初级达人必备神器


点击“阅读原文”,查看更多精彩内容

 
51Testing软件测试网 更多文章 【招聘】 腾讯\/平安人寿\/VIPKID等行业大佬继续招人,快来上车! 黑客怎么利用Android手机去做渗透测试? 自动化干货|教你逐步解析Selenium常用API接口 震惊!银行ATM渗透测试 1小时内可洗劫提款机 Bug大比拼|进来谈谈你遇到过的那些Bug
猜您喜欢 用户研究基础流程和 SPSS 快速数据处理 一位年薪百万老员工的离职忠告! [广告]我用两年的时间证明了一个靠谱团队 iTerm 拯救你的Terminal(终端) 理解HTTP协议