Cypress系列(1)：Cypress尝鲜之旅-安装篇

e2e测试，即end to end（端到端）测试。理论上前端页面由前端框架来测试确实更为合适，而Cypress就是一款专注e2e的测试框架。

看看网友们如何评价Cypress：能够让软件开发实现并行测试，持续集成；专有元素定位，框架级别元素自动等待，原生支持Mock；专有TestRunner，命令执行细节全景回放呈现，定位问题更加精准。听起来好牛逼，迫不及待的尝试一把。

1.安装Node.js

Node.js的安装方式就省略了，网上百度都有，安装完后通过node -v指令验证是否安装成功。

2.创建package.json

使用命令npm init在项目的根目录下来初始化一个package.json文件，运行这个命令后，它会询问一些关于包的基本信息，根据实际情况回答即可。如果不喜欢这种方式，可以使用npm init --yes （或npm init --y）命令直接使用默认的配置来创建package.json文件，最后根据需要修改创建好的package.json文件即可。

#在项目的根目录下执行npm init

3.安装cypress

Cypress有二种安装方式

一、下载安装

#下载地址https://download.cypress.io/

该网站会根据你的操作系统，自动下载最合适的版本；下载完后，解压文件，双击就可以使用 Cypress 了！但下载安装Cypress有个缺陷，无法运行 DashBoard 服务，直接下载仅用作快速尝试 Cypress；所以，不推荐此方式！

二、在线安装（推荐）

确保你已经运行了npm init，或者根目录存在node_modules文件夹，或者在你项目的根目录存在package.json文件, 以此来确保cypress被安装到正确的路径下。

由于不可说的原因，npm install 时，速度总是不尽如人意，解决办法是修改npm的数据源

#数据源修改到淘宝源npm config set registry http://registry.npm.taobao.org#修改后可以通过如下命令检查是否修改成功npm config get registry

进入cypress项目的根目录，输入如下命令，安装过程可能比较漫长，需要耐心等待，我可是下载安装了一天才完成，这里面的警告可以忽略

npm install cypress --save-dev

4.启动cypress

进入 .bin 目录，然后输入 cypress open 启动 cypress

第一次安装后启动时，可能会出现如下错误

我们只要删除 .bin 目录下的 cypress 文件，然后点击图中的“Try Again”出现如下界面表示启动成功了。

启动成功后，会在 .bin 目录下生成如下几个文件，还有其它不相关的文件就不列出来了

- cypress  cypress目录---- fixtures 测试数据配置文件，可以使用fixture方法读取---- integration 测试脚本文件---- plugin 插件文件---- support 支持文件- cypress.json  cypress全局配置文件

5.创建用例

1.我使用的是vscode，选择 File>Open Folder，选择项目目录中cypress文件夹，如 C:\cypress_test\node_modules\.bin\cypress

2.创建第一个用例，右击 integration 目录>New Folder，起名为testcase，再在 testcase 下面新建一个 login.spec.js 的文件，切换到cypress，发现cypress自动帮我们刷新了目录，你新建的 login.spec.js 它已经帮你监测到了！

exam ples 文件夹中提供了很多示例程序，建议不要删除它们，方便参考。

我写的第一个自动化用例如下

/// <reference types="cypress" />describe('center登录测试用例',function(){    beforeEach(() =>{        cy.viewport(800,600)        cy.visit('/')    })    it('登录',function(){        cy.get('#username > input').click()        cy.get('#username > input').type('hubiao')        cy.get('#password > input').type('******{enter}')        cy.wait(2000)        cy.get('.login-btn > button').click()        cy.get('.logo-title').should('be.visible')        cy.get('.logo-title').should('contain','只有edit的企业')    })})

保存代码，在 cypress 应用程序里找到 login.spec.js ，点击它，你会发现它跑起来了，而且只要运行的界面没有关闭再次对用例修改并保存后，cypress 会自动检测到新的改动，并马上运行！当然，你也可以去掉这个自动重载机制

7.你可能会遇到的坑

1. 跨域导致执行不稳定，在 cypress.json 添加 "chromeWebSecurity" : false 即可

2. 执行用例时可能使用的是你本地的浏览器，导致执行失败，可切换成 Electron 的浏览器来执行

我对 cypress.json 还做了如下修改

{"chromeWebSecurity": false,"baseUrl": "http://center.lbuilder.cn","viewportWidth": 1280,"viewportHeight": 600,"integrationFolder": "cypress/integration","testFiles": "**/*.spec.js"}