ข้ามไปที่เนื้อหา

Playwright TypeScript Master Course

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

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

🔑 ก่อนเริ่ม — ปลุกความรู้เดิมของคุณ

ก่อนเปิดบทแรก หยุดคิดสัก 2 นาที แล้วเขียนคำตอบลงกระดาษ:

นึกถึง test อัตโนมัติตัวล่าสุดที่คุณเขียน (Selenium, Robot Framework หรือ tool ใดก็ได้) แล้วมัน flaky — รันครั้งแรกผ่าน รันซ้ำ fail ทั้งที่ code ไม่เปลี่ยน - ตอนนั้นคุณแก้ยังไง? ใส่ sleep() / time.sleep() / WebDriverWait เพิ่มไหม? - แล้วผลเป็นยังไง — test ช้าลง แต่ก็ยัง flaky อยู่ดีหรือเปล่า?

ทำไมต้องนึกเรื่องนี้ก่อน: ทั้งคอร์สต่อยอดจากความเจ็บปวดข้อนั้นโดยตรง Playwright ออกแบบมาเพื่อกำจัด sleep() ด้วยกลไก auto-waiting ที่รอ element แบบฉลาด (ไม่ใช่รอตายตัว) — จุดที่ Selenium/RF ทำได้ไม่ดี คุณจะเห็นตั้งแต่ Ch01 ว่าปัญหา flaky ที่เคยเจอ แก้ที่รากได้อย่างไร แทนที่จะไล่แปะ sleep() ไปเรื่อยๆ

🎯 ปลายทางของคอร์ส (จบแล้วคุณจะทำอะไรได้)

ถ้าอ่านครบ 20 บท + ทำ exercises ครบ คุณจะ สร้าง Playwright test suite ระดับ production ตั้งแต่ศูนย์ ได้ด้วยตัวเอง คือ: - วางโครงสร้างโปรเจกต์ (Page Objects + fixtures + helpers) ที่ทีมใช้ร่วมกันได้ (Ch07–08, 20) - เขียน test ที่ไม่ flaky ด้วย locator + web-first assertions (Ch04–05) - รันแบบ parallel/sharding บน CI พร้อม report + trace debugging (Ch11, 17) - mock network/time, จัดการ auth ด้วย storageState, verify ผ่าน API + database (Ch12–13, 15, 19)

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

4. Self-Assessment — ประเมินตัวเองก่อนเริ่ม

ลองตอบสั้นๆ (ไม่ต้องเป๊ะ แค่ให้รู้ว่าตัวเองอยู่ตรงไหน):

  1. อ่าน async function foo() { const x = await bar(); } แล้วอธิบายได้ไหมว่า await ทำอะไร?
  2. ให้ HTML <button class="btn primary" data-testid="save">บันทึก</button> — เขียน selector เลือกปุ่มนี้ได้กี่แบบ?

  3. เคยเขียน test ที่ต้อง "รอ" ให้หน้าโหลดเสร็จก่อน assert ไหม? ใช้วิธีอะไร?

  4. ตอบข้อ 1–2 ได้ → พร้อมเริ่ม Ch01 ได้เลย

  5. ติดข้อ 1 (async/await) → ทบทวน JavaScript async ก่อน (Ch02 เสริมให้ แต่ควรมีพื้นมาก่อน)
  6. ติดข้อ 2 (selector) → ไม่เป็นไร Ch04 สอน locator ตั้งแต่ต้น แค่รู้ว่าจะได้เจอเรื่องนี้

วิธี 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 นาที

📅 ตารางอ่านแนะนำ (เป็น guideline — ปรับตามความเร็วตัวเองได้)

คอร์สนี้ยาว อย่าอ่านรวดเดียว — การเว้นช่วง (spacing) ช่วยให้จำได้ดีกว่าการอัดทีเดียว แนะนำแบ่งเป็น session:

ระดับ series (ทั้งคอร์ส): - เร่ง (~2 สัปดาห์): วันละ 2–3 บท ทำ 3 วัน/สัปดาห์ - สมดุล (~5–6 สัปดาห์) — แนะนำ: 3–4 บท/สัปดาห์ แทรก exercises ระหว่างวัน - ลึก (~3 เดือน): โมดูลละ 1 เดือน — Ch01–08 (foundation) → Ch09–16 (core skills) → Ch17–20 (production)

ระดับบท (ต่อ 1 บท) — ใช้ spaced repetition: - วันที่ 1: อ่าน + พิมพ์ตามตัวอย่าง - ภายใน 2 วัน: ทำ exercises Recall + Application - หลัง ~1 สัปดาห์: กลับมาทบทวน + ทำ Synthesis (การเว้นช่วงตรงนี้คือหัวใจของการจำระยะยาว)

หมายเหตุ: ตัวเลขข้างบนเป็นแค่ไกด์ ถ้าบทไหนยากให้ช้าลงได้ — อย่าฝืนอ่านทั้งที่ยังงง เพราะ cognitive load เกินจะจำไม่ติด

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

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

1. อย่า Copy-Paste Code

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

2. ทำ Exercise ทุกบท

ทุกบท (Ch01–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