51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

测试开发精英班,通向高级软件测试工程师【周活动】 找茬--心里圈的故事 !【长期招募】博为峰网校招聘兼职讲师!横扫BAT,Python全栈测试开发技能大全
【106期】:如何树立正确使用Python做开发的习惯 【征稿】提交你的测试成绩单! 【专题】用尽一切办法只为让你学好用例 自学软件测试那点事
查看: 554|回复: 0

强大的全新 Web UI 测试框架 Cypress - 初尝甜头

[复制链接]

该用户从未签到

发表于 2019-4-16 14:10:08 | 显示全部楼层 |阅读模式
安装限制
Mac OS 10.9+;
Linux Ubuntu 12.04+, Fedora 21, Debian 8, 64-bit;
Windows 7+(目前Windows仅提供32位Cypress应用程序)
安装NodeJS
如何安装NodeJS参考这里,里面有各种平台的安装包. 直接下载安装即可。安装完后通过node -v指令查看是否安装成功。

安装Cypress

选择一个目录或新建一个目录作为你Cypress项目试水的目录,进入这个目录(Windows推荐使用Power Shell终端,Mac和其他L/Uinux系统则使用默认的Terminal);
使用npm init指令来初始化一个本地的NodeJS包文件;
运行指令npm install cypress --save-dev来安装Cypress;
运行指令.\node_modules\.bin\cypress open来打开Cypress应用程序; 不出意外,你将会看到这个界面:

接下来,我们还需要安装一款IDE,用来快速开发自动化!先不要关闭Cypress应用程序,因为你在此应用程序外所有的操作,它都能动态加载刷新,包括写用例的时候!
安装VSCode
微软:要说IDE,我微软敢说第二,没人敢说第一!
JetBrains:???
吃瓜群众:快点!瓜子、板凳...

微软的VSCode是一款相当优秀的IDE,推荐使用它来进行自动化开发。安装教程参考这里,直接根据平台下载安装。

配置Cypress运行环境 VSCode(目前笔者测试发现仅在Ubuntu16.04下开发C++程序时会有部分按键无效或跳键的情况)下载完成后,我们将配置JS/Cypress运行环境以便进行代码开发。
在VSCode里,File>Open Folder, 选择{your_project}/cypress目录,比如我这里就是C:\Users\T10051\CypressTest\cypress, 打开之后大概是这样:

接下来我们创建第一个用例,点击integration目录>New Folder, 起名为MyTests,再在MyTests下面新建一个myFirstTestSuites.js的文件,切换到Cypress,你是否发现Cypress自动给你刷新了目录,你新建的myFirstTestSuites.js测试集文件,它已经帮你监测到了!只不过它现在还没有任何内容。


3.Cypress提供了很多示例程序,所以我建议你暂时不要删除它们,以便随时可以参考。现在我们开始写第一个自动化示例程序。
  1. /// <reference types="Cypress" />

  2. describe('百毒网站首页测试用例集', function() {
  3.     beforeEach(() => {
  4.           cy.visit('https://www.baidu.com')
  5.         })
  6.       it('百度一下按钮文本检查', function() {
  7.         cy.get("#su").then($button_start_search=>{
  8.             expect($button_start_search.attr("value")).to.eq("百度一下");
  9.         })
  10.       })
  11.     })
复制代码

Cypress会自动检测你可用的浏览器,为了以防万一,我建议把Chrome设置为默认浏览器,当然你也可以运行Cypress的时候手动指定cypress run --browser chrome。
运行效果如下图:

代码解释:

reference表示告诉VSCode要去Cypress package里找相关的语义解析,这样一来Cypress相关的语法和函数等就可以尽情地使用了;
describe声明了一个测试用例集;
beforeEach相当于单元测试的setup,即在每个测试用例运行前需要做的事;
it声明了一个测试用例;
cy.get接受一个js selector, 就是元素定位字符串,当然Cypress也支持xpath定位,详见这里;
通过then或should,我们可以把get到的元素对象传递到下一步,以便做进一步处理,这里通过then把找到的button_start_search传递到下一步,并最终通过expect函数来判断button_start_search的value属性是否跟预期一致。
保存代码,在Cypress应用程序里找到myFirstTestSuites.js,点击它,你会发现它跑起来了,而且如果再次对用例修改并保存,Cypress会自动检测到新的改动,并马上运行!当然,你也可以去掉这个自动重载机制...

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

x
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /2 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2019-9-21 13:22 , Processed in 0.057740 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2019 Comsenz Inc.

快速回复 返回顶部 返回列表