Extra08 - Cypress - E2E 测试框架

此篇为番外，为选入本篇的原因为 Cypress 的功能与 End to End 测试的方式多元且复杂，此篇仅能做初步的介绍，因此放於番外作补充。

与单元测试的单一目标导向不同， E2E （端对端）测试着重於整个系统的使用，我们会使用 E2E 测试来确保使用者的需求被合理的实现 ，因此一个 E2E 测试中，会包含多个元件、多个模组、甚至是多个系统的合作。

E2E 测试可以直接以人为操作的方式进行，系统的开发者会撰写测试手册，交由测试人员，直接以人工操作系统的方式验证项目的正确性。当然，这是个不切实际的测试方式，其所耗费的人力与时间都是很可怕的。

为了解决测试花费巨大的问题，基於 E2E 测试的框架诞生了，使用这些框架时，开发者只要将原本测试手册上的步骤转化为测试脚本，测试框架就可以藉由脚本去执行各种不同的测试，并以此判断系统的运作是否正常。

End to End 的测试框架 - Cypress

Cypress 是个 npm 套件，它帮助使用者直接使用浏览器来做前端相关的测试。

藉由使用者所撰写的脚本， Cypress 会依照脚本的内容开启浏览器，针对特定的页面照着脚本中的设定执行动作，藉以验证整个系统的正确性。

为了方便使用者检视结果与除错， Cypress 所提供的 Dashboard 可以让使用者操作想要执行的测试，以及 Time Travel 的功能，让使用者可以退回任何动作之前，也可以藉由截图与录影的功能来纪录测试的过程，使除错更加容易。

在脚本的撰写上，使用者可以配合测试需求，使用 Cypress 提供的 mock 方法，来避免现实的情况影响到测试的结果。

与其他 E2E 测试框架（例如： Selenium ）将测试跑在独立的程序上不同， Cypress 直接将测试跑在浏览器上，这样的做法使测试者可以更直接的观测到应用程序实际执行的模样，而且由於 Cypress 可以直接控制浏览器，所以可以达到更佳细部的测试效果。

安装 Cypress

在使用前，需要使用 npm 安装 Cypress ：

npm install cypress --save-dev

使用 Cypress

在撰写测试时，可以开启 GUI ，让我们可以更直觉地看到测试的状态：

npx cypress open

如果下指令时还没有设定 Cypress ，它会自动把范例程序码给建立起来，供使用者参考。

这时 Cypress 会开启一个视窗，上面会显示所有的测试项目，使用者可以决定要执行哪个测试。

点击想要执行的测试後， Cypress 会进入执行测试的画面，这时左边会是各个测试的列表，按进去後，会显示各步骤，我们可以藉由点击测试中的不同步骤，来检视当时的画面。

在撰写测试时，使用 GUI 是方便的，但如果是在提交前的验证测试的时候，我们就只要确认测试通过即可，不需要看到画面，这时可以使用 run 指令在不开启 GUI 的情况下执行测试：

npx cypress run

撰写测试脚本

Cypress 使用 Mocha 作为测试框架，因此在撰写测试的执行时，会使用到 Mocha 相关的方法。

describe('example to-do app', () => {
  beforeEach(() => {
    // ...
  });

  it('displays two todo items by default', () => {
    // ...
  });

  it('can add new todo items', () => {
    // ...
  });

  context('with a checked task', () => {
    beforeEach(() => {
      // ...
    });

    it('can filter for uncompleted tasks', () => {
      // ...
    });

    it('can filter for completed tasks', () => {
      // ...
    });
  });
});

• describe() ：数个测试的 Group ，与 context() 功能相同。
• beforeEach() ：在各测试开始前执行的程序，如果在 describe() 或 context() 内部，则只会对内部的测试有用。
• it() ：测试的内容。

其他 Mocha 的方法可以参考 Cypress 的官网说明。

脚本的写法围绕在一个名为 cy 的全域物件上，它囊括了全部的脚本方法。由於 cy 的方法很多，我们使用一个测试情境来说 明测试的撰写方式。

我们要测试 ToDo 应用程序（ https://example.cypress.io/todo ），确认系统的增加项目功能正常，因此我们会得到下面的步骤：

1. 开启 ToDo 应用程序
2. 在建立项目的输入框中输入项目名称并送出
3. 确认项目已经新增至列表中

这项测试只有三个步骤，脚本的写法如下：

it('can add new todo items', () => {
  const newItem = 'Feed the cat';

  // 1. 开启 ToDo 应用程序
  cy.visit('https://example.cypress.io/todo');

  // 2. 在建立项目的输入框中输入项目名称并送出
  cy.get('[data-test=new-todo]').type(`${newItem}{enter}`);

  // 3. 确认项目已经新增至列表中
  cy.get('.todo-list li')
    .should('have.length', 3)
    .last()
    .should('have.text', newItem);
});

脚本中出现的方法说明如下：

• visit ：开启 URL 。
• get ：取得 DOM 元素。
• type ：在 DOM 元素中输入资料。
• should ：判断断言结果
• last ：最後一个 DOM 元素。

如果同一个页面有多个测试项目时，可以将 visit 放於 beforeEach() ，减少撰写的程序码。

自定义方法

有时会有重复的脚本一直出现，例如登入就是大部分的後台在进入前需要执行的动作，为了避免重复的程序码， Cypress 提供了自定义的功能，我们可以将一个个脚本定义为方法，并在需要使用时叫用。

自定义的方法撰写在 cypress/support/commands.js 中：

Cypress.Commands.add('typeLogin', (user) => {
  cy.get('input[name=email]').type(user.email);

  cy.get('input[name=password]').type(user.password);
});

上面的例子新增了 typeLogin 的方法，在测试中直接使用 cy.typeLogin() 执行自订方法：

cy.typeLogin({ email: '[email protected]', password: 'Secret1' });

本文重点整理

• E2E 测试确保使用者在操作系统时的正确性， Cypress 提供了一套完整的测试方式，并且额外增加如截图、录影与 Time Travel 等便於除错的功能，让开发者可以很轻松的撰写出期望的测试。

参考资料

• Cypress Guides
• Cypress API