Cypress（1）——如何安装及测试类型简要介绍

node.js

安装使用Cypress总是会看见node.js，那就先看看node.js是什么。JavaScript以前运行需要在浏览器中（浏览器内置解释器），通过node.js框架内置v8引擎（也就是可以执行js脚本所需的工具），这样不在浏览器也可以直接运行js代码。

直接访问node.js官网 下载对应版本即可。下载安装好之后，windows可以打开cmd，执行node -version确认是否安装好。

npm 是node.js的包管理工具。

Cypress安装及简单使用

Cypress官网有文档介绍如何下载安装。简单介绍下实践过的安装方式。

方式一：npm install（前提是安装node.js）

1、新建文件夹，cmd切换到对应的目录，执行npm init -y

2、切换到对应的目录，cmd执行npm install cypress --save-dev

3、安装完成后，npx cypress open 打开cypress执行测试

方式二：安装包

1、官网下载安装包，解压后可以双击打开

2、Cypress中创建project即可

打开项目执行默认的.cy.js文件可以看到效果

E2E Testing or Component Testing

打开cypress，创建project后，会出现两个选择

E2E Testing

端到端测试，也称为集成测试，从头到尾测试整个系统，模拟真实场景和用户交互。这种类型的测试用于确保系统的所有组件按预期一起工作，并且系统满足其功能和非功能要求。

E2E Testing 创建

1.选择E2E Testing， 第一次打开时，Cypress会引导你创建一些文件。

2.你点击过Continue后，Cypress会让你选择执行的浏览器（只能是Cypress支持的浏览器）。选择Chrome，然后点击那个“Start E2E Testing in Chrome”

3.调起浏览器后，可以选择“Scaffold example specs”，默认创建一些现成的测试脚手架，可以快速了解cypress整体框架。因为我们什么测试用例都没建，所以我们选择上图的第一个“Scaffold example specs”。

继续点击“Okey”， 可以看到很多测试用例就生成好了。

这时，查看项目目录下，就会发现多了很多文件，这些文件就是运行一个Cypress测试的必要文件。

E2E Testing 目录结构

• fixtures 默认就在 cypress/fixtures 目录下，主要存放静态测试数据，使用场景例如：调用外部接口并依赖返回值，则可以使用fixtures，无法真正访问（类似mock）；静态的资源数据
• e2e 默认位于 cypress/e2e，主要存放测试文件，cypress执行的也是这里面的js文件
• support 支持文件，主要放可重用配置，底层通用函数或者全局默认配置。
  command.js. Command 顾名思义就是命令。也可以理解为操作命令。比如Web浏览器里的单击，拖拽，登录，选择，下拉框，打开网址等这些操作都可以在这个文件里封装起来。
  e2e.js 里写了说这里是放全局配置或者修改cypress 行为的地方。有点类似你再执行所有脚本之前需要准备的东西。
• cypress.config.js 存储任何Cypress特定的配置。

Component Testing

组件测试，单独测试系统的各个组件或单元。
写组件测试需要一些前端框架支持

创建示例 React 组件以开始使用 Cypress

• 创建项目:npx create-react-app my-app （create-react-app是react的官方脚手架）

• 打开项目: cd my-app
  

• 启动项目:npm start
  

• npm install cypress -D

• npx cypress open

• 选择Component Testing，列表展示当前cypress支持的框架。我们选择Create React App，点击下一步
  

• 点击继续，安装依赖，安装完成后，展示默认的配置文件；点击继续，选择要测试的浏览器（这里就选Chrome吧），点击Start Component Testing in Chrome，开启测试之旅
  

• 选择一项，创建一个测试文件，可以执行看下效果
  
  

工程目录结构如下

测试难点

1. 做Component Testing的前提是对前端代码库有访问权限。

2. Cypress框架要和Web端代码放在一个代码库下，这样mount起来才方便。

由于这两个原因，所以大部分情况下测试人员都不会执行Component Test这个测试类型。