Cypress简易入门教程
1 Windows下安装
1.1方法一
1）安装node.js(https://nodejs.org/en/download/)，根据版本选择32位或64位。
2）确认ndejs和npm是否安装上:
C:\Users\xiang>node -v
v12.18.0
C:\Users\xiang>npm -v
6.14.3）生成package.json（假设准备安装在c:\Cypress>）
C:\Users\xiang>cd c:\Cypress
C:\Cypress>npm init4）安装Cypress
C:\Cypress>npm install cypress --save-dev我按照这种方法安装失败。
1.2方法二
1）安装yarn (https://yarnpkg.com/en/docs/install#windows-stable)
2）确认yarn是否安装上
C:\Users\xiang>yarn -v
1.22.43）安装Cypress
C:\Users\xiang>cd c:\Cypress
C:\Cypress>yarn add cypress --dev2. 运行
2.1方法一
C:\Cypress\node_modules\.bin>cypress open2.2方法二
C:\Cypress>yarn run cypress open2.3 方法三（我经常用的方法）
配置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\demo3测试框架
- 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方法标签。
4 GUI测试代码案例
4.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','电子商务系统')
})
})
})4.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"]')4.3元素查找 – contains
- 根据元素文本查找
cy.contains('value') - 根据元素属性及其文本查找
cy.get('div[name="ele-name"]').contains('value')- 使用正则匹配元素文本以查找
cy.get('.class-name').contains(/[0-9]*/)4.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)、对<select>元素选择，比如
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)4.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')
})
})
})4.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')4.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','啄木鸟软件测试咨询网-顾翔介绍')
})
})
})4.8 多窗口操作
Cypress不支持多窗口操作。
5 API测试
5.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
}
})
})5.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")
})
})
})
}) */本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-06-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
日志服务
日志服务（Cloud Log Service，CLS）是腾讯云提供的一站式日志服务平台，提供了从日志采集、日志存储到日志检索，图表分析、监控告警、日志投递等多项服务，协助用户通过日志来解决业务运维、服务监控、日志审计等场景问题。