[JavaScript] 掌握Cypress 下一代前后端测试工具 自动化实现快速、简单、可靠

什么是Cypress

• Cypress是属于下一代前端测试工具，用来测试UI web application
• Cypress编程语言使用Java script
• Cypress解决了其它测试工具无法实现的痛点
• Cypress是在node.js上面部署并且引用npm的模块
• Cypress能够使用超过9成Node.js的语言模块，并且容易理解
• Cypress是一款易上手的框架
• 更快，更简单并且更加稳定的使用

Features

Cypress comes fully baked, batteries included. Here is a list of things it can do that no other testing framework can:

• Time Travel: Cypress takes snapshots as your tests run. Hover over commands in the Command Log to see exactly what happened at each step.
• Debuggability: Stop guessing why your tests are failing. Debug directly from familiar tools like Developer Tools. Our readable errors and stack traces make debugging lightning fast.
• Automatic Waiting: Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.
• Spies, Stubs, and Clocks: Verify and control the behavior of functions, server responses, or timers. The same functionality you love from unit testing is right at your fingertips.
• Network Traffic Control: Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like.
• Consistent Results: Our architecture doesn’t use Selenium or WebDriver. Say hello to fast, consistent and reliable tests that are flake-free.
• Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
• Cross browser Testing: Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally and optimally in a Continuous Integration pipeline.

Cypress的官网：

https://www.cypress.io/

一、安装

1. 安装Node.js

• https://nodejs.org/en/download/
• node
• npm

2. 安装cypress
   新建项目目录，例如：D:\huice\hccypress 2)D0s命今行进入到该目录，并执行下面的命今

npm init

-生成package.json文件
安装cypress

npm install cypress --save-dev

3. 打开cypress
   方式一：
   命合行窗口：
   进入D:\workspace\Cypress:20\node_modules.bin目录

cypress open

方式二（推荐）
命合行窗口

npx cypress open 

方式三：

1. 修改package.json,新增scripts代码段，例如：
   “scripts”:{
   “cypress”“cypress open”
   }
2. 命冷行窗口：执行命令

npm run cypress

二、JavaScript核心知识

1. 基本语法
   变量、数据类型、语句（条件、循环、switch、for等）
2. 对象：方法和属性(json)
3. 函数
4. 回调函数（重点）–异步编程
5. 异步编程

三、cypress测试框架目录

• fixtures --测试夹具，需要被依赖的静态数据
• plugins --插件，扩展增强cypress2功能
• support --支持文件，通用配置信息
• interaction --测试脚本（用例）
• cypress.json --自定义cypress

四、测试用例组织和编写

• Mocha–>Cypress
• BDD(Behavior-Driven Development)行为驱动开发
• describe() --测试套件（测试集）
• it() --测试用例
• context
• before
• beforeEach
• afterEach
• after
• .only
• .skip

五、CI/CD

• Jenkins