如何安装 NodeJS 参考这里,里面有各种平台的安装包. 直接下载安装即可。安装完后通过node -v
指令查看是否安装成功。
安装 Cypress
npm init
指令来初始化一个本地的 NodeJS 包文件;npm install cypress --save-dev
来安装 Cypress;.\node_modules\.bin\cypress open
来打开 Cypress 应用程序;
不出意外,你将会看到这个界面:
接下来,我们还需要安装一款 IDE,用来快速开发自动化!先不要关闭 Cypress 应用程序,因为你在此应用程序外所有的操作,它都能动态加载刷新,包括写用例的时候!安装 VSCode
微软:要说 IDE,我微软敢说第二,没人敢说第一!
JetBrains:???
吃瓜群众:快点!瓜子、板凳...
微软的 VSCode 是一款相当优秀的 IDE,推荐使用它来进行自动化开发。安装教程参考这里,直接根据平台下载安装。
C:\Users\T10051\CypressTest\cypress
, 打开之后大概是这样:
integration
目录>New Folder, 起名为MyTests
,再在MyTests
下面新建一个myFirstTestSuites.js
的文件,切换到 Cypress,你是否发现 Cypress 自动给你刷新了目录,你新建的myFirstTestSuites.js
测试集文件,它已经帮你监测到了!只不过它现在还没有任何内容。
/// <reference types="Cypress" />
describe('百毒网站首页测试用例集', function() {
beforeEach(() => {
cy.visit('https://www.baidu.com')
})
it('百度一下按钮文本检查', function() {
cy.get("#su").then($button_start_search=>{
expect($button_start_search.attr("value")).to.eq("百度一下");
})
})
})
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 会自动检测到新的改动,并马上运行!当然,你也可以去掉这个自动重载机制...
Cypress 入门系列:
注:目前官方团队正在开发 Python 版本,同样的 Free to use,对 JS 恐惧的同学不妨等一等,或者直接 JS 上手,非常简单,VSCode 装上之后,你会爱上 Cypress 和 JS,笔者会慢慢介绍各种 Web UI 自动化复杂场景下 Cypress 的强大应对,目前还没发现 Cypress 无法处理的问题!欢迎一起入坑!QQ 群:947886065.