cypress在项目中的使用（二）

在上一篇文章中已经讲到了cypress如何加载到项目中，这一次详细讲讲cypress在项目中的使用

先讲讲cypress都包含哪些库

• Mocha cypress采用的是Mocha的bdd语法，感兴趣的可以看一下Mocha官网，cypress利用Mocha的语法hook，串联起了整个测试流程。更形象一点的形容就是：Mocha是cypress这条鱼的鱼骨，其他的断言以及dom操作是cypress这条鱼的肉。 cypress中常用的语法有：describe(), context(), it(), specify(), before(), after(), beforeEach(), 和 afterEach()。

• describe()
  将测试用例的分组，便于阅读和管理，接受两个入参一个是分组的名称，一个是具体的函数执行体。describe的执行体中可以包含另外的一个或者多个describe,it, specify, before,after,beforeEach和afterEach

• context
  context是describe的别称，具有和describe相同的行为，提高了对测试用例的可读性。

• it
  it是一个完整的单个用例(case)，是用例的全部流程，可以操作dom，执行对应的操作，并通过断言判断正确与否。it也是接受两个参数，一个是用例的名称，一个是具体的函数执行体。it的执行体中可以包含describe(), context(), it() 和 specify();不可以直接包含流程性的before(), after(), beforeEach(), 和 afterEach();注意：在it中添加describe(), context(), it() 和 specify()时具体的用例名称不会在测试时展示。

• specify
  无独有偶，specify是it的别称，具有和it相同的行为和性质，提高了对测试用例的可读性。

• before
  必须在describe中，在describe对应的block中的第一个用例执行前执行一次。

• after
  必须在describe中，在describe对应的block中的最后一个用例执行后执行一次。

• beforeEach
  必须在describe中，在describe对应的block中的每个用例执行前执行一次

• afterEach
  必须在describe中，在describe对应的block中的每个用例执行后执行一次

      describe('Array', function () {
        before(function () {
          // ...
        });
  
        describe('#indexOf()', function () {
          context('when not present', function () {
            it('should not throw an error', function () {
              (function () {
                [1, 2, 3].indexOf(4);
              }.should.not.throw());
            });
            it('should return -1', function () {
              [1, 2, 3].indexOf(4).should.equal(-1);
            });
          });
          context('when present', function () {
            it('should return the index where the element first appears in the array', function () {
              [1, 2, 3].indexOf(3).should.equal(2);
            });
          });
        });
      });
  

• Chai Chai 为我们提供了具有出色错误消息的可读断言。Cypress 对此进行了扩展，修复了几个常见的缺陷，并使用 subjects和 .should()命令包装了 Chai 的 DSL。Chai官网

• Chai-jQuery Chai-jQuery为我们操作DOM提供了可能，Chai-jQuery自动将jQuery的链接方法自动扩展了Chai。Chai-jQuery官网

    cy.get("button[class*='saveBtn']")
        .click()
        .wait(600)
        .then(() => {
          cy.get("[class*='saveModule']")
            .should("be.visible");
        })

• Sinon.JS Sinon.JS为Cypress添加了cy.stub() 和 cy.spy()方法，让我们在写集成测试或者类似集成测试时更加便捷。Sinon.JS官网
• Sinon-Chai Sinon-Chai为我们在stub或者spy方法中写断言，提供了更好的断言方式。Sinon-Chai官网
• 其他通用的库 cypress还提供了一些通用的库，使你可以在任意的用例中使用对应的方法
  
• Cypress._ (lodash)
• Cypress.$ (jQuery)
• Cypress.minimatch (minimatch.js)
• Cypress.Blob (Blob utils)
• Cypress.Buffer (Buffer utils)
• Cypress.Promise (Bluebird)

除了提到的这些库还可以自己自定义命令

在cypress/support/commands.js中可以定义自定义命令

Cypress.Commands.add('login', (token) => {
  cy.session(token, () => {
    window.sessionStorage.setItem('token', token);
  })
})

在spec文件中使用方式如下：

describe('Array', function () {
    beforeEach(() => {
       cy.login(token);
    })
    it("test case", () => {
       ...do some test;
    })
})