3 Cypress 测试框架概述

3.1 Cypress 默认文件结构

    在Cypress安装完成后，其生成的默认文件目录如下所示：

0301-Cypress默认文件结构.png

3.1.1 Fixtures

    Fixture 又称之为 测试夹具 ，通常配合 cy.fixture 命令使用，主要用于 存储测试用例的外部静态数据 。其默认位置位于 cypress\fixtures 中，也可以根据需要配置到其他目录。 Fixtures里面的静态数据通常存储在 json 文件中，而这部分数据通常是某个网络请求对应的响应部分，如HTTP状态码和返回值等。Fixture的应用场景通常为，当测试需要对某些外部接口进行访问并依赖于其返回值时，可以使用fixture而无需访问这些接口。

3.1.2 测试文件

    测试文件就是对应的 测试用例 ，一般位于 cypress\integration 中，也可以根据需要配置到另一个目录中，通常为 js文件 ，在Cypress中其他命令格式为： fileName.spec.js ，支持的文件类型如下所示：

• .js
• .jsx
• .coffee
• .cjsx

3.1.3 Plugins

    在Cypress中，测试代码是运行浏览器里面，提供了更加可靠的测试体验，但也存在明显的缺点，使得与浏览器之外进行通信更加困难。为解决这个问题，Cypress提供了一些插件， 可以修改或扩展Cypress的内部行为 。插件一般位于 cypress\plugins ，在每个测试文件运行之前，Cypress会自动加载该目录中的 index.js 文件。

3.1.4 Support

    支持文件一般位于目录 cypress\support 中，可以根据需要放置在其他目录中，其主要功能是 放置可复用配置项 ，如底层通用方法、全局默认配置等。在每个测试文件运行前，Cypress会自动加载该目录中的 index.js 文件。

    使用方法也非常简单，仅需要在cypress\support\index.js文件中添加 beforeEach() 函数即可。示例如下所示：

beforeEach( function (){
  cy.log(`Current Enviroment is ${JSON.stringfy(Cypress.env())}`)
 }
)

3.2 核心概念

3.2.1 核心参数配置

    在第一次打开Cypress Test Runner后，cypress.json将会创建，目录与Cypress同级。该文件主要用于 保存所有支持的自定义配置 ，在配置了录制和测试项目后，则 projectId 将会被保存至cypress.json文件中。

用户可以通过参数来定义所使用的配置文件，参数为--config-file

3.2.1.1 全局配置项

    以下为Cypress支持的常用自定义的全局配置及其默认值，如下所示：

3.2.1.2 超时

    超时是Cypress中的核心概念，所以必须了解，常见的超时参数如下所示：

3.2.1.3 目录和文件

    Cypress支持自定义目录和文件，如下所示：

3.2.1.4 截图

3.2.1.5 视频

3.2.1.6 视图

更多自定义选项，可查阅官方文档，地址为：https://docs.cypress.io/guides/references/configuration

3.2.1.7 命令行

    除了使用配置文件进行配置以外，也可以使用命令行进行设置以下各个参数，如下所示：

cypress open --config pageLoadTimeout=30000,baseUrl=https://www.surpass.com
cypress run --config integrationFolder=tests,videoUploadOnPasses=false

3.2.1.8 Cypress.config()

    除了直接在cypress.json文件中更改配置之外，也可以通过Cypress.config()去获取或覆盖某些配置项。其基本使用方法如下所示：

// 获取所有config信息
Cypress.config()
// 获取指定config信息
Cypress.config(name)
// 更改指定config信息
Cypress.config(name,value)
// 设置多个config项
Cypress.config(object)

    示例代码如下所示：

describe("测试Cypress.config",function(){
   it("获取defaultCommandTimeout",function(){
       cy.log(`defaultCommandTimeout value is:${Cypress.config("defaultCommandTimeout")}`)
       // 设置参数选项值
       Cypress.config("defaultCommandTimeout",99999)
       cy.log(`defaultCommandTimeout value is:${Cypress.config("defaultCommandTimeout")}`)
   })
})

    运行结果如下所示：

0302-获取或设置config.png

3.2.2 用例结构

    Cypress是建立在 Mocha 和 Chai 之上，因此同时支持Chai的 BDD 和 TDD 两种风格。如果你熟悉JavaScript风格的代码，那么在Cypress中写测试用例是很容易上手的。

Mocha是一款适用于Node.js和浏览器的测试框架，可使用异步测试变得简单灵活。

    Cypress的测试风格继承于Mocha，提供了 describe() 、 context() 、 it() 、 specify() 四个关键字，对于一条可执行的测试而言，必须包含以下两个组成部分:

• describe()和context()等效，均表示一个测试套件或测试集
• it()和specify()等效，均表示一个测试用例

    示例如下所示：

describe('我是一个测试集', () => {
    it('测试用例-1', () => {
        expect(1+2).to.eq(3)
    });
    it('测试用例-2', () => {
        expect(3-2).to.eq(1)
    });
    it('测试用例-3', () => {
        expect(3*2).to.eq(5)
    });
});

    最终的运行结果如下所示：

0303测试用例结构.png

更多测试用例的组织和编写会在后续详细讲解

3.2.3 重试机制

    重试是Cypress一个非常重要的功能，在了解重试的概念后，有助于写出更加健壮的测试。

3.2.3.1 命令和断言

    命令 和 断言 是两种在Cypress中测试常用的两种方法，示例如下所示：

/// <reference types="cypress" />

