隨記

Week 10 · Day 05 — E2E 測試：Cypress 基礎

學習目標

  • 認識 E2E 測試的定位
  • 安裝 Cypress
  • 撰寫並執行第一個 E2E 測試

重點

E2E 測試是什麼 - 端對端：模擬「真實使用者操作整個應用」 - 會開真實瀏覽器，走完整流程 - 驗證前後端整合是否正常

安裝 Cypress 

npm install cypress --save-dev

E2E 測試範例 

// e2e/spec.ts
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.visit('/') | 造訪頁面 | | cy.get(selector) | 依 CSS 選擇器找元素 | | .type(text) | 輸入文字 | | .click() / .check() | 點擊 / 勾選 | | .should('contain', text) | 斷言內容 | | .first() / .find() | 找子元素 |

給測試加 data-testid - 用 data-testid 屬性，免受樣式/結構改動影響

實作

  1. 安裝 Cypress
  2. 為待辦輸入框與按鈕加 data-testid
  3. 執行 Cypress，跑通「新增待辦」測試

作業

  • 安裝 Cypress
  • 撰寫一個 E2E 測試（訪問 + 操作 + 斷言）
  • 用 data-testid 標記測試目標