一、官方文档
https://docs.cypress.io/zh-cn/guides/overview/why-cypress.html
二、部署安装
依赖 nodejs，需要提前安装
安装方式1 npm安装
cd /your/project/path
npm install cypress --save-dev
安装方式2 yarn安装
cd /your/project/path
yarn add cypress --dev
安装方式3 直接下载安装 https://download.cypress.io/desktop
三、安装插件
npm install eslint-plugin-cypress --save-dev
npm install --save-dev eslint-plugin-chai-friendly
四、cypress 项目的目录结构
https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Folder-Structure
1、Fixtures是测试过程中需要用到的外部静态数据。
比如：当我们需要做测试数据与用例分离，把测试数据放在这个目录下。
Fixture文件默认存放在 cypress/fixtures 中。但它可以通过在根目录下创建cypress.json文件，配置到另外一个目录。
2、测试文件（测试用例）默认位于 cypress/integration 中。
测试文件支持以下格式：.js，.jsx，.coffee，.cjsx
但它也可以配置到另外一个目录。
3、插件（Plugin）文件
默认情况下，Cypress将会在每个spec文件运行之前自动包含插件文件 cypress/plugins/index.js。
这样方便用户不必在每个spec中导入此文件。
我们可以在这里定义一些公用的环境变量。
4、 支持（Support）文件
默认情况下，Cypress会自动包含支持文件 cypress/support/index.js。
该文件在每个spec文件之前运行。 这样做方便用户，不必在每个spec中导入此文件。
我们可以在这里定义自定义指令，比如通用的登录操作。或者重写 beforeEach 方法
beforeEach(function () {
cy.log('I run before every test in every spec file!!!!!!')
})
初始导入的文件也可以配置为另外一个文件。
注意：
Plugin和Support文件的区别：Plugin 默认加载，Support 默认加载并执行。
5、package.json（可能需要新建），可以在里面定义一些我们项目中的依赖
{
"scripts": {
"cypress:open": "cypress open"
},
"devDependencies": {
"eslint-plugin-chai-friendly": "^0.4.1",
"eslint-plugin-cypress": "^2.2.1"
}
}
6、自定义自己熟悉的目录结构，在项目的根目录下新建一个文件 cypress.json，
在这里我们可以自定义我们的目录结构，
测试用例： src/tests
测试的配置文件（在这里我们可以做数据和用例分离，把测试数据放在这个目录）： src/configs
所有case运行前，会被默认加载： /plugins/index.js
所有case运行前，会被默认加载并执行： /support/index.js
{
"projectId": "my cypress projectId",
"env": "qa"
"video": false,
"defaultCommandTimeout": 6000,
"pageLoadTimeout": 90000,
"requestTimeout": 30000,
"numTestsKeptInMemory": 10,
"responseTimeout": 60000,
"viewportWidth": 1440,
"viewportHeight": 900,
"chromeWebSecurity": false,
"waitForAnimations": true,
"taskTimeout": 60000,
"trashAssetsBeforeRuns": false,
"integrationFolder": "src/tests",
"fixturesFolder": "src/configs",
"supportFile": "src/support/index.js",
"pluginsFile": "src/plugins/index.js",
"screenshotsFolder": "src/screenshots"
}
五、cypress 常用commands
.get(selector) # 按 css 或元素特定属性的方式定位元素
.check() # 选中复选框或者单选框
.uncheck() #取消选中复选框
.clear() # 清除input|textarea内容
.click() # 点击
.contains() # 按特定字符串定位元素
.dblclick() # 双击
.scrollIntoView() # 滚动元素到视图中
.scrollTo(position) # 滚动到特定位置
.select() - 选择一个含有 <option>属性的<select>元素
.visit(url) # 访问url
.wait(time) # 等待毫秒
.type() # 输入文本
六、第一个case
/// <reference types="Cypress" />
describe('My first test case for cypress', function () {
before(function () {
// runs once before all tests
....
});
after(function () {
....
});
beforeEach(function () {
// runs before each test
});
it('visit baidu home page and search for testerhome:',function(){
cy.visit('http://www.baidu.com') //访问url
cy.wait(1000);
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()
})
});
启动命令 npm run cypress:open 或者 npm run cypress:run
七、钩子
Cypress从Mocha借鉴过来，还提供了钩子。
describe('Hooks', function() {
before(function() {
// runs once before all tests in the block
})
after(function() {
// runs once after all tests in the block
})
beforeEach(function() {
// runs before each test in the block
})
afterEach(function() {
// runs after each test in the block
})
})
八、使用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','个人信息') // 验证是否包含标题 个人信息，
})
})
把登录方法定义为公共方法
Cypress.Commands.add('login', (userType, options = {}) => {
const accountTypes = { // 设置账号类型
admin:{
account:'admin',
password:'123456'
}
}
cy.request({
url:'http://yourhost/login',
method:'POST',
form:true,
body:accountTypes[userType] // 使用 admin 账号登录
})
})
describe('login with different account',function(){
beforeEach(function() {
cy.login('admin')
cy.visit('/')
})
it('进入商品列表页面',function(){
cy.contains('商品列表').click()
cy.get('#headerTitle')
.should('have.text','商品列表') // 验证是否包含标题 商品列表
})
it('进入订单列表页面',function(){
cy.contains('订单列表').click()
cy.get('#headerTitle')
.should('have.text','订单列表') // 验证是否包含标题 订单列表
})
})
九、自定义运行命令
命令行执行所有用例 npm run cypress:run
自定义运行参数可以在 package.json 下配置
"scripts": {
"cypress:run": "cypress run --browser chrome",
"debug": "yarn cypress open",
"run": "yarn cypress run"
}
十、解决chrome 下的跨域问题
在 cypress.json 中添加 "chromeWebSecurity": false
十一、生成 mocha awsome 报告
安装对应模块：mocha 必须指定 5.2.0， 否则会报错
npm install --save-dev mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator
网友评论