一.下载环境: cypress.zip解压运行examples或npm install cypress
二.简单使用
1.常用文件夹
fixtures: 保存json文件
integration: 保存编写的测试用例,一般使用.spec.js为结尾
support: 支持添加cy内置函数
Cypress.Commands.add("funName", () => { ... })
调用: cy.funName()
2.常用的命令
cy.request : ajax请求
语法
cy.request(url)
cy.request(url, body)
cy.request(method, url)
cy.request(method, url, body)
cy.request(options)
例子
cy.request('login')
cy.request({
method: 'POST',
url: 'login', // baseUrl已经设置
form: true, // 默认设置headers=application/x-www-form-urlencoded
body: {
username: 'user1',
password: 'pwd123'
},
encoding: 'base64' // 可设置base64提交
}).should((response)=>{
expect(response).property('status').to.equal(200)
// 后台自定义返回
// var body = JSON.parse(response.body)
// expect(body).property('code').to.equal(200)
})
cy.visit : 访问页面
语法
cy.visit(url)
cy.visit(url, options)
cy.visit(options)
例子
visit('https://www.baidu.com')
cy.get : 获取页面元素
语法
cy.get(selector)
cy.get(alias)
cy.get(selector, options)
cy.get(alias, options)
例子
cy.get('.list > li')
// 根据别名获取 .as(aliasName): 设置别名
cy.get('ul#todos').as('todos')
cy.get('@todos')
.type : 输入文本或按键
语法
.type(text)
.type(text, options)
例子
cy.get('input[name=username]').type('test')
.click() : 单击
语法
.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)
例子
cy.get('input[type=submit]').click()
.dblclick() : 双击
语法
.dblclick()
.dblclick(options)
.dblclick(position)
.dblclick(position, options)
.dblclick(x, y)
.dblclick(x, y, options)
例子
cy.get('input[type=submit]').dblclick()
.contains : 是否包含文本
语法
.contains(content)
.contains(content, options)
.contains(selector, content)
.contains(selector, content, options)
// 或者
cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)
例子
cy.get('form').contains('登陆')
cy.get('form').contains('div', '登陆')
cy.contains('登陆').click()
cy.contains('form', '登陆') // document的form是否包含文本
.wait : 等待
语法
cy.wait(time)
cy.wait(alias)
cy.wait(aliases)
cy.wait(time, options)
cy.wait(alias, options)
cy.wait(aliases, options)
例子
cy.wait(500)
cy.wait('@getProfile')
.skip : 忽略测试用例
例子
it.skip('',()=>{...})
.only : 只运行当前测试用例
例子
it.only('',()=>{...})
.debug : 调试
语法
.debug()
.debug(options)
// 或者
cy.debug()
cy.debug(options)
例子
cy.get('a').debug().should('have.attr', 'href')
.pause : 暂停,相当于调试
语法
.pause()
.pause(options)
// 或者
cy.pause()
cy.pause(options)
例子
cy.pause()
3.配置文件cypress.json
{
"baseUrl": "http://localhost:8080/nocode",
"env": {
"login_url": "login.jsp"
}
}
* baseUrl: 配置前缀路径,如果没有http开头,则自动寻找baseUrl配置的前缀自动加上
cy.visit('login.jsp')
cy.request({
'url': 'userList'
})
* env: 环境变量
Cypress.env('login_url')
4.联合测试
* 有登陆的地方,建议将登陆放在cy.before里面执行
* 每个用例都要登陆时,建议将登陆放在cy.beforeEach里面执行
* 相应的钩子函数有after和afterEach,酌情使用即可
*****如果上下文需要存储变量,需要做特殊处理,因为每个测试用例都会清除localStorage, 我们要自己保存处理, 代码如下
// 定义一个存储变量,来存储localStorage
let LOCAL_STORAGE_MEMORY = {};
Cypress.Commands.add("saveLocalStorage", () => {
Object.keys(localStorage).forEach(key => {
LOCAL_STORAGE_MEMORY[key] = localStorage[key];
});
});
Cypress.Commands.add("restoreLocalStorage", () => {
Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
});
});
在每个测试用例开始前回复localStorage
在每个测试用例结束后保存localStorage
beforeEach(() => {
cy.restoreLocalStorage();
});
afterEach(() => {
cy.saveLocalStorage();
});
(本篇就到这)
获取最新资讯,欢迎关注公众号: 软件开发与技术设计(SoftwareDesigner)
