Cypress简易入门教程
01
Windows下安装
方法一
① 安装node.js(https://nodejs.org/en/download/)，根据版本选择32位或64位。
② 确认ndejs 和npm是否安装上:
C:\Users\xiang>node -v
v12.18.0
C:\Users\xiang>npm-v
6.14.
③ 生成package.json（假设准备安装在c:\Cypress>）
C:\Users\xiang>cd c:\Cypress
C:\Cypress>npminit
④ 安装Cypress
C:\Cypress>npm install cypress --save-dev
方法二
① 安装yarn (https://yarnpkg.com/en/docs/install#windows-stable)
② 确认yarn是否安装上
C:\Users\xiang>yarn -v
1.22.4
③ 安装Cypress
C:\Users\xiang>cd c:\Cypress
C:\Cypress>yarnadd cypress --dev
02
运行
方法一
C:\Cypress\node_modules\.bin>cypress open
方法二
C:\Cypress>yarn run cypress open
方法三（我经常用的方法）
配置C:\Cypress\package.json
{
"license": "ISC",
"scripts": {
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"devDependencies": {
"cypress": "^4.8.0"
}
}
打开运行控制器
C:\Cypress>yarn run cypress open
运行默认路径下的所有测试代码
C:\Cypress>yarn run cypress run
默认路径为C:\Cypress\cypress\integration，可以通过
{
…
"integrationFolder": "cypress/integration/demo",
…
}
改变默认路径，上述代码中默认路径改为
C:\Cypress\cypress\integration\demo
03
测试框架&代码案例
before():
相当于unittest中的def setUp(cls)方法或者Junit的@Before方法标签；
after():
相当于unittest中的 def teardown(cls) 方法或者Junit的 @Before方法标签；
beforeEach() :
相当于unittest中的def setUpClass(cls) 方法或者Junit的@BeforeClass方法标签；
afterEach() :
相当于unittest中的def tearDownClass(cls) 方法或者Junit的@AfterClass方法标签。
GUI测试代码案例
1、第一个测试代码
测试电子商务系统登录程序
describe('login',function(){
const username = 'cindy'
const password = '123456'
context('测试电子商务网站',function(){
it('登录成功，调到商品列表页面',function(){
cy.visit('http://127.0.0.1:8000')
cy.get('input[name=username]').type(username)
cy.get('input[name=password]').type(password)
cy.get('form').submit()
//断言
cy.url().should('include','/goods_view')
cy.get('title').should('contain','电子商务系统')
})
})
})
2、元素查找 - get
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
根据元素 id 查找
cy.get('#kw')
根据元素名称查找
cy.get('input[name="wd"]')
根据元素的类名查找
cy.get('.s_ipt')
根据CSS selector查找、
cy.get('input[maxlength ="100"]')
3、元素查找 – contains
根据元素文本查找
cy.contains('value')
根据元素属性及其文本查找
cy.get('div[name="ele-name"]').contains('value')
使用正则匹配元素文本以查找
cy.get('.class-name').contains(/[0-9]*/)
4、操作
type(String)、输入，比如
cy.get('#kw'). type('Testing')
click()、点击，比如
cy.get('.btn'). click ()
clear()、清空input或textarea的内容，比如
cy.get('.ant-input').clear()
submit()、提交表单，比如
cy.get('.ant-form').submit()
dblclick()、元素双击，比如
cy.get('.ant-btn').dblclick()
rightclick()、元素右击，比如
cy.get('.ant-btn').rightclick()
select(String)、对元素选择，比如
cy.get('.ant-select').select('apples')
check()、勾选checkbox，比如
cy.get('.ant-checkbox').check()
Uncheck、反选 checkbox，比如
cy.get('.ant-checkbox').uncheck()
scrollIntoView()、如果某个元素不在当前可视范围，可以滑动至可视范围，比如
cy.get('#id').scrollIntoView()
scrollTo(String)、指定位置滑动，比如
cy.scrollTo('bottom')、cy.get('#id').scrollTo(250, 250)
5、鼠标操作
鼠标悬停事件：
cy.get('button').trigger('mouseover')
鼠标按下：
cy.get('button').trigger('mousedown')
鼠标抬起：
cy.get('button').trigger('mouseleave')
cy.get('button').trigger('mouseup')
鼠标长按事件：
cy.get('button').trigger('mousedown')
cy.wait(1000)
cy.get('button').trigger('mouseleave')
鼠标拖拽事件
cy.get('[data-cy=draggable]')
.trigger('mousedown', {which:1,pageX:600,pageY:100})
.trigger('mousemove', {which:1,pageX:600,pageY:600 })
.trigger('mouseup')
describe('baidu',function(){
context('测试百度网站',function(){
it('查询成功',function(){
cy.visit('https://www.baidu.com')
cy.get('input[name=wd]').type("软件测试")
cy.get('#su').click()
cy.get('title').should('contain','百度搜索')
})
it('进入高级查询成功',function(){
cy.get('a[name=tj_settingicon]').trigger('mouseover')
cy.get('.bdpfmenu').should('exist')
})
})
})
6、断言
针对长度的断言
cy.get('li.selected').should('have.length',3)
针对类的断言
cy.get('from').fijd('input').should('not.have.class','disabled')
针对值断言
cy.get('textarea').should('have.value','3testing')
针对文本内容的断言
cy.get('a').parent('span.help').should('contain','click me')
针对元素可见与否的断言
cy.get('button').should('be.visible')
针对元素存在与否的断言
cy.get('#loading').should('not.exist')
针对元素状态的State的断言
cy.get(':radio').should('be.checked')
针对CSS的断言
cy.get('.completed').should('have.css','text-decoration','line-through')
7、跨iframe操作
describe('login',function(){
context('啄木鸟',function(){
it('点击我的介绍成功',function(){
cy.visit('http://www.3testing.com')
cy.get('#head',{timeout: 2000})
.then($iframe=> {
cy.wrap($iframe.contents().find("#introduce"));
})
.then($btn =>{
cy.wrap($btn).click()
});
//断言
cy.url().should('include','introduce.html')
cy.get('title').should('contain','啄木鸟')
})
})
})
8、多窗口操作
Cypress不支持多窗口操作。
04
API测试
1、普通API测试
describe('login',function(){
const username = 'cindy'
const password = '123456'
const producturl="http://127.0.0.1:8000/login_action/"
cy.request({
method: 'POST',
url:producturl,
body: {
username:username
password:password
}
})
})
2、CSRF token API测试
describe('login',function(){
const username = 'cindy'
const password = '123456'
const producturl="http://127.0.0.1:8000/login_action/"
Cypress.Commands.add('loginByCSRF', (csrfToken) => {
cy.request({
method: 'POST',
url:producturl,
failOnStatusCode:false, // 不要失败，这样我们才能断言
form:true, // 我们正在提交一份常规表格
body: {
username,
password,
csrfmiddlewaretoken:csrfToken // 将此作为主体的一部分插入
}
})
})
// csrf在返回的html中,我测试的Django产品的CSRF token用这种方法
it('策略#1:从HTML解析令牌', function(){
// 如果我们不能改变我们的服务器代码以使解析CSRF令牌变得更容易，
// 我们可以简单地使用cy.request来获取登录页面，然后解析HTML内容
// 以找到嵌入在页面中的CSRF令牌
cy.request(producturl)
.its('body')
.then((body) => {
//我们可以用Cypress.$解析字符串主体，从而使我们能够轻松地查询到它
cy.log(body)
const $html =Cypress.$(body)
const csrf = $html.find("input[name=csrfmiddlewaretoken]").val()
cy.loginByCSRF(csrf)
.then((resp) => {
expect(resp.status).to.eq(200)
expect(resp.body).to.contain("Company 2017")
})
})
})
})
/*
// 如果csrf在响应头中
it('策略#2:从响应头解析令牌',function(){
// 如果我们将csrf令牌嵌入到响应头中，那么我们就可以更容易地提取它,
// 而不必深究最终的HTML
cy.request(producturl)
.its('headers')
.then((headers) => {
const csrf =headers['csrftoken']
cy.log(csrf)
cy.loginByCSRF(csrf)
.then((resp) => {
expect(resp.status).to.eq(200)
expect(resp.body).to.contain("Company 2017")
})
})
})
}) */