describe('', () => {
    let baseUrl="https://example.cypress.io/todo"
    it('测试用例-1', () => {
        // 一个命令 visit
       cy.visit(baseUrl);
       // 一个命令 get，一个断言 should
       cy.get(".header input").should("have.class","new-todo");
       // 三个命令 get 和 type
       cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
        // 一个命令 get，一个断言 should
       cy.get('.todo-list li').should('have.length', 4);
    });

});

    最终的运行结果如下所示：

0304命令和断言运行结果.png

    让我们一起来看看最后一行的命令和断言，如下所示：

 cy.get('.todo-list li').should('have.length', 4);

    以上命令和断言，是通过cy.get()命令查找页面的DOM，在找到与选择器匹配的元素，然后进行断言尝试，而现在很多WEB应用几乎都是 异步 的。以最后一行代码为例，Cypress不能在查询DOM元素（todo-list）的同时又去检查其元素个数是否为4个。因此在出现以下情况，就会出现问题，如下所示：

• 1.当运行命令或断言时，应用程序没有更新DOM时，怎么办？
• 2.当运行命令或断言时，应用程序正在等待后端返回响应，而页面暂时没有结果时，怎么办？
• 3.当运行命令或断言时，应用程序正在进行密集计算，而导致页面显示未及时更新时，怎么办？

    以上几种情况，在测试过程中非常常见，一般处理办法 在断言前，设置一个等待时间 ，但这个等待时间，在不同环境中还不能完全统一，还是会导致经常出错。而Cypress处理这种问题，则非常智能，如下所示：

在实际运行时，如果cy.get()命令之后的断言通过，则认为该命令成功执行。如果失败，则cy.get()命令将重新查询应用程序的DOM，再进行断言。如果失败，则再次执行cy.get()命令查询DOM，再进行断言。依此类推，直至断言成功或cy.get()命令超时为止。

    正是因为Cypress的这种 自动重试 功能避免了在测试代码中出现硬编码的等待。使测试代码更加健壮。

3.2.3.2 多重断言

    在日常测试中，有时候需要对一个数据进行多次断言，Cypress提供一种方法叫 多重断言 ，其定义为： 单个命令后跟多个断言 。在断言时，Cypress将按 顺序重试每个命令 ，即当第一个断言通过后，在进行第二个断言时仍会重试第一个断言。当第一和第二个断言都通过后，在进行第三个断言，仍然会重试第一和第二个断言，依此类推。来看看以下示例：

/// <reference types="cypress" />

describe('多重断言示例', () => {
    let baseUrl="https://example.cypress.io/todo";
    it('演示用例-1', () => {
        cy.visit(baseUrl);
        cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
        cy.get('.todo-list li')
        .should('have.length',4)
        .and(($li) => {
            expect($li.get(2).textContent,'first item').to.equal('todo A')
            expect($li.get(3).textContent,'second item').to.equal('todo B')
           });
    });
});

.and()断言是.should()的别名，它是.should()的自定义回调函数，包含两个expect()断言。

    最终的运行结果如下所示：

0305多重断言运行结果.png

    上面代码共有三个断言，分别是 should 和两个 expect 。在测试过程中，如果第二个断言失败了，则第三个断言不会执行，如果第二个断言执行通过，整个命令还未超时，在执行第三个断言前，会再次重试第一个和第二个断言。

    修改代码使得第二个断言出现失败，代码如下所示：

/// <reference types="cypress" />

describe('多重断言示例', () => {
    let baseUrl="https://example.cypress.io/todo";
    it('演示用例-1', () => {
        cy.visit(baseUrl);
        cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
        cy.get('.todo-list li')
        .should('have.length',4)
        .and(($li) => {
            expect($li.get(2).textContent,'first item').to.equal('toda A')
            expect($li.get(3).textContent,'second item').to.equal('todo B')
           });
    });
});

    在第二个断言运行失败后，第三个断言则不会被执行。在执行命令超时后，会在运行页面显示第一个断言执行成功，第二个断言执行失败，如下图所示：

0305多重断言运行失败.gif

3.2.3.3 重试条件

    Cypress并不会重试所有命令 。当命令可能改变待测应用程序的状态时，则将不会进行重试操作（例如.click()命令）。Cypress 仅会重试查询DOM的命令 ，例如cy.get()、.find()、.contains()等等。

如果需要查询更多重试的命令，可查阅API文档中Assertions文档https://docs.cypress.io/guides/references/assertions

    重试的超时时间默认为 4s ，也可通过 defaultCommandTimeout 进行设置。

3.2.3.3.1 增加超时时间

    我们也可以通过修改所有命令的超时时间，例如，将全局的默认超时时间设置为10s，如下所示：

cypress run --config defaultCommandTimeout=10000

    以上这种方式可以修改全局的超时时间，但 不推荐 。相反，我们可以通过设置单个命令的超时时间 { timeout: ms } ，而更加灵活的控制各个命令的超时时间，示例如下所示：

/// <reference types="cypress" />

describe('多重断言示例', () => {
    let baseUrl="https://example.cypress.io/todo";
    it('演示用例-1', () => {
        cy.visit(baseUrl,{timeout:1000});
        cy.get('.new-todo').type('todo A{enter}').type('todo B{enter}');
        cy.get('.todo-list li')
        .should('have.length',4)
        .and(($li) => {
            expect($li.get(2).textContent,'first item').to.equal('toda A')
            expect($li.get(3).textContent,'second item').to.equal('todo B')
           });
    });
});

    以上代码，设置访问网站的超时时间为1s，运行结果如下所示：

0306单独设置命令超时时间.png

3.2.3.3.2 禁用重试

    如果将超时时间设置为 0 ，其本质上是禁用重试机制，示例如下所示：

cy.get('.new-todo',,{timeout:0}).type('todo A{enter}').type('todo B{enter}');