E2E Testing เบื้องต้นด้วย Cypress หรือ Playwright

E2E Testing คือการทดสอบการทำงานของแอปตั้งแต่ต้นจนจบเหมือนผู้ใช้จริง เช่น เปิดหน้าเว็บ กรอกฟอร์ม กดปุ่ม และตรวจผลลัพธ์บนหน้าจอ

Timeline/ประวัติศาสตร์

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค Manual QA / Human Flow"]
    A["Tester คลิกเอง
ใช้เวลามาก"]
  end
  subgraph Era2["ยุค Browser Automation"]
    B["Cypress
cy.visit cy.get"]
    C["Playwright
page.goto page.click"]
  end
  subgraph Era3["ยุค Reliable E2E"]
    D["data-testid
selector เสถียร"]
    E["Screenshot/Video
debug test failure"]
  end
  A --> B --> C --> D --> E

แนวคิดสำคัญ

ตาราง Cypress vs Playwright

หัวข้อ Cypress Playwright
API Style cy.* chain async/await
Browser Support ดีมาก Chromium, Firefox, WebKit เด่น
Network Mock cy.intercept() page.route()
Screenshot/Video built-in built-in
เหมาะกับ team เริ่ม E2E ง่าย cross-browser จริงจัง

Mermaid Diagram: E2E Flow

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
  A["Start Browser
เปิด Browser"] --> B["Visit Page
เข้าเว็บ"]
  B --> C["Find Element
เลือก data-testid"]
  C --> D["User Action
กรอก/คลิก"]
  D --> E["Assert Result
ตรวจผล"]
  E --> F["Screenshot/Video
หลักฐานเมื่อ fail"]

Code Example

// cypress/e2e/lesson.cy.js
// Cypress test พร้อม mock API
describe('Lesson page', () => {
  it('shows lessons from mocked API', () => {
    cy.intercept('GET', '/api/lessons', {
      body: [{ id: 1, title: 'Testing Angular' }]
    });

    cy.visit('/lessons');
    cy.get('[data-cy="lesson-title"]').should('contain', 'Testing Angular');
    cy.get('[data-cy="start-btn"]').click();
    cy.url().should('include', '/lessons/1');
  });
});

// ตัวอย่างการใช้งาน:
// npx cypress open

// tests/lesson.spec.ts
// Playwright test แบบ async/await
import { test, expect } from '@playwright/test';

test('user can search lesson', async ({ page }) => {
  await page.goto('/lessons');
  await page.fill('[data-testid="search-input"]', 'Angular');
  await page.click('[data-testid="search-button"]');
  await expect(page.locator('[data-testid="lesson-title"]')).toContainText('Angular');
});

// ตัวอย่างการใช้งาน:
// npx playwright test

วิดีโอแนะนำ

กิจกรรมท้ายบท

กลับสัปดาห์ที่ 14