Cypress端到端自动化测试学习笔记

前言

一直以来，端到端的测试都是前端开发最头疼的事情。如果没有好的测试工具，一旦需求发生改变，就需要手工测试，费时费力，还会有漏网的

bug。最近接触了一款开箱即用的端到端测试工具——Cypress，真心不错，Cypress可以对在浏览器中运行的任何东西进行快速、简单和可靠的测试。

windows环境安装

1.安装node.js

官网下载地址：

https://nodejs.org/en/download/nodejs.org

下载后一路傻瓜式安装，安装完成后，运行cmd，输入node –v查看版本号，然后输入npm -v 出现如下图说明安装成功

2.安装Cypress

自己本地电脑新建一个目录Ui_test，cd 到目录，执行 npm 指令安装

cd D:\workspace\Ui_test

npm install cypress --save-dev (默认安装最新版)

npm install --save-dev cypress@4.5.0 （指定4.5.0版本）

这里博主安装的是4.5.0版本，安装会很慢，耐心等待会。

出现如下说明安装成功了

启动cypress

首先在D:\workspace\UI_test目录下新建一个 package.json 文件配置如下内容

{"scripts":{"cypress:open":"cypress open"}}

现在，您可以在D:\workspace\Ui_test目下用如下命令启动

npm run cypress:open或者npx cypress open

启动成功展示：

2.现在我们开始写第一个自动化示例程序：

官方文档：

https://docs.cypress.io/guidesdocs.cypress.io

先说一下cypress的目录结构。cypress共有七个目录，还有一个cypress.json文件

编写测试case

脚本实现功能：

1.输入访问地址

2.获取元素

3.输入账号密码

4.登陆

5.断言

在 integration 目录下新建你的工程目录，如demo，下面拿login.js文件为实例

describe 声明一个测试用例集

beforeEach 测试用例前置操作，相当于setup

it声明了一个测试用例

cy.get 定位元素，用css selector定位选择器

should 断言控件含有内容

cy.visit(“/地址”)

case编写完切换到项目根目录执行命令npm run cypress:open或者npx cypress open

运行效果

生成测试报告

npm安装 npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator

在 cypress.json 设置相关参数：

{"env":{"search":"Cypress e2e"},"reporter":"mochawesome","reporterOptions":{"reportDir":"cypress/results","overwrite":false,"html":true,"json":true}}

执行 npx cypress run或者npm run cypress:open

出现如下图说明执行成功了

生成html测试报告

生成xxx.mp4视频

想转行做自动化测试的朋友们，想追求新技术助力公司成长的朋友们，未来5年弯道超车的机会，也许就在今天！

https://github.com/cypress-io/cypress-example-recipes/github.com

https://github.com/cypress-io/cypress-example-kitchensink/github.com

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家的支持。

更多文章关注小编公众号：自动化测试 To share