前端使用cypress自动化测试

前言

cypress官网

解放劳动密集型工作，拥抱智力密集型工作，用代码测试代码，测试驱动开发，做一名会偷懒的工程师。

使用cypress测试框架，配置简单，上手容易，界面友好，支持录屏，时间碎片，一键执行。

 

安装

安装这一块是最麻烦的，有可能安装过程中会被墙。

npm install cypress --save-dev

yarn add cypress --dev

如果以上过程很慢，可以在官网下载安装包：

cypress下载

 

运行

1、如果是本地下载完成后：

解压

点击

选择一个空文件夹确定：

点击运行第一个例子：

 

接下来我们就能看见浏览器里正在跑的测试用例：

2、如果是通过命令行安装完成的：

打开命令：

./node_modules/.bin/cypress open

直接运行命令：

// 无头运行
cypress run --spec cypress/integration/examples/actions.spec.js

// 有头运行
cypress run --spec cypress/integration/examples/actions.spec.js --headed

若不想每次都执行cypress的example目录下的例子，但又需要参考模板，可在cypress.json配置文件里加上：

"ignoreTestFiles":["*.hot-update.js","**/examples/*.*"]

 

编写测试用例:

在integration/里新建demo.spec.js

内容：

describe('百度', () => {
  it('能搜索', () => {
    cy.visit('https://baidu.com')
    cy.get('input#kw').eq(0).type('A-Tione的博客')
    cy.contains('百度一下').click()
    cy.contains('项目管理,CSS,JS领域博主- CSDN博客').should('exist')
    cy.contains('JavaScript,TypeScript,HTTPS,ECMAScript 6方面的内容').should('exist')
  })
})

 

更复杂的用例编写：

请参加官方文档：编写第一个测试