1，安装

  1. // 1 创建vue项目
  2. vue create cypress // 选Manually select features ->选Unit Testing->选 Jest 
  4. // 2，进入项目
  5. cd cypress
  6. code ./
  8. // 3，安装cypress
  9. vue add @vue/e2e-cypress
  11. // 项目中多了cypress.json文件和tests文件夹
  12. // -- tests/e2e/plugins // 工具插件
  13. // -- tests/e2e/specs  // 测试用例文件夹 - 常用
  14. // -- tests/e2e/support  // 存放底层通用函数或全局默认配置

2，运行实例

  1. npm run test:e2e

ps）：如果第一次使用cypress，会先下载cypress，有点慢
点击test.js

3，创建自动化测试实例

在tests/e2e/specs/文件夹下面新增test.js实例

  1. // tests/e2e/specs/test.js
  2. describe('登录', () => {
  3.     it('测试登录', () => {
  4.       const username = 'admin'
  5.       const password = 'admin'
  6.       cy.visit('http://qiniu.veryreader.com/D2CrudPlusExample/#/login')
  7.       cy.contains('button.button-login', '登录')  // 查找button.button-login里包含登录字符串的元素，如果查找不到则失败
  9.       cy.get('input[placeholder="用户名"]') //获取input框，写法与jQuery的selector一致
  10.         .clear()
  11.         .type(username)  // input框里面输入用户名
  12.         .should('have.value', username) // 断言 input的value=username
  13.       // 输入密码
  14.       cy.get('input[placeholder="密码"]')//获取input框，写法与jQuery的selector一致
  15.         .clear()
  16.         .type(password)
  17.         .should('have.value', password)
  18.       // 提交表单
  19.       cy.get('button.button-login').click() //查找按钮，然后点击
  21.       cy.contains('首页')  //校验是否登录成功
  22.     })
  23.   })

4，进阶：support使用

  1. // tests/e2e/support/commands.js
  3. // 定义
  4. Cypress.Commands.add('add1', (num) => {
  5.     ++num
  6.     console.log(num,28);
  7. });
  1. // tests/e2e/specs/test.js
  3. // 使用
  4. describe('My First Test', () => {
  5.   it('Visits the app root url', () => {
  6.     cy.visit('/')
  7.     cy.contains('h1', 'Welcome to Your Vue.js App')
  8.     cy.add1(2) // 新增
  9.   })
  10. })

参考连接：
实战参考：https://www.jianshu.com/p/459612488233
插件相关：https://docs.cypress.io/guides/tooling/plugins-guide#List-of-plugins
文件夹说明：https://www.cnblogs.com/poloyy/p/13022249.html