Cypress是为现代网络构建的前端测试工具,解决了开发人员和 QA 工程师在测试应用程序时面临的关键痛点。

  在这个测试框架中包含了E2E测试、集成测试和单元测试(内嵌了Mocha),我们需要的是它的E2E测试的能力。

  官网中包含详尽的API接口文档,以及多个视频教程、实例等,只要有耐心,看完文档,上手是不成问题的。

  之所以要引入E2E测试,主要是为了保证主流程能够不出错,尤其是在后期做修修补补后,有一个可靠的方式告诉我们当前页面是正常的就行。

  所以,并不会要求E2E的覆盖率要达到怎样的一个数字,只是为了保证代码的健壮性。

一、安装和初始化

  安装命令如下:

npm install cypress --save-dev

  下面这个命令会初始化一堆已经写好的用例:

npx cypress open

  命令执行完后,就会在根目录中新增cypress文件夹,其中 fixtures 文件存放自定义的 json 文件,integration 文件存放测试用例,support可以自定义命令。

|-- fixtures
|-- integration
|----- example.spec.js
|-- plugins
|-- support

  在 integration 中包含 1-getting-started 和 2-advanced-examples 两个文件夹,这些是内置的用例,可以作为demo查看。

二、启动

  将 cypress open 命令添加到 scripts 中,就能通过 npm run cypress 命令执行E2E测试了。

{
  "scripts": {
    "cypress": "cypress open"
  }
}

  运行后会出现下面这个界面:

  

  点击某个测试用例文件,就会开启一个浏览器,并显示测试过程,绿色是正常,红色是异常,下图是正常的结果。

  

三、测试用例

  下面的用例在模拟登录,首先是通过 visit() 函数请求登录地址。

describe('登录', () => {
  beforeEach(() => {
    cy.visit('http://localhost:8000/login')
  })
 
  it('账号和密码错误', () => {
    cy.get('#userName').type(userName);             //读取ID为userName的控件,并赋值
    cy.get('#password').type(pwd + '{enter}');      //读取ID为password的控件,赋值后自动按回车
    cy.contains('测试用户').should('exist');         //界面中是否包含测试用户的标签
  });
});

  然后通过get()读取指定选择器的控件,选择器的语法可参考jQuery,官方提供了众多的API,例如 wait()、find()、wrap()、log()等,此处只演示了其中的几个,断言可参考 chai

  cypress的功能非常强大,在应用到实际项目中后,就能慢慢解锁了。

  还有一个Testing Library库,封装了一些常用的查询功能,例如根据内容查询控件,有需要的话可以自行安装。

 

 posted on 2021-09-27 10:13  咖啡机(K.F.J)  阅读(575)  评论(0编辑  收藏  举报