Playwright TypeScript Master Course¶

ยินดีต้อนรับเข้าสู่คอร์สออนไลน์ที่สอนการเขียน Automation Test ด้วย Playwright และ TypeScript ระดับมาสเตอร์ (Master)

คอร์สนี้ออกแบบมาให้ผู้ที่มี Robot Framework หรือ Selenium พื้นฐาน สามารถเข้าใจและใช้ Playwright ได้อย่างลึกซึ้ง — ไม่ใช่แค่พื้นฐาน แต่ถึงระดับการออกแบบระบบทดสอบในการผลิต (production-grade)

Prerequisites (ต้องมีครบก่อนเริ่ม)¶

เพื่อให้เรียนได้ผล ต้องตรวจสอบให้แน่ใจว่าคุณมีครบดังนี้:

1. Environment¶

Node.js: เวอร์ชัน 20.x, 22.x หรือ 24.x ขึ้นไป
```
node --version
# ควร output v20.x.x ขึ้นไป
```
npm: 9.0 ขึ้นไป (มาพร้อม Node.js โดยปกติ)
```
npm --version
```

2. Programming Knowledge (พื้นฐานจำเป็น)¶

JavaScript/TypeScript เบื้องต้น:
ตัวแปร (variable), function, async/await
Arrow function () => {}
Promise และ async/await คำนวณ
Object destructuring (รู้พอเพียง)
HTML เบื้องต้น:
HTML elements: <div>, <input>, <button> เป็นต้น
Attributes: id, class, data-*
CSS selectors สำคัญบางตัว (id selector, class selector)
Test Automation พื้นฐาน:
มี Robot Framework หรือ Selenium experience นิดหน่อยจะช่วย
คิดเป็นนอก "Mindset shift" มี Ch01 เก็บไว้

3. Text Editor/IDE¶

Visual Studio Code (แนะนำ) หรือ IDE ที่เสมือ
TypeScript extension (ถ้าใช้ VS Code)
```
ext install ms-vscode.vscode-typescript-next
```

วิธี Setup ก่อนเริ่มเรียน¶

ขั้นตอน 1: Install Playwright¶

# สร้าง folder สำหรับ course
mkdir playwright-course
cd playwright-course

# Install Playwright + TypeScript
npm init playwright@latest

หลังจาก npm init เสร็จ คุณจะได้ folder structure แบบนี้:

playwright-course/
├── tests/
│   ├── example.spec.ts
│   └── ...
├── playwright.config.ts
├── package.json
└── tsconfig.json

ขั้นตอน 2: ติดตั้ง Browsers¶

# ดาวน์โหลด browser binaries (Chromium, Firefox, WebKit)
npx playwright install

ขั้นตอน 3: รัน Demo App สำหรับ Practice¶

สำหรับบทที่ 2 เป็นต้นไป เราจะเขียน test ไปกับ Demo App ที่มีอยู่ในคอร์สนี้แล้ว

เปิด terminal ใหม่ (แยกจาก terminal ที่ใช้รัน test) แล้วรัน:

# ไปที่ folder ของ demo app ที่มาพร้อมกับ course materials
cd path/to/docs/playwright-typescript/playwright-course-app
npm install
npm start
# → ใช้งาน http://localhost:3000

หมายเหตุ: ให้ทิ้ง terminal นี้ไว้ตลอด (ไม่ต้อง Ctrl+C) ส่วน terminal สำหรับรัน test ให้เปิดแยกต่างหาก

ขั้นตอน 4: ยืนยันการติดตั้งสำเร็จ¶

กลับไปที่ terminal แรก (ที่อยู่ใน playwright-course/) แล้วรัน:

# รัน test ตัวอย่าง (ต้องอยู่ใน playwright-course/ และ demo app ต้องรันอยู่)
npx playwright test

# ควรเห็น output บอกว่า test passed หมด

Table of Contents — 20 บท¶

ทั้งคอร์สสำเร็จใน ~24 ชั่วโมง (ไม่นับเวลา optional deep-dive)

บท	หัวข้อ	ระยะเวลา
01	Why Playwright? Mindset Shift จาก RF/Selenium	45 นาที
02	Setup + TypeScript Essentials	60 นาที
03	Architecture: Browser → BrowserContext → Page	45 นาที
04	Locators — Accessibility-First	90 นาที
05	Actions & Assertions	90 นาที
06	Debugging	60 นาที
07	Fixtures	75 นาที
08	Page Object Model	60 นาที
09	Test Organization	60 นาที
10	Configuration & Projects	75 นาที
11	Parallelism, Sharding & Reporting	75 นาที
12	Mocking: Network, Time & Browser APIs	90 นาที
13	Authentication & Storage State	75 นาที
14	Advanced Browser + Emulation	90 นาที
15	API Testing + Hybrid	75 นาที
16	Visual Testing + Accessibility Testing	60 นาที
17	CI/CD	60 นาที
18	Production Patterns	75 นาที
19	Database State Verification	75 นาที
20	Professional Project Structure	75 นาที

🎯 หลักการเรียนให้ได้ผล¶

ถ้าต้องการเรียนให้จำจริง และใช้ Playwright ได้จริงในงาน ให้ถือหลักการนี้:

1. อย่า Copy-Paste Code¶

แม้ว่า example code ในหลายบท คุณสามารถ copy ได้ แต่การพิมพ์เองจะช่วยให้: - ทำความเข้าใจระดับลึก (จำไว้นานกว่า) - เจอ syntax error เอง → รู้ว่าต้อง debug อย่างไร - ถ้า copy-paste → ใช้ได้แต่ตอนต่อมาปัญหาจะเยอะ

2. ทำ Exercise ทุกบท¶

แต่ละบท (Ch02–Ch20) มี exercises.md ที่มี: - Recall Questions: ตอบด้วยคำตัวเอง ไม่ใช่มัลติเพิ่ล - Application Exercises: ใช้สิ่งที่เรียนกับสถานการณ์ใหม่ - Synthesis Tasks: ออกแบบหรือหา bug อย่างมืออาชีพ

บังคับ: ลองตอบก่อนดูเฉลย เสมอ — ถ้า peek เฉลยไปเร็ว จำไม่ได้

3. รัน Demo App ทิ้งไว้ตลอด¶

ทำให้เห็นผลจริง ไม่ใช่ abstract
ตอนเขียน test ใหม่ ให้เปิด browser tab สำหรับ demo app ไว้

4. ถ้า Code Error ให้แก้ก่อน¶

อย่าข้ามบทเพื่อดูว่าเกิดอะไรขึ้น (Cognitive Load จะมากเกินไป)
ทำให้เสียเวลาพอยึดมั่น เรียน error handling อย่างจริงจัง

📋 Playwright Version ที่ใช้ในคอร์สนี้¶

Playwright: ใช้วิธี npm init playwright@latest เพื่อให้ได้เวอร์ชันล่าสุด (คอร์สนี้อัปเดตตามเวอร์ชันล่าสุดเสมอ)
Node.js: 20.x, 22.x หรือ 24.x ขึ้นไป (ตามที่ Playwright สนับสนุน)
TypeScript: 5.0 ขึ้นไป (มาพร้อม Playwright โดยอัตโนมัติ)

ความสำคัญ: ถ้าคุณใช้ Node.js 18.x หรือเก่ากว่า test อาจจะ error เพราะเวอร์ชันเก่ากว่า Playwright สนับสนุน — อัปเดต Node.js ก่อน

❓ FAQ¶

Q: ฉันต้องเรียนบทเรียงลำดับหรือสามารถข้ามบทได้?¶

A: เรียนตามลำดับ บท 01–10 แนวตั้งสำคัญ (ฟาวเดชัน) — ข้ามจะเข้าใจไม่ลึก บท 11–18 ขึ้นอยู่กับหน้าที่ (สามารถเลือกได้บ้าง)

Q: ฉันใช้ Selenium มา 5 ปี คอร์สนี้เหมาะไหม?¶

A: ใช่ บท 01 เก็บไว้สำหรับเปลี่ยน mindset จาก Selenium → Playwright (Locator ต่างกันเยอะ) — อ่านจะได้ประโยชน์

Q: ต้อง TypeScript หรือใช้ JavaScript ได้?¶

A: คอร์สนี้ TypeScript เท่านั้น เพราะ TypeScript แนะนำใน production และ IDE support ดีกว่า JavaScript มาก (autocomplete, type checking)

Q: ทำแบบฝึกหัด syntax error ไม่ผ่าน ทำไง?¶

A: อ่าน error message อย่างตั้งใจ — เขียนว่า "line X: ..." นั่นคือ hint ส่วนใหญ่ fix ได้ด้วยตัวเอง (ฟีเจอร์ของ TypeScript ช่วยเยอะ) ถ้าจริงๆ ติด ข้ามไป แล้ว comeback หลัง exercise นั้นเสร็จ

🚀 เริ่มต้นกันเลย¶

ไปที่ บท 01: Why Playwright? Mindset Shift