隨記

Week 10 · Day 06 — E2E 測試：完整流程

學習目標

  • 串接多步操作的 E2E 場景
  • 使用 Cypress 的斷言與狀態檢查
  • 養成「使用者視角」測流程

重點

多步場景 

describe('Todo App', () => {
  it('should add a todo', () => {
    cy.visit('/');
    cy.get('input[data-testid="todo-input"]').type('New Todo');
    cy.get('button[data-testid="add-button"]').click();
    cy.get('.todo-item').should('contain', 'New Todo');
  });

  it('should complete a todo', () => {
    cy.visit('/');
    cy.get('.todo-item').first().find('input[type="checkbox"]').check();
    cy.get('.todo-item').first().should('have.class', 'completed');
  });
});

更多 Cypress 技巧 - 等待與重試：cy.get 預設會自動重試至元素出現 - 連結動作： 

cy.get('[data-testid="add-button"]')
  .should('be.visible')
  .click();
- 列表統計： 
cy.get('.todo-item').should('have.length', 1);
- 表單驗證： 
cy.get('[data-testid="email"]').clear().type('bad email');
cy.get('[data-testid="submit"]').should('be.disabled');

測試原則 - 從使用者真實操作寫（點、輸入、勾選） - 用 data-testid 定位，別依賴脆弱 CSS - 一個測試 complete 走一個使用情境

實作

  1. 擴充「新增待辦」與「完成待辦」兩條測試
  2. 加一條「輸入不合法時送出鈕 disabled」的表單測試
  3. 跑完整 Cypress 測試套件

作業

  • 撰寫包含多步操作的 E2E 場景
  • 用斷言驗證狀態（disabled、class、count）
  • 跑通整組 E2E 測試