简介
一、环境准备
1.1 VSCode安装，参考这里，直接根据平台下载安装。
1.2 cypress安装，参考这里
二、常用API
2.1 样例
/// <reference types="Cypress" />
describe('My first test case for cypress',function(){
it('visit baidu home page and search for testerhome:',function(){
cy.visit('http://www.baidu.com') //访问url
cy.title().should('contain','百度一下，你就知道') //验证页面 title 是否正确
cy.get('#kw') //根据 css 定位搜索输入框
.type('testerhome') //输入关键字
.should('have.value','testerhome') //验证关键字自动是否展示正确
cy.get('#su').click() //根据 css 定位搜索按钮并点击
cy.url().should('include','wd=testerhome') //验证目标url 是否正确包含关键字
cy.title().should('contain','testerhome_百度搜索') //验证页面 title 是否正确
cy.get('[id="1"]')
.should('contain','TesterHome') // 验证第一个结果中是否包含TesterHome
cy.screenshot()
})
})
代码解释：
- reference表示告诉 VSCode 要去Cypress package 里找相关的语义解析
- describe声明一个测试用例集；
- it声明了一个测试用例；
- beforeEach在每个测试用例运行前需要做的事；
- cy.get接受一个 js selector， 就是元素定位字符串，当然 Cypress 也支持 xpath 定位
- 通过then或should，我们可以把get到的元素对象传递到下一步，以便做进一步处理，这里通过then把找到的button_start_search传递到下一步，并最终通过expect函数来判断button_start_search的value属性是否跟预期一致。
2.2 断言
expect([]).to.be.a('Array') // 判断类型
expect(a.b).to.exist // 判断属性是否存在
expect(1).to.be.oneOf([1,2,3]) // 判断值是否是其中之一
expect('testing').to.match(/^test/) // 正则匹配
...
2.3调用接口&Mock
三、使用
3.1 运行情况
从左向右分别显示成功数、失败数、未运行、耗时，以及自动滚屏和重新运行按钮
注意在编写用例时，每次保存会自动触发测试，对于调试来说是比较方便的。
3.2 获取控件定位
1.点击选择器 ->2.点击定位元素 ->3.复制生成代码
3.3 生成报告（Junit-allure）
在 cypress.json 中添加依赖：
"reporter": "junit",
"reporterOptions": {
"mochaFile": "results/my-test-output[hash].xml", // 通过hash 标签区分不同文件的用例结果
"toConsole": true
}
执行 cypress run 的时候会自动生成xml文件
使用 allure 生成对应报告：
// 生成allure 报告
allure generate results --clean
// 打开报告
allure open allure-report
3.4 CI/CD
优点：
- 速度感觉上比selenium 要快。
- 内置的request 方法可以直接跳过UI 层的登录，但要求是你能调用对应的登录接口。
- 某些步骤运行失败时自动重试。这样可以提高运行的稳定性。
- 运行失败时自动截图