reveal.js

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

Lesson 2 - Testing, DevOps และการ Deploy

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

---

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

<pre class="mermaid">
%%{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
</pre>

---

## แนวคิดสำคัญ

- **Cypress** ใช้ `cy.visit()`, `cy.get('[data-cy="btn"]').click()`
- **`cy.intercept()`** ใช้ Mock API Response
- **Playwright** ใช้ `page.goto()`, `page.click()`, `page.fill()`
- **data-testid/data-cy** เป็น selector ที่เหมาะกับ test เพราะไม่ผูกกับ CSS หรือข้อความมากเกินไป
- **Screenshot และ Video Recording** ช่วยตรวจเมื่อ test ล้มเหลว

---

## ตาราง 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

<pre class="mermaid">
%%{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"]
</pre>

---

## Code Example

```js
// 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
```

```ts
// 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
```

---

## วิดีโอแนะนำ

- [YouTube: Cypress vs Playwright E2E Testing](https://www.youtube.com/results?search_query=Cypress+Playwright+E2E+testing)

---

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

- เพิ่ม `data-testid` ให้ปุ่มและ input
- เขียน E2E test สำหรับ login หรือค้นหาบทเรียน
- Mock API response
- เปิดดู screenshot เมื่อ test ล้มเหลว

---

## End

<a href="/web-programming/14-testing-deploy/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>