Playwright ทดสอบเว็บอัตโนมัติแบบ End-to-End

รายละเอียดหลักสูตร

อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง รูปแบบบรรยายพร้อมปฏิบัติจริงทุกหัวข้อ (Hands-on Lab) ระดับ Beginner ถึง Intermediate สถาบันเตรียมเว็บตัวอย่างที่มีฟอร์ม ระบบล็อกอิน การอัปโหลดไฟล์ และตารางข้อมูล ให้ผู้เรียนได้ฝึกครบทุกสถานการณ์ ผู้เรียนจะได้ Lab Guide, โค้ดชุดทดสอบตัวอย่างครบทุก Lab และไฟล์ตั้งค่า CI กลับไปใช้งานจริง Playwright เป็นโอเพนซอร์สที่นำไปใช้ในองค์กรได้โดยไม่มีค่าลิขสิทธิ์

Day 1: พื้นฐาน Playwright และการเขียนเทสต์

Section 1: แนวคิดการทดสอบอัตโนมัติ

• ปัญหาของการทดสอบด้วยมือและต้นทุนที่มองไม่เห็นเมื่อระบบใหญ่ขึ้น
• ระดับของการทดสอบ: Unit, Integration และ End-to-End และหน้าที่ของแต่ละระดับ
• การเลือกว่าอะไรควรทดสอบอัตโนมัติและอะไรควรทดสอบด้วยคน
• จุดเด่นของ Playwright เทียบกับเครื่องมือทดสอบรุ่นก่อนหน้า

Section 2: การติดตั้งและโครงสร้างโปรเจกต์

• การติดตั้ง Playwright และเบราว์เซอร์ทั้งสามตัวในคำสั่งเดียว
• โครงสร้างโปรเจกต์ทดสอบและไฟล์ตั้งค่าหลักที่ต้องรู้จัก
• การรันเทสต์ในโหมดต่าง ๆ: แบบเห็นเบราว์เซอร์ แบบเบื้องหลัง และแบบ UI Mode
• Lab: ติดตั้ง Playwright และรันเทสต์ตัวอย่างให้ผ่านครบทุกเบราว์เซอร์

Section 3: การเขียนเทสต์และ Assertion

• โครงสร้างของไฟล์เทสต์และการจัดกลุ่มเทสต์ให้อ่านเข้าใจ
• การสั่งงานเบราว์เซอร์: เปิดหน้า คลิก พิมพ์ เลือก และเลื่อนหน้าจอ
• การเขียน Assertion ตรวจสอบข้อความ สถานะ และองค์ประกอบบนหน้า
• Lab: เขียนเทสต์แรกตรวจสอบการทำงานของหน้าเว็บตัวอย่างตั้งแต่ต้นจนจบ

Section 4: Locator และการเลือกองค์ประกอบ

• หลักการเลือกองค์ประกอบให้ทนต่อการเปลี่ยนหน้าจอในอนาคต
• การเลือกด้วยข้อความ บทบาท และป้ายกำกับ แทนการอิงโครงสร้าง HTML
• การจัดการรายการซ้ำ ตาราง และองค์ประกอบซ้อนกันหลายชั้น
• Lab: ปรับ Locator ในเทสต์เดิมให้ไม่พังเมื่อโครงสร้างหน้าเปลี่ยน

Section 5: การรอและปัญหาเทสต์ล้มแบบสุ่ม

• กลไกการรออัตโนมัติของ Playwright และเหตุผลที่ไม่ควรหน่วงเวลาเอง
• การรอเงื่อนไขเฉพาะ เช่น การโหลดข้อมูล การเปลี่ยนหน้า และการเรียก API
• สาเหตุที่ทำให้เทสต์ล้มบ้างผ่านบ้าง และวิธีไล่หาต้นเหตุอย่างเป็นระบบ
• Lab: แก้เทสต์ที่ล้มไม่แน่นอนให้ผ่านอย่างเสถียรทุกครั้ง

Day 2: การจัดโครงสร้าง API และ CI/CD

Section 6: ฟอร์ม ไฟล์ และการล็อกอิน

• การกรอกฟอร์มทุกรูปแบบ ทั้งช่องข้อความ ตัวเลือก และปฏิทิน
• การอัปโหลดและดาวน์โหลดไฟล์ และการตรวจสอบผลลัพธ์
• การเก็บสถานะการล็อกอินไว้ใช้ซ้ำเพื่อไม่ต้องล็อกอินใหม่ทุกเทสต์
• Lab: เขียนเทสต์ที่ล็อกอินหนึ่งครั้งแล้วใช้สถานะเดิมกับเทสต์ที่เหลือ

Section 7: Page Object และการจัดระเบียบโค้ด

• แนวคิด Page Object และการแยกรายละเอียดหน้าจอออกจากตรรกะการทดสอบ
• การใช้ Fixture เพื่อเตรียมสภาพแวดล้อมและข้อมูลก่อนรันเทสต์
• การแยกข้อมูลทดสอบออกจากโค้ดเพื่อรันเทสต์เดิมกับหลายชุดข้อมูล
• Lab: แปลงชุดเทสต์ที่เขียนไว้ให้เป็น Page Object ที่ดูแลง่าย

Section 8: การทดสอบ API ร่วมกับหน้าจอ

• การเรียก API โดยตรงจาก Playwright เพื่อเตรียมข้อมูลก่อนทดสอบหน้าจอ
• การตรวจสอบผลลัพธ์ฝั่งหลังบ้านหลังจากทำงานผ่านหน้าจอ
• การดักและจำลองการตอบกลับของ API เพื่อทดสอบกรณีที่สร้างยาก
• Lab: เขียนเทสต์ที่เตรียมข้อมูลผ่าน API แล้วตรวจผลลัพธ์บนหน้าจอ

Section 9: รายงานผลและการไล่หาสาเหตุ

• การอ่านรายงานผลการทดสอบและการดูว่าเทสต์ล้มที่ขั้นตอนใด
• การเก็บภาพหน้าจอ วิดีโอ และ Trace อัตโนมัติเมื่อเทสต์ล้มเหลว
• การใช้ Trace Viewer ย้อนดูทุกขั้นตอนของเทสต์ที่ล้ม
• การใช้ Codegen ช่วยร่างเทสต์และข้อควรระวังในการนำโค้ดไปใช้ต่อ

Section 10: การรันบน CI/CD

• การรันชุดทดสอบอัตโนมัติทุกครั้งที่มีการแก้โค้ดหรือเปิด Pull Request
• การรันเทสต์แบบขนานให้เร็วขึ้นและการแบ่งงานระหว่างเครื่อง
• การจัดการข้อมูลลับและค่าตั้งต้นระหว่างสภาพแวดล้อม Dev และ Staging
• Lab: ตั้งค่าให้ชุดทดสอบรันอัตโนมัติบน CI พร้อมเก็บรายงานผล

Section 11: Capstone และการนำไปใช้จริง

• โจทย์: สร้างชุดทดสอบครอบคลุมเส้นทางสำคัญของเว็บหนึ่งระบบตั้งแต่ต้นจนจบ
• การเลือกว่าเส้นทางใดคุ้มค่าที่จะทดสอบอัตโนมัติก่อน
• แนวทางดูแลชุดทดสอบไม่ให้กลายเป็นภาระของทีมในระยะยาว
• Workshop: นำเสนอชุดทดสอบที่สร้างและทบทวนโครงสร้างร่วมกัน