1.安装
命令vue add @vue/e2e-cypress
2.目录结构分析
Cypress 允许配置 package.json 文件的 scripts 字段，来定义打开方式
首先，进入 Cypress安装目录 ，打开 package.json
在 scripts 下，添加
image.png
在使用 cypress open 命令首次打开 Cypress，Cypress 会自动进行初始化配置并生成一个默认的文件夹结构
image.png
(1) integration，测试文件就是测试用例
(2) plugins 插件文件,使你可以修改或扩展 Cypress 的内部行为
(3) support 每个测试文件运行之前，Cypress 都会自动加载支持文件 cypress/support/index.js
eg:
只需要在 cypress/support/index.js 文件里添加 这将能实现每次测试运行前打印出所有的环境变量信息
beforeEach(() => {
cy.log(`当前环境变量为${JSON.stringify(Cypress.env()
)}`)
})
image.png
3.自定义cypress, 可在
cypress/support/commands.js编写eg:
// 全局定义获取token
Cypress.Commands.add('token', () => {
})
4.开始测试
- 1 查找元素方式 get()
// 通过元素的 id 属性来定位
cy.get("#header").click()
// 通过元素的 class 属性来定位
cy.get(".btn").click()
- 2 点击 click()
// 先获取 DOM 元素，再对 DOM 元素操作
// { force: true } 强制点击，和所有后续事件
cy.get('.el-date-editor').click({ force: true })
- 3 输入内容 type()
// 在 DOM 元素中输入内容
// 先获取 DOM 元素，再对 DOM 元素进行 type 操作
cy.get('.el-date-editor input[placeholder=结束时间]').clear().type('2021-08-29')
- 4 清空输入框的所有内容
// 需要先拿到 DOM 元素，且是 <input> 或 <textarea > 标签，再执行 clear() 操作
cy.get('input').type('Hi!').clean()
- 5 单选框或复选框，达到选中的作用
// 选中指定值的选项
.check(value)
