Automated Testing with Playwright

คอร์สนี้สอนการสร้าง automated test suite ที่ทีมเชื่อถือได้ด้วย Playwright และ TypeScript ตั้งแต่การเลือกว่าจะทดสอบอะไร ไปจนถึงการรันหลาย browser บน CI และอ่าน trace เพื่อหาต้นเหตุ เป้าหมายไม่ใช่สร้าง test จำนวนมากที่สุด แต่คือสร้าง evidence ที่ตรงกับ risk รันซ้ำได้ อ่านแล้วเข้าใจ behavior ของระบบ และบอกได้ว่า failure เกิดจาก product, test, data หรือ environment

Version baseline

เนื้อหาและตัวอย่างอ้างอิง Playwright 1.62.1 ซึ่งเป็น stable ล่าสุดที่ตรวจสอบ ณ วันที่ 10 สิงหาคม 2026 และเผยแพร่เมื่อ 30 กรกฎาคม 2026 API เปลี่ยนได้ตาม release จึงควร pin version ใน lockfile อ่าน release notes เมื่อ upgrade และให้ CI ติดตั้ง browser binaries จาก Playwright version เดียวกับ package เสมอ

ระบบตัวอย่างของคอร์ส

เราจะใช้ Workshop Hub ระบบจองกิจกรรมทางเทคนิคที่สมมติขึ้นตลอดคอร์ส โดยมี behavior หลักดังนี้:

Organizer สร้าง workshop กำหนดเวลา capacity และเปิดรับจอง
Learner ค้นหา workshop จอง 1 ที่นั่ง ดูรายการของตน และยกเลิกได้
Admin ดู waitlist และปิดรอบที่มีเหตุขัดข้องได้
REST API มี success/error contract, authentication และ role-based authorization
ระบบส่ง reminder ผ่าน notification service ซึ่งเราจะควบคุมที่ network boundary ใน test

โดเมนนี้ตั้งใจให้มีทั้ง form, dialog, table, date/time, file upload, API setup, authorization, concurrency และ asynchronous feedback โดยไม่มี dependency จริงที่ต้องสมัครบัญชีภายนอก ชื่อ endpoint, payload และ UI copy เป็น course convention เพื่อฝึกเทคนิค ไม่ใช่มาตรฐานของระบบจองทุกแห่ง

เหมาะกับใคร

Developer หรือ QA Engineer ที่เขียน TypeScript พื้นฐานได้
ทีมที่มี browser tests อยู่แล้วแต่เจอ flaky test, selector แตกง่าย หรือ report แกะยาก
ผู้ที่ต้องการใช้ Playwright ทดสอบทั้ง UI และ HTTP API ใน architecture เดียวกัน
Tech lead ที่ต้องกำหนด test conventions, CI policy และ review checklist

ควรรู้ async/await, HTTP status code, DOM/ARIA พื้นฐาน และคำสั่ง Git/Node.js ก่อนเริ่ม ไม่จำเป็นต้องเคยใช้ Selenium, Cypress หรือ Playwright มาก่อน

สิ่งที่จะสร้าง

เมื่อจบคอร์ส คุณจะมี mental model และตัวอย่างสำหรับ:

กำหนด risk-based test strategy และเลือกระหว่าง unit, integration, API กับ browser test
เปรียบเทียบ Pyramid, Trophy, Honeycomb และ Testing Quadrants โดยไม่ใช้เป็นสูตรตายตัว
derive test cases ด้วย partitions, boundaries, decision tables, state transitions และ exploration
ตั้งค่า Playwright projects สำหรับ Chromium, Firefox, WebKit และ device profiles
ใช้ role/label/test id locators, auto-waiting และ web-first assertions
แยก fixtures, page objects, API clients, schemas และ test-data builders ตาม responsibility
reuse authentication โดยไม่ commit credential state และพิสูจน์ authorization จริง
ควบคุม network, clock, downloads, uploads และ dependency failures อย่าง deterministic
ทดสอบ accessibility และ visual regression โดยไม่อ้างเกินสิ่งที่เครื่องมือตรวจได้
วิเคราะห์ trace/report, redact artifact และ scale suite ด้วย parallelism กับ sharding

โครงสร้างการเรียน

Part 1 — Foundations เริ่มจาก testing objectives/principles, strategy models, test design techniques, risk-based automation, installation, projects และ locator mental model เพื่อกันไม่ให้เราเริ่มจาก tool หรือใช้ browser แก้ทุกปัญหา

Part 2 — Test Architecture จัด test, fixture, page object, test data และ authentication ให้แต่ละ test เป็นเจ้าของ state ของตนเองและอ่านเหมือน behavior specification

Part 3 — UI and API Capabilities ลงมือกับ UI workflow, API contracts, network control, accessibility, screenshot assertions และ emulation

Part 4 — Reliability and Operations จัดการเวลา, parallelism, flakiness, trace, reports และ CI ซึ่งเป็นจุดที่ proof-of-concept กลายเป็น suite ที่ทีมใช้ทุกวัน

Part 5 — Capstone รวมทุกอย่างเป็น test plan และโครงไฟล์สำหรับ Workshop Hub พร้อมเกณฑ์ส่งมอบ

หลักที่ใช้ตลอดคอร์ส

Test observable behavior ไม่ผูกกับ implementation detail โดยไม่จำเป็น
ใช้ semantic locator ก่อน test id และไม่ใช้ CSS/XPath เป็น selector หลัก
รอด้วย locator/assertion หรือ event ที่อธิบายได้ ไม่ใช้เวลาคงที่กลบ race
Test แต่ละรายการสร้าง data ที่ต้องใช้เองและไม่พึ่งลำดับ execution
Retry เป็นสัญญาณสำหรับวิเคราะห์ ไม่ใช่ใบอนุญาตให้ปล่อย flaky test
Artifact ต้องช่วย debug แต่ต้องไม่เก็บ token, cookie, password หรือข้อมูลส่วนบุคคลเกินจำเป็น
API error test ตรวจ status, machine-readable code, shape และการไม่รั่ว internal detail
ทุก assertion ต้องตอบได้ว่า “failure นี้บอกอะไรเกี่ยวกับระบบ”

คำแนะนำในคอร์สแยกเป็น 3 ระดับ: official behavior คือสิ่งที่ Playwright รับรอง, best practice คือแนวทางจากเอกสารเจ้าของเครื่องมือ และ course convention คือการเลือกของคอร์ส เช่น folder layout, test ID, builder และโครง page object ซึ่งทีมปรับได้ตามบริบท

Test environment ก็มีข้อมูลสำคัญ

storageState, trace, screenshot, video, request/response attachment และ environment file อาจมี session cookie, token หรือข้อมูลผู้ใช้ ห้าม commit artifact เหล่านี้ ใช้บัญชีทดสอบสิทธิ์ต่ำ redact ก่อนแนบ report และกำหนด retention/access owner ของ CI artifact ให้ชัด

แหล่งอ้างอิงหลัก

เนื้อหาเทคนิคยึด Playwright documentation, Playwright API reference, Playwright release notes และ WAI-ARIA Authoring Practices เป็นหลัก ลิงก์ในแต่ละบทชี้ไปยัง เอกสารเจ้าของมาตรฐานหรือเครื่องมือโดยตรง เพื่อให้ตรวจ version และขอบเขตของ claim ได้

เส้นทางการเรียน

Part 1 — Foundations

Part 2 — Test Architecture

Part 3 — UI and API Capabilities

Part 4 — Reliability and Operations

Part 5 — Capstone

Automated Testing with Playwright#

ระบบตัวอย่างของคอร์ส#

เหมาะกับใคร#

สิ่งที่จะสร้าง#

โครงสร้างการเรียน#

หลักที่ใช้ตลอดคอร์ส#

แหล่งอ้างอิงหลัก#