手把手带你玩转Cypress：从安装到第一个测试用例
前面聊了那么多理论，今天咱们直接上手实操。作为前端自动化测试的新贵，Cypress的入门其实比你想象的简单得多。这篇就从环境搭建开始，带你跑通第一个测试用例，感受下"写完就能跑"的快乐。
准备工作：你的电脑能装Cypress吗？
别担心，Cypress对环境要求不高，主流系统都能跑：
- Windows 7及以上（32位/64位都行）
- macOS 10.9及以上（只能64位）
- Linux的话，Ubuntu 12.04+、Fedora 21+、Debian 8+这些常见发行版都支持
不过有个前提：得先装Node.js。因为Cypress是基于Node.js开发的，npm（Node的包管理工具）会帮我们搞定很多依赖。去Node.js官网下载个LTS版本，一路下一步安装就行，npm会自动跟着装上。
两种安装方式：选哪个更适合你？
方式一：直接下载压缩包（适合快速尝鲜）
去Cypress官网（download.cypress.io/），网站会自动识别你的…
方式二：npm安装（推荐！适合实际项目）
这种方式更规范，也方便集成到项目里。打开命令行，三步走：
- 建个文件夹：比如叫
cypress-demo，cd进去 - 初始化项目：运行
npm init，一路回车用默认配置就行，会生成一个package.json文件 - 安装Cypress：执行
npm install cypress --save-dev
等安装完成，node_modules目录里就有Cypress了。
启动Cypress：三种方式任你选
装好了怎么打开？有好几种方式，选自己顺手的：
- 直接调用可执行文件：
node_modules/.bin/cypress open - 用npm脚本：在package.json的scripts里加一行
"cypress:open": "cypress open"，之后运行npm run cypress:open - 用npx：直接输入
npx cypress open（npm 5.2+自带npx）
第一次启动会稍微慢点，Cypress会自动初始化一些配置文件和文件夹。成功后会看到一个界面，里面有默认的示例用例，先不管它们，咱们自己写一个。
第一个测试用例：登录功能怎么测？
咱们以一个简单的登录页面为例，测试步骤很简单：访问登录页→输入用户名密码→点击提交→验证是否跳转到首页。
第一步：准备测试环境
Cypress官方有个示例项目，里面有各种测试场景的demo，咱们直接拿来用：
- 先装git（如果没装的话）
- 克隆项目：
git clone https://github.com/cypress-io/cypress-example-recipes.git - 进入项目目录：
cd cypress-example-recipes - 安装依赖：
npm install - 启动登录示例：
cd examples/logging-in__html-web-forms，然后npm start
这时候访问http://localhost:7077/login，应该能看到一个登录表单。
第二步：写测试代码
在Cypress的目录结构里，测试用例都放在cypress/integration文件夹下。咱们新建一个testLogin.js文件，代码长这样：
// 告诉Cypress这是它的测试文件
/// <reference types="cypress" />
describe('登录功能测试', function() {
// 测试数据
const username = 'jane.lane'
const password = 'password123'
it('正确输入时应该登录成功', function() {
// 访问登录页
cy.visit('http://localhost:7077/login')
// 输入用户名
cy.get('input[name=username]').type(username)
// 输入密码
cy.get('input[name=password]').type(password)
// 提交表单
cy.get('form').submit()
// 验证是否跳转到dashboard
cy.url().should('include', '/dashboard')
// 验证页面显示正确的用户名
cy.get('h1').should('contain', username)
})
})
第三步：运行测试
回到Cypress的界面，找到我们新建的testLogin.js，点击它就会自动运行。你会看到浏览器被自动打开，一步步执行我们写的操作，最后在命令日志里显示每个步骤的结果。
如果成功的话，所有步骤都会显示绿色对勾，还能看到页面跳转的过程。
测试出问题了？Cypress帮你快速调试
写测试的时候遇到失败很正常，Cypress的调试功能特别贴心：
- 时间穿梭：鼠标悬停在命令日志上，右侧会显示当时的页面状态，就像时光倒流
- 暂停执行：在代码里加
cy.pause()，测试会停下来，让你一步步看执行过程 - 打印信息：用
cy.log()输出变量，或者直接在Console里看cy.get()获取的元素 - 自动截图：失败的时候会自动截图，不用手动操作
比如如果登录失败，你能清楚地看到是用户名输错了，还是跳转地址不对，比传统工具省去很多猜谜时间。
