1
头图

Cypress介绍

引用官网的介绍语,快速、简单、可靠的在浏览器测试一切的工具。

cypress是比较新的一个自动化测试工具,引起很强烈的关注,在github的star数目前已经是22k+,可见是很受到广大自动化测试工作者的欢迎。

cypress有哪些与众不同呢?

  1. 时间追溯,cypress可以在测试运行中自动存储视频以及出错时候截屏存储,鼠标滑过命令行时可以看到这个命令行执行时的动画。
  2. 可调试性,不用猜测你的测试是否失败,像使用chrome的DevTools一样直接调试,并且可以快速的追踪到出错栈。
  3. 实时重加载,当测试代码改动过之后,cypress会自动重新加载测试。
  4. 自动等待,不需要添加wait或是sleep在你的测试中,cypress会自动等待命令和assertion。
  5. 测试状态菜单,可以实时看到有多少个测试通过或是没通过。
  6. 访问窗口的尺寸调整,可以随意调整页面访问窗口的尺寸。
  7. 测试统计报告(增强功能,免费版只能支持3个用户登录查看,已经500次的测试结果)

Cypress安装

cypress的安装是非常的简单,国内建议使用npm安装,yarn会一直卡在安装步骤。

$ npm install cypress --save-dev --registry=https://registry.npm.taobao.org

Cypress使用

安装结束,我们就可以使用cypress测试了,首先需要添加cypress.json也就是cypress的配置文件。

这里简单编写,可以只写cypress需要访问的服务地址。

{
  "baseUrl": "http://localhost:8000", #测试访问的路由地址
  "reporter": "junit", #报告类型
  "reporterOptions": {
    "mochaFile": "results/test-[hash].xml", #输出的文件
    "toConsole": true #是否输出的命令行
  },
  "viewportHeight": 800, # viewPort也就是预览窗的高度
  "viewportWidth": 1600 # viewPort也就是预览窗的宽度
}

编写完配置文件之后,我们可以通过cypress open本地打开测试窗口

$ cypress open

cypress界面

可以看到第一次启动时候,会有一个examples的目录,这是cypress自动创建的例子代码,我们可以直接点击右侧的open in IDE打开代码。

IDE

可以点击右上角的运行所有集成化测试,或是点击单个测试用例单独测试

image

Cypress的目录结构介绍

├── fixtures # mock数据的存储目录,这里存放了所有mock的json文件
│   ├── orders.json
│   ├── panicBuyings.json
│   └── routers.json
├── integration # 测试用例代码目录
│   ├── orderManagement.spec.js
│   └── panicBuyingManagement.spec.js
├── plugins # 插件目录
│   └── index.js
└── support
    ├── commands.js
    └── index.js

Cypress测试代码编写

describe('测试抢购订单管理', () => {
  beforeEach(() => { #每个测试用例调用之前的操作
    const mock = Cypress.env('MOCK') || 'false'; # 自定义环境变量,运行时传递的话需要指定CYPRESS_前缀,这里使用是CYPRESS_MOCK=true cypress open
    cy.server(); # 如果需要mock接口的话,必须要运行server
    if (mock === true) {
      cy.intercept('GET', '/panic-buying/manager/orders*', { fixture: 'orders.json' }).as(
        'getOrders',
      ); # 拦截/panic-buying/manager/order*路由,并指定返回数据使用orders.json,定义这个接口是getOrders函数,用于后面测试使用。
    } else {
      cy.intercept('GET', '/panic-buying/manager/orders*').as('getOrders');
    }
  });
  it('测试订单列表搜索', () => {
    cy.visit('/#/rush-order/list'); #访问页面路径
    cy.wait('@getOrders').its('response.statusCode').should('be.oneOf', [200, 304]); # 等待getOrders函数,也就是接口返回并判断返回状态是200或是304中的一个。
    cy.wait(1000); # 显示的等待1秒
  });
});

命令行运行cypress测试

────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  panicBuyingManagement.spec.js                                                   (2 of 2)
<?xml version="1.0" encoding="UTF-8"?>
<testsuites name="Mocha Tests" time="11.0930" tests="2" failures="0">
  <testsuite name="Root Suite" timestamp="2021-03-10T15:00:52" tests="0" file="cypress/integration/panicBuyingManagement.spec.js" time="0.0000" failures="0">
  </testsuite>
  <testsuite name="测试抢购管理" timestamp="2021-03-10T15:00:52" tests="2" time="11.0930" failures="0">
    <testcase name="测试抢购管理 测试新建抢购" time="9.2340" classname="测试新建抢购">
    </testcase>
    <testcase name="测试抢购管理 测试列表搜索" time="1.8590" classname="测试列表搜索">
    </testcase>
  </testsuite>
</testsuites>

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        2                                                                                │
  │ Passing:      2                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     11 seconds                                                                       │
  │ Spec Ran:     panicBuyingManagement.spec.js                                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: /Users/hightall/work/wenyu/dashboard/panic-buying-managemen    (0 seconds)
                          t/cypress/videos/panicBuyingManagement.spec.js.mp4


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  orderManagement.spec.js                  00:03        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  panicBuyingManagement.spec.js            00:11        2        2        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:14        3        3        -        -        -

我们可以看到测试完成后,会自动生成测试运行过程的视频panicBuyingManagement.spec.js.mp4。image

后续会继续介绍怎么编写cypress测试代码。


海涛
1 声望0 粉丝

前IBM中国研究院研究院,hyperledger cello项目的maintainer,现易见纹语科技应用系统总监