1.工具：vs code；环境：node.js。
2.配置：
我们可以使用命令npm init在项目的根目录下来初始化一个package.json文件，运行这个命令后，它会询问一些关于包的基本信息，根据实际情况回答即可。
如果不喜欢这种方式，可以使用npm init --yes （或npm init --y）命令直接使用默认的配置来创建package.json文件，最后根据需要修改创建好的package.json文件即可。
{
"scripts": {
"cypress:open": "cypress open",
"cypress:run": "cypress run --browser chrome"
},
"devDependencies": {}
}
3.安装 cypress
- cd /your/project/path
- npm install cypress --save-dev
确保你已经运行了npm init，或者存在node_modules文件夹，或者在你项目的根目录存在package.json文件, 以此来确保cypress被安装到正确的路径下。
4.启动命令：
- 方式一：npm run cypress:open
- 方式二：./node_modules/.bin/cypress open
5.编写HelloWorld
your-project/cypress/intgration 目录下新建 sample-spec.js
describe('My first test case for cypress',function(){
it('Does not match!',function(){
expect(true).to.equal(true)
})
})
在 cypress 窗口点击当前用例执行：
注意在编写用例时，每次保存会自动触发测试，对于调试来说是比较方便的。
6.第一个用例
访问百度首页并搜索 testerhome：
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()
})
})
这里有一个比较特别的 snapshot 功能，可以记录下执行过程中的每一步，并可以查看当时的页面（真实的网页，不是图片）
7.元素定位方式
- get：按 css 或元素特定属性的方式定位元素
- contains：按特定字符串定位元素
8.使用request 请求进行登录
cypress 推荐在每个用例的登录步骤，不调用 UI ，直接使用 request 登录。下面是一个例子：
describe('My first test case for cypress',function(){
it('login as admin without UI:',function(){
const accountTypes = { // 设置账号类型
admin:{
account:'admin',
password:'123456'
}
}
cy.request({
url:'http://yourhost/login',
method:'POST',
form:true,
body:accountTypes['admin'] // 使用 admin 账号登录（跳过 UI 的登录）
})
cy.visit('/profile')
cy.url().should('include','profile') //验证目标url 是否正确
cy.get('#headerTitle')
.should('have.text','个人信息') // 验证是否包含标题 个人信息，
})
})
9.命令行执行所有用例
npm run cypress:run
具体运行参数可以在 package.json 下配置：
"scripts": { "cypress:run": "cypress run --browser chrome" }
解决chrome 下的跨域问题： 在 cypress.json 中添加：
"chromeWebSecurity": false
10.语法
cypress的元素定位
- 1、cy.get(selector) ，selector是DOM元素。
- 2、contains(content);contains(selector,content ) , content是DOM的文本内容 使用方法： 这里有一点需要注意的是，文本必须是当前页面的唯一值，当前页面有多个相同的文本值时，cypress只匹配第一个文本。
- 3、在定位列表中的字段时，可以使用cy.get('form>div>tr>td')的方式定位到第一行第一个值。
- 4、要定位的元素实在没有唯一值时，也可以根据上下文定位。比如cy.get(id).next() 可以定位到get('#id')元素的下一个元素。
cy.get('#id').children()定位到子元素。
cy. get('#id').children().first()定位到第一个子元素。
点击
.click() 单击
.click({force:true}) 强制单击
.dbclick()双击
写入
.type(text)
断言
.should(chainers) ,chainers表示特定的语句
.should(chainers,value)表示断言的期望值
.should(chainers,method,value)一般用于断言元素的属性值
11.Cypress闭包环境变量
1. describe
describe(’’, () => {
// 各种钩子函数
before(() => {
// 在全部案例执行之前执行一次
})
after(() => {
// 在全部案例执行完成之后执行一次
})
beforeEach(() => {
// 在每一条案例之前执行
})
afterEach(() => {
// 在每一条案例执行完成之后执行
})
it(‘测试表单验证案例’, () => {})
// 只执行该案例
it.only(‘测试表单验证案例’, () => {})
// 忽略该案例
it.skip(‘测试表单验证案例’, () => {})
})
