boomsy
boomsy

学习cpress

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 元素，且是  或