# สัปดาห์ที่ 10 System Testing และ Acceptance Testing

⚠️ Lab Exercises ทั้งหมดอยู่ใน **[wk10-lab.md](wk10-lab.md)** ← คลิกเพื่ออ่านส่วนปฏิบัติการ

---

## 📖 Table of Contents (สารบัญ)

### **ส่วนที่ 1: บรรยาย (Lecture) - ไฟล์นี้**

1. [System Testing Overview](#11-system-testing-overview-15-นาที)
2. [System Testing Types](#12-system-testing-types-15-นาที)
3. [Test Environment Management](#13-test-environment-management-15-นาที)
4. [User Acceptance Testing](#part-2-user-acceptance-testing-30-นาที)
5. [Alpha vs Beta Testing](#22-alpha-vs-beta-testing-7-นาที)
6. [Acceptance Criteria](#23-acceptance-criteria-8-นาที)
7. [Cross-Browser Testing](#part-3-cross-browser-testing-30-นาที)

### **ส่วนที่ 2: ปฏิบัติการ (Lab) - อ่านใน [wk10-lab.md →](wk10-lab.md)**

- Setup Playwright
- Exercise 1: Complete User Journey
- Exercise 2: Error Handling E2E Test
- Exercise 3: Multi-Browser Testing Configuration
- Exercise 4: UAT Test Scenarios
- Lab Deliverables & Grading

---

## 🎯 Learning Objectives

เมื่อจบสัปดาห์นี้ นักศึกษาจะสามารถ:

1. อธิบายความแตกต่างระหว่าง System Testing และ Acceptance Testing
2. ออกแบบและเขียน End-to-End test scenarios
3. ใช้ Playwright ทดสอบเส้นทางผู้ใช้ที่สมบูรณ์
4. ทำ Cross-Browser Testing และ Responsive Testing
5. วางแผนและดำเนินการ UAT (User Acceptance Testing)
6. เข้าใจ Smoke Testing และ Sanity Testing
7. สร้าง Acceptance Criteria ที่ชัดเจน

---

## 📚 ส่วนที่ 1: บรรยาย Lecture (1.5 ชั่วโมง)

**💡 สำคัญ:** หลังจากอ่านบรรยายเสร็จ ให้ไปที่ [wk10-lab.md](wk10-lab.md) เพื่อทำ **Exercises และส่งการบ้าน**

---

### Part 1: System Testing (45 นาที)

#### 1.1 System Testing Overview (15 นาที)

**System Testing คือ?**

- การทดสอบระบบทั้งหมดที่ integrated เสร็จแล้ว
- ทดสอบว่าระบบตรงตาม requirements หรือไม่
- เป็น Black Box Testing ที่ระดับสูงสุด
- ทดสอบในสภาพแวดล้อมที่ใกล้เคียง production

**ทำไมต้องมี System Testing?**

```
Unit Testing ✓ → Integration Testing ✓ → System Testing ?
    ↓                    ↓                      ↓
  Parts work       Parts work together    WHOLE SYSTEM works
```

**ตัวอย่างจาก Library System:**

```
Unit Test: Book.calculateLateFee() ทำงานถูกต้อง ✓
Integration Test: Book + User + Transaction ทำงานร่วมกันได้ ✓
System Test: User สามารถ login → search → borrow → return book ได้จริง?
```

**ขอบเขตของ System Testing:**

- ทดสอบ functional requirements
- ทดสอบ non-functional requirements (performance, security, usability)
- ทดสอบ end-to-end workflows
- ทดสอบในสภาพแวดล้อมจริง (database, external services)

---

#### 1.2 System Testing Types (15 นาที)

**1. Functional System Testing**

- ทดสอบว่า features ทำงานตาม requirements
- ตัวอย่าง: "ผู้ใช้สามารถยืมหนังสือได้ถูกต้อง"

**2. Non-Functional System Testing**

- **Performance Testing**: ระบบรองรับ 100 concurrent users ได้ไหม?
- **Security Testing**: ข้อมูล user ปลอดภัยไหม?
- **Usability Testing**: ใช้งานง่ายไหม?
- **Compatibility Testing**: ทำงานได้บนทุก browser/OS ไหม?

**3. End-to-End (E2E) Testing**

- ทดสอบขั้นตอนการใช้งานผู้ใช้ที่สมบูรณ์
- จำลองพฤติกรรมผู้ใช้จริง
- ครอบคลุมทุก layer (UI → API → Database)

**E2E Example Scenarios:**

```
สถานการณ์ 1: การลงทะเบียนผู้ใช้ใหม่และการยืมหนังสือครั้งแรก
1. ผู้ใช้เปิดเว็บไซต์
2. ลงทะเบียนบัญชีใหม่
3. ยืนยันอีเมล (mock)
4. ล็อกอิน
5. ค้นหาหนังสือ "JavaScript"
6. เลือกหนังสือที่ต้องการ
7. ยืมหนังสือ
8. ตรวจสอบใน "หนังสือของฉัน" ว่ามีหนังสือที่ยืมไว้
9. ออกจากระบบ

ผลลัพธ์ที่คาดหวัง: ทุก step สำเร็จ, หนังสือถูกบันทึกในระบบ
```

**Smoke Testing vs Sanity Testing:**

| Aspect          | Smoke Testing                   | Sanity Testing                  |
| --------------- | ------------------------------- | ------------------------------- |
| **เมื่อไหร่ทำ** | หลัง build ใหม่                 | หลัง bug fix หรือ minor changes |
| **ขอบเขต**      | กว้าง แต่ไม่ลึก                 | แคบ แต่ลึก                      |
| **Purpose**     | Build stable พอจะ test ต่อไหม?  | Bug fix ทำงานถูกต้องไหม?        |
| **Example**     | Login, Search, Borrow ทำงานไหม? | Bug #123 แก้แล้วจริงไหม?        |

**Smoke Test Example:**

```javascript
// Basic functionality check
test("Smoke Test: Critical Features", async ({ page }) => {
  // 1. Homepage loads
  await page.goto("http://localhost:3000");
  await expect(page.locator("h1")).toContainText("Library");

  // 2. ค้นหาได้
  await page.fill("#search", "JavaScript");
  await page.click("#search-button");
  await expect(page.locator(".book-item")).toBeVisible();

  // 3. ล็อกอินได้
  await page.goto("http://localhost:3000/login");
  await page.fill("#username", "testuser");
  await page.fill("#password", "password123");
  await page.click("#login-button");
  await expect(page).toHaveURL(/dashboard/);
});
```

---

#### 1.3 Test Environment Management (15 นาที)

**Test Environments:**

```
Development → Testing → Staging → Production
    ↓            ↓         ↓           ↓
  Dev data   Test data  Prod-like   Real data
  Unstable   Stable     Stable      Stable
```

**Test Environment Requirements:**

1. **ใกล้เคียงกับ Production**
   - OS และเวอร์ชัน database เดียวกัน
   - การตั้งค่าเดียวกัน
   - ปริมาณข้อมูลใกล้เคียง

2. **การจัดการข้อมูลการทดสอบ**
   - Reset data before each test run
   - Use fixtures หรือ seed data
   - Isolate test data (ไม่รบกวนกัน)

3. **Test Data Strategy:**

```javascript
// ตัวเลือก 1: Fixtures (Static Data)
const testUsers = require("./fixtures/users.json");

// ตัวเลือก 2: Dynamic Data with Faker
import { faker } from "@faker-js/faker";
const testUser = {
  username: faker.internet.userName(),
  email: faker.internet.email(),
};

// ตัวเลือก 3: Database Seeding
beforeAll(async () => {
  await db.seed(); // โหลด test data
});

afterAll(async () => {
  await db.clean(); // ล้างข้อมูล
});
```

---

### Part 2: User Acceptance Testing (30 นาที)

#### 2.1 UAT Fundamentals (15 นาที)

**UAT คืออะไร?**

- การทดสอบโดย **ผู้ใช้ปลายทาง** หรือ **ผู้มีส่วนได้ส่วนเสีย**
- เป็นการทดสอบครั้งสุดท้ายก่อน go-live
- ตรวจสอบว่าระบบตรงตาม **ความต้องการทางธุรกิจ** จริงๆ

**ทำไมต้องมี UAT?**

```
นักพัฒนา: Code ถูกต้อง ✓
ผู้ทดสอบ: ทำงานตาม requirements ✓
ผู้ใช้: แต่ไม่ใช่สิ่งที่เราต้องการ ✗

→ ต้องให้ผู้ใช้ทดสอบด้วย!
```

**กระบวนการ UAT:**

```
1. การวางแผน UAT
   ↓
2. ออกแบบ UAT Test Cases (จาก Business Requirements)
   ↓
3. เตรียมสภาพแวดล้อม UAT & ข้อมูลการทดสอบ
   ↓
4. การทำงาน UAT (โดยผู้ใช้)
   ↓
5. การรายงาน Defect & แก้ไข
   ↓
6. การอนุมัติ UAT
   ↓
7. Go Live!
```

**ใครเข้าร่วม UAT?**

- **ผู้ใช้ทางธุรกิจ**: คนที่จะใช้ระบบจริง
- **ผู้วิเคราะห์ธุรกิจ**: เข้าใจ requirements
- **ประสานงาน UAT**: จัดการกระบวนการ UAT
- **ผู้ทดสอบ**: สนับสนุนผู้ใช้
- **นักพัฒนา**: แก้ไข bugs ที่พบ

---

#### 2.2 Alpha vs Beta Testing (7 นาที)

**Alpha Testing:**

- ทดสอบโดยผู้ใช้ภายใน (พนักงานในบริษัท)
- ทดสอบในสภาพแวดล้อมที่ควบคุม
- ทำก่อน release ให้ผู้ใช้ภายนอก

**Beta Testing:**

- ทดสอบโดยผู้ใช้จริง (ลูกค้าจริง)
- ทดสอบในสภาพแวดล้อมจริง
- release จำกัด (ผู้ใช้ที่เลือก)
- รับ feedback เพื่อปรับปรุง

**ตัวอย่าง:**

```
ระบบจัดการห้องสมุด

การทดสอบภายใน (Alpha test):
- พนักงานจากห้องสมุดทดสอบภายใน
- ใช้ test environment
- ระยะเวลา 2 สัปดาห์

การทดสอบภายนอก (Beta test):
- เปิดให้ห้องสมุด 5 แห่งทดสอบจริง
- ใช้งานจริง 1 เดือน
- รับ feedback และปรับปรุง
```

---

#### 2.3 Acceptance Criteria (8 นาที)

**Acceptance Criteria คือ?**

- เงื่อนไขที่ระบุว่า feature "เสร็จ" หรือ "ยอมรับได้" เมื่อไหร่
- เขียนในรูปแบบที่ user เข้าใจ
- ใช้เป็น checklist ใน UAT

**การเขียน Acceptance Criteria:**

**รูปแบบ 1: Given-When-Then (Gherkin Style)**

```
Feature: การยืมหนังสือ

Scenario: สมาชิกยืมหนังสือที่พร้อมให้ยืม
  Given ฉันเป็นสมาชิกที่ลงทะเบียนแล้ว
  And ฉันล็อกอินแล้ว
  And หนังสือ "JavaScript Guide" พร้อมให้ยืม
  When ฉันคลิก "ยืม" ในหนังสือ
  Then หนังสือควรเพิ่มเข้าไป "หนังสือของฉัน"
  And สถานะของหนังสือควรเปลี่ยนเป็น "ยืมไปแล้ว"
  And ฉันควรได้รับข้อความยืนยัน
  And วันครบกำหนดของหนังสือควรเป็น 14 วันนับจากวันนี้
```

**รูปแบบ 2: Checklist**

```
User Story: ในฐานะสมาชิกห้องสมุด ฉันต้องการยืมหนังสือออนไลน์

Acceptance Criteria:
✓ ผู้ใช้สามารถเห็นปุ่ม "ยืม" เฉพาะหนังสือที่พร้อมใช้งาน
✓ หลังจากคลิก "ยืม" หนังสือจะปรากฏใน "หนังสือของฉัน"
✓ สถานะหนังสือเปลี่ยนจาก "พร้อมใช้งาน" เป็น "ยืมไปแล้ว"
✓ วันครบกำหนดตั้งเป็น 14 วันนับจากวันยืม
✓ ผู้ใช้ได้รับการยืนยันทางอีเมล
✓ ผู้ใช้ไม่สามารถยืมหนังสือมากกว่า 5 เล่มในครั้งเดียว
✓ ผู้ใช้ไม่สามารถยืมหนังสือหากมีหนังสือที่เกินกำหนด
```

**Acceptance Criteria ที่ดี:**
✓ ชัดเจน (Clear)
✓ ทดสอบได้ (Testable)
✓ เฉพาะเจาะจง (Specific)
✓ ครบถ้วน (Complete)

---

### Part 3: Cross-Browser Testing (30 นาที)

#### 3.1 Browser Compatibility (10 นาที)

**ทำไมต้อง Cross-Browser Testing?**

ผู้ใช้ใช้ browser ต่างกัน:

- Chrome (65%)
- Safari (20%)
- Firefox (8%)
- Edge (4%)
- อื่น ๆ (3%)

**ปัญหา Browser ทั่วไป:**

1. **การ Render CSS แตกต่างกัน**

```css
/* Safari ต้องใช้ -webkit- prefix สำหรับบางคุณสมบัติ */
.button {
  display: flex;
  display: -webkit-flex; /* Safari */
}
```

2. **JavaScript API ไม่รองรับ**

```javascript
// fetch() ไม่ทำงานบน IE11
// ต้องใช้ polyfill

// Modern: Optional Chaining
const name = user?.profile?.name;

// IE11 ไม่รองรับ ต้อง transpile
```

3. **ปัญหา Layout**

- Grid/Flexbox ทำงานต่างกันเล็กน้อย
- การแสดงรูปแบบอักษรแตกต่างกัน
- Form elements ดูต่างกัน

**Browser Compatibility Strategy:**

```
1. กำหนด Supported Browsers
   - Chrome 90+
   - Firefox 88+
   - Safari 14+
   - Edge 90+

2. ทดสอบบน Target Browsers
   - ทดสอบด้วยตนเอง (บางครั้ง)
   - ทดสอบอัตโนมัติ (Playwright)

3. ใช้ Feature Detection (ไม่ใช่ Browser Detection)
   if ('geolocation' in navigator) {
     // ใช้ geolocation
   }

4. Progressive Enhancement
   - ฟังก์ชันพื้นฐานทำงานทุกที่
   - คุณลักษณะขั้นสูงสำหรับ browser สมัยใหม่
```

---

#### 3.2 Playwright Multi-Browser Testing (15 นาที)

**Playwright รองรับ:**

- Chromium (Chrome, Edge)
- Firefox
- WebKit (Safari)

**Configuration:**

```javascript
// playwright.config.js
module.exports = {
  projects: [
    {
      name: "chromium",
      use: {
        browserName: "chromium",
        viewport: { width: 1280, height: 720 },
      },
    },
    {
      name: "firefox",
      use: {
        browserName: "firefox",
        viewport: { width: 1280, height: 720 },
      },
    },
    {
      name: "webkit",
      use: {
        browserName: "webkit",
        viewport: { width: 1280, height: 720 },
      },
    },
  ],
};
```

**การเขียน tests ที่ไม่ขึ้นกับ Browser:**

```javascript
test("ล็อกอินทำงานบน browsers ทั้งหมด", async ({ page }) => {
  // Test จะรันโดยอัตโนมัติบน browsers ทั้งหมด
  await page.goto("http://localhost:3000/login");

  await page.fill('[data-testid="username"]', "testuser");
  await page.fill('[data-testid="password"]', "password123");
  await page.click('[data-testid="login-button"]');

  // assertion นี้ใช้ได้กับ browsers ทั้งหมด
  await expect(page).toHaveURL(/dashboard/);
  await expect(page.locator("h1")).toContainText("Dashboard");
});
```

**การรัน Tests:**

```bash
# รันบน browsers ทั้งหมด
npx playwright test

# รันบน browser เฉพาะ
npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

# รันด้วย UI
npx playwright test --ui
```

---

#### 3.3 Mobile Responsive Testing (5 นาที)

**Device Emulation:**

```javascript
// playwright.config.js - Add mobile projects
const { devices } = require("@playwright/test");

module.exports = {
  projects: [
    // Desktop browsers
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },

    // Mobile devices
    {
      name: "Mobile Chrome",
      use: { ...devices["Pixel 5"] },
    },
    {
      name: "Mobile Safari",
      use: { ...devices["iPhone 12"] },
    },
    {
      name: "Tablet",
      use: { ...devices["iPad Pro"] },
    },
  ],
};
```

**Responsive Test Example:**

```javascript
test("search works on mobile", async ({ page }) => {
  // Automatically uses device from config
  await page.goto("http://localhost:3000");

  // Mobile might have hamburger menu
  if (await page.locator("#hamburger-menu").isVisible()) {
    await page.click("#hamburger-menu");
  }

  await page.fill("#search", "JavaScript");
  await page.click("#search-button");

  await expect(page.locator(".book-item")).toHaveCount(3);
});
```

---

## 🔗 ตัวเชื่อมไปยัง Lab Exercises

✅ **บรรยายเสร็จแล้ว 👏**

**คุณพร้อมสำหรับส่วนปฏิบัติการแล้ว!**

👉 **ไปที่ [wk10-lab.md](wk10-lab.md)** เพื่อ:

- ✅ ทำ Exercise 4 ข้อ (Complete User Journey, Error Handling, Cross-Browser, UAT)
- ✅ เตรียม UAT Documentation
- ✅ ส่งการบ้าน (Lab Deliverables: 10 คะแนน)

---

## 📝 สรุป Learning Path สัปดาห์ที่ 9

| ลำดับ | กิจกรรม                | เวลา  | ที่                        |
| ----- | ---------------------- | ----- | -------------------------- |
| 1️⃣    | อ่านบรรยาย             | 1.5 h | wk10.md (ไฟล์นี้)          |
| 2️⃣    | ทำ Lab Exercises 4 ข้อ | 1 h   | [wk10-lab.md](wk10-lab.md) |
| 3️⃣    | ส่งการบ้าน             | -     | Lab Deliverables (10 pts)  |

---

**Good Luck! 🚀**