前端文档

# Cypress

官网 (opens new window)

# cy 介绍

Cypress 是基于 JavaScript 语言的一种前端自动化测试工具；它是自集成的，提供了一套完整的端到端的测试体验；它是一款开箱即用，可以跑在 Chrome 浏览器上的测试工具。

  • 安装简易：一行命令或者下载解压安装包就可以安装完毕
  • 依赖较少：不用安装 jdk, python 之类的东西
  • dom 选取：提供了图形化的 dom 选取工具，方便测试人员写脚本
  • 实时刷新：Cypress 检测测试用例改变后，会自动刷新
  • 报错详细：详细的报错，方便排查

# cy 目录介绍

├── fixtures                    # mock的json数据文件
│   └── example.json
├── integration                 # 测试用例代码目录
│   └── examples
│        └── examples.spec.js
├── plugins                     # 插件目录
│   └── index.js
└── support                     # 支持
    ├── commands.js
    └── index.js

# cy 工作原理

Cypress 在与应用程序相同的生命周期里执行，当你运行测试时，Cypress 首先使用 webpack 将测试代码中的所有模块 bundle 到一个 js 文件中，然后，它会运行浏览器，并且将测试代码注入一个空白的页面里运行。

在每次测试首次加载 Cypress 时，内部 Cypress Web 应用程序先把自己托管在本地的一个随机端口上，在识别出测试中发出的第一个 cy.visit()命令后，Cypress 将会更改其本地的 URL 以匹配你远程应用程序的 Origin，这使得你的测试代码和应用程序可以在一个 Run Loop 中运行。

因为 Cypress 测试代码和应用程序均运行在由 Cypress 全权控制的浏览器中，且它们运行在同一个 Domain 下的不同 iframe 内，所以 Cypress 的测试代码可以直接操作 DOM，Windows Objects 甚至 Local Storages 而无须通过网络访问，这就是 Cypress 可以运行的更快的原因。

# cy 使用

  1. 安装yarn add cypress -D
  2. 在package.json配置执行指令
"scripts": {
  "test:e2e": "cypress open",
  "test:e2e:run": "cypress run"
}
  1. dom 交互
.click() 单击
.dblclick() 双击
.type() 输入
.clear() 清空
.check() 选中

# cy 实现过程

  1. 在 cypress/integration 目录下新建一个login.spec.js文件并编写测试脚本
/// <reference types="Cypress" />

describe('login-test', () => {
  it('登录页面', () => {
    cy.visit('/login')
    cy.contains('文档系统')
    cy.contains('登录').click()
  })
})
  1. 全局配置cypress.json文件
{
  "reporter": "junit",
  "baseUrl": "http://localhost:8008/#/",
  "reporterOptions": {
    "mochaFile": "results/test-[hash].xml",
    "toConsole": true
  },
  "viewportHeight": 700,
  "viewportWidth": 900
}
  1. 测试结果如下

images

← Codecov应用 →