[Day25] Vue3 E2E Testing: Cypress 实战之 Todo MVC (上)

在经过前两天简单的介绍 Cypress，现在我想透过一个实际的范例来让大家更加了解 Cypress 以及到底如何攥写 E2E 测试。

我们这次测试的目标网站是非常经典的 TodoMVC ，不过为了呼应 Vue 的主题，所以我会拿 Vue.js • TodoMVC 当作测试的目标网站。

大家可以透过连结自由操作一下，会对於接下来的测试例子更佳有感！

Test Cases

以下是这次测试的案例规划：

Case 1: 初始状态
- Case 1-1: 初始状态下，无任何 Todo。
- Case 1-2: 初始状态下，Todo 清单以及 Footer 将会隐藏。
Case 2: 新增 Todo
- Case 2-1 可以新增一至多个 Todo。
- Case 2-2: Todo 新增完後，输入框的文字会被清除。
- Case 2-3: Todo 会被新增至清单的最後一个。
- Case 2-4: 当有 Todo 新增後，Todo 清单以及 Footer 将会显示。
Case 3: 编辑 Todo
- Case 3-1: 对 Todo 连击两下後进入编辑模式，并在 blur 时完成编辑。
- Case 3-2: 如果编辑後的 Todo 为空内容，则自动删除。
Case 4: 改变 Todo 状态
- Case 4-1: 可以一一将 Todo 标示为完成。
- Case 4-2: 可以一一将完成的 Todo 标示为未完成。
- Case 4-3: 可以一次将所有 Todo 标示为完成。
- Case 4-4: 可以一次将所有完成的 Todo 标示为未元成。
Case 5: 删除 Todo
- Case 5-1: 可以一一将 Todo 删除。
- Case 5-2: 可以一次将标示为完成的 Todo 删除。

我大部分是参考 TodoMVC 原作者所攥写的 E2E 测试，并从中挑选重要的核心操作来示范撰写测试，如果想了解涵盖率 100% 的 TodoMVC E2E 测试可以去查看原作的 Source Code。

实务上 E2E 测试也不常达到 100%，因为 E2E 所要花费的成本是所有测试类型中最高的，而且通常在涵盖率达到 60~70 % 後测试的效益就会大幅降地 (成本太大)，也因此通常仅会为产品的核心功能攥写 E2E 测试。

Case 1: 初始状态

Case 1-1: 初始状态下，无任何 Todo。
Case 1-2: 初始状态下，Todo 清单以及 Footer 将会隐藏。

describe('Todo MVC', () => {
  context('Case 1: Initial State', () => {
    beforeEach(() => {
      cy.visit('https://todomvc.com/examples/vue')
    })
    it('Case 1-1: start with zero todo item', () => {
      cy.get('.todo-list .todo').should('have.length', 0)
    })
    it('Case 1-2: hide .main and .footer', () => {
      cy.get('.main').should('not.be.visible')
      cy.get('.footer').should('not.be.visible')
    })
  })
})

语法说明：

visit(): 访问浏览目标 URL，基本上每一条测试都是使用 visit 到目标页面开始测试。
get(): get() 使用和 Document.querySelector() 一样的语法，如果有成功找到目标元素就会回传目标元素，如果超过 retry 时间仍没有找到目标元素则会报错导致测试失败。
should(): should 可以传入来自 Chai, Chai-jQuery 或 Sinon-Chai 的 Chainer，并且创建一个不断自动重试的断言，直到通过或超时。
beforeEach(): 在区块中的每个测试开始之前会执行的 hook。