Playwright 1.56 มาพร้อมกับเอเจนต์ AI ในตัวสามตัวที่สามารถวางแผนชุดการทดสอบ (test suite), เขียนสคริปต์ TypeScript ที่เกี่ยวข้อง และซ่อมแซม locator ที่เสียได้ทันที ผลลัพธ์ที่ได้คือ งานทดสอบแบบแมนนวลที่ซ้ำซากจะกลายเป็นเวิร์กโฟลว์ที่ได้รับการสนับสนุนจาก AI
ทำไมการเปลี่ยนแปลงนี้ถึงสำคัญ
วิศวกรด้าน Automation ต้องเผชิญกับวงจรที่ซ้ำซากมานาน: แปลงความต้องการ (requirements) ให้เป็นกรณีทดสอบ (test cases), เขียนสคริปต์ด้วยมือ, รันการทดสอบ, แล้วต้องคอยไล่ตาม selector ที่ไม่เสถียร (flaky selectors) ทุกครั้งที่ UI มีการเปลี่ยนแปลง ภาระในการบำรุงรักษาอาจมากกว่าเวลาที่ประหยัดได้จากการทำ automation เสียอีก โดยเฉพาะในส่วนหน้า (front-end) ที่มีการเปลี่ยนแปลงอย่างรวดเร็ว การฝังเอเจนต์ AI ลงในเฟรมเวิร์กการทดสอบโดยตรงจะช่วยลดวงจร "แก้ไขแล้วรันใหม่" (fix-and-run) และช่วยให้วิศวกรสามารถมุ่งเน้นไปที่กลยุทธ์การทดสอบระดับสูงแทนที่จะต้องมานั่งไล่หา selector
อธิบายการทำงานของเอเจนต์ทั้งสาม
- Planner Agent – รับคำอธิบายด้วยภาษาธรรมชาติ (natural-language description) เกี่ยวกับสิ่งที่แอปพลิเคชันควรทำ, สำรวจไซต์ที่ใช้งานจริง และแสดงผลเป็นแผนงานในรูปแบบ Markdown ที่มีโครงสร้างชัดเจน แผนนี้จะระบุ user flows หลักและกรณีขอบเขต (edge-case scenarios) เพื่อเป็นพิมพ์เขียวที่ชัดเจนก่อนที่จะเริ่มเขียนโค้ดใดๆ
- Generator Agent – นำแผน Markdown มาใช้เพื่อสร้างโค้ดทดสอบ TypeScript ที่สามารถรันได้ มันจะสื่อสารกับเบราว์เซอร์ที่กำลังทำงานอยู่เพื่อตรวจสอบว่า selector มีความเสถียร และสามารถทำตามรูปแบบ Page Object Model (รูปแบบการออกแบบที่แยกโครงสร้างหน้าเว็บออกจากตรรกะการทดสอบ) ได้หากได้รับคำสั่ง
- Healer Agent – ตรวจสอบการรันการทดสอบ เมื่อพบว่าความล้มเหลวเกิดจากการเปลี่ยนแปลงของ UI มันจะทำการรันขั้นตอนที่ล้มเหลวซ้ำ ตรวจสอบ DOM ที่อัปเดตแล้ว และเสนอ selector หรือ locator ที่ถูกต้อง โดยคำแนะนำจะปรากฏเป็นร่างการแก้ไข (draft patch) ที่นักพัฒนาสามารถยอมรับหรือปรับแต่งได้
เอเจนต์เหล่านี้ทำงานในรูปแบบ “agentic loop”: Planner → Generator → Healer โดยแต่ละขั้นตอนจะส่งต่อข้อมูลไปยังขั้นตอนถัดไป สร้างเป็นไปป์ไลน์ที่ปรับแต่งตัวเองได้ (self-adjusting pipeline) เพื่อให้สอดคล้องกับแอปพลิเคชันที่กำลังทดสอบอยู่เสมอ
แตกต่างจากเครื่องมือ AI ทั่วไปอย่างไร
โมเดลรูปแบบแชทหรือส่วนขยายช่วยเติมโค้ด (code-completion extensions) อาจสร้างโค้ดเป็นส่วนๆ ได้ แต่พวกมันขาดการเข้าถึง DOM ที่ใช้งานจริงโดยตรงและขาดการเข้าถึงการตั้งค่าเฉพาะของโปรเจกต์ เอเจนต์ของ Playwright ใช้ Model Context Protocol ที่ทำการสตรีมโครงสร้างหน้าปัจจุบันและการตั้งค่าของเฟรมเวิร์กการทดสอบเข้าไปยังโมเดล ช่วยให้ AI สามารถใช้เหตุผลเกี่ยวกับองค์ประกอบ (elements) ที่มันจะโต้ตอบด้วยได้อย่างแม่นยำ โค้ดที่สร้างขึ้นจึงไม่เพียงแต่ถูกต้องตามไวยากรณ์ (syntactically correct) เท่านั้น แต่ยังยึดโยงกับ UI จริง ณ ขณะที่สร้างโค้ดอีกด้วย
เริ่มต้นใช้งานด้วยไม่กี่คำสั่ง
- ตั้งค่าโปรเจกต์ Node และเพิ่ม Playwright เป็น dependency
- รัน
npx playwright init-agents --loop=vscodeเพื่อเริ่มต้นการทำงานของ AI loop ภายใน editor ของคุณ - เขียนการทดสอบ "seed" ขั้นพื้นฐานเพื่อโหลดแอปพลิเคชัน ซึ่งจะช่วยให้เอเจนต์มีบริบท (context) ที่ชัดเจน
- ใช้คำสั่งด้วยภาษาธรรมชาติ (เช่น “Create a checkout flow covering discount codes”) เพื่อกระตุ้นการทำงานของ Planner, ให้ Generator สร้างสคริปต์ และให้ Healer คอยดูแลความถูกต้อง
เคล็ดลับที่ช่วยให้เอเจนต์ทำงานได้ดีขึ้น
- การทดสอบ seed ที่ชัดเจน – การทดสอบเริ่มต้นควรสามารถเปิดแอปพลิเคชันและแสดงองค์ประกอบ UI หลักได้อย่างน่าเชื่อถือ จุดเริ่มต้นที่คลุมเครือจะทำให้ Planner สับสน
- ข้อมูล seed ที่มีโครงสร้าง – การจัดเตรียม JSON fixtures ที่อธิบายอินพุตที่คาดหวังจะช่วยให้ Generator เลือก selector ที่เหมาะสมได้
- สั่งให้ใช้ Page Object Model – การสั่งให้ Generator สร้างโครงสร้าง page objects อย่างชัดเจนจะช่วยให้ได้โค้ดที่สะอาดและบำรุงรักษาง่ายขึ้น
- มองผลลัพธ์จาก AI เป็นเพียงร่าง – ควรตรวจสอบสคริปต์ที่สร้างขึ้นก่อนทำการ commit เนื่องจากเอเจนต์อาจยังพลาดรายละเอียดปลีกย่อยของ business logic หรือสร้าง selector ที่กว้างเกินไป