มาลองเล่น Playwright End-to-End test จาก Microsoft กัน

ในยุคนี้คงไม่มีใครไม่รู้จัก Cypress test framework ที่มาแรงมากๆ ที่เลือกใช้งานภาษายอดนิยมอย่าง JavaScript และมี eco system ที่ทรงพลัง มีเวอร์ชั่นฟรี และพรีเมี่ยม ให้ผู้ใช้เลือกใช้ตามสะดวก แต่วันนี้ผมอยากมาแนะนำ Test Library น้องใหม่มาแรงแซงทุกเจ้าอย่าง Playwright จาก Microsoft ซึ่งตอนนี้จะเห็นว่าระดับความนิยมของ Playwright นั้นพุ่งสูงมากจนเทียบกับ library รุ่นพี่อย่าง Cypress เรียบร้อยแล้ว

Ecosystem และ Community

ปฏิเสธไม่ได้เลยว่า Microsoft เป็นบริษัทที่เป็นเจ้าแห่ง Opensource โดยหลังจากที่ Microsoft ซื้อ GitHub ไป ก็มีนโยบายในการเปิด Opensource software ออกมาไม่หยุด และเป็นบริษัทยักษ์ใหญ่ที่มีโครงการ Opensource มากที่สุดไปแล้ว โดย Playwright เองก็เป็นหนึ่งใน Opensource project จากทาง Microsoft เช่นกัน ทำให้เรามี community นักพัฒนาที่สุดแกร่ง มากฝีมือ และขนาดใหญ่มากตั้งแต่เริ่มๆโครงการเลยทีเดียว ใครสนใจสามารถเข้าไปคุยใน official community ทาง Slack ได้เลย

100% Opensource

โค้ดทั้งหมดใน Project ของ Playwright เป็น opensource ทั้งหมด ไม่มีการแยกเวอร์ชั่น ฟรี หรือพรีเมี่ยม ทำให้เราได้ใช้ฟีเจอร์ต่างๆไม่ว่าจะเป็น Parallel execution, Flaky detection หรือ Trace viewer โดยไม่มีข้อจำกัดใด
ใครสนใจว่า Source code โปรเจคมีโครงสร้างเป็นยังไงลองเข้าไปดูได้ที่ GitHub Playwright

รองรับหลากหลายภาษา

ไม่ใช่แค่หนึ่ง หรือสอง แต่ Playwright รองรับถึง 4 ภาษายอดนิยม

• JavaScript และTypeScript
• Python
• Java
• .NET

สำหรับ TypeScript เองก็ถูกเขียนแบบ Asynchronous เป็นหลักทำให้ตัว script ลดความซับซ้อนในการเขียนแบบ Synchronous แบบยุคเก่าๆไปได้มากครับ โดยทุกภาษาที่รองรับ ก็เป็นแบบ Official Support จากทาง Community ของผู้พัฒนาทั้งหมด ทำให้เราไว้ใจได้ว่าจะมีคนคอยดูแล ไม่ถูกดองแน่นอน

ซึ่งความยากง่านในการเขียน Test Script ด้วย Playwright ผมจัดให้อยู่ในระดับที่ปานกลาง ไม่ได้ง่ายขนาด Robot Framework
QA ต้องพื้นฐานเขียนโค้ดอยู่บ้าง เข้าใจ Concept OOP และ syntax ของ TypeScript ในระดับพื้นฐาน ก็สามารถใช้งานได้ไม่ยากแล้วครับ

แก้ปัญหา Flaky Test อย่างเหนือชั้น

Playwright ถูกสร้างมาโดยคำนึงถึง No flaky tests เป็นหลัก ทำให้มีการออกแบบการทำงานที่ช่วยให้ลด flaky test แบบอัตโนมัติมากมายเช่น

• Auto-wait ที่จะช่วยให้เราไม่ต้อง Wait ก่อนทำ Action ต่างๆอีกต่อไป ถ้าใครใช้งาน Selenium มาก่อน จะคุ้นเคยกับ Wait for element กันดี แต่ถ้าคุณใช้ Playwright คุณแทบไม่ต้องใช้เลยเพราะ Playwright จัดการให้อัตโนมัตินั่นเอง

• Tracing สามารถเก็บ log แบบ รูปภาพ วิดีโอ ภาพหน้าจอไปจนถึง network แบบอัตโนมัติ

• Html Report ที่ช่วยระบุ flaky test ให้เราแบบอัตโนมัติครับ

รองรับ Browser ยอดนิยม และ Real Mobile Device

• Chromium
• Firefox
• Webkit (ซึ่งเป็น browser พื้นฐานของ Apple Safari)
• Chrome
• Edge

ตอนนี้ Android web view อยู่ในสถานะทดสอบแล้ว

ฟีเจอร์ที่ครบครัน

• รองรับ Multiple Browser สามารถเทสแบบหลายๆ Domain พร้อมกันได้
• รองรับ Multiple Tabs
• iframe และ Shadow DOM
• Network Event และ Mock
• รวมไปถึง
• Locator Strategy ที่ให้มาทุกแบบ ตั้งแต่ id, css, xpath ไปจนถึง chain และ data-test-id

Execution Time

ปัจจัยสำคัญมากๆอีกอย่างหนึ่งคือเวลาการรันเทส ซึ่ง Playwright เอง ก็ทำออกมาได้น่าประทับใจมากๆ

จากรูปจะเห็นว่า Playwright ใช้เวลาโดยเฉลี่ยประมาณ 3.19 วินาทีเท่านั้นในเการทดสอบ จากทางเว็บไซท์ Checklyhq ซึ่งเร็วเป็นอันดับสอง เป็นรองเพียงแค่ Puppeteer เท่านั้น

หวังว่าเพื่อนๆที่ต้องเทส Web App จะถูกใจกันนะ เพราะจากที่ผู้เขียนใช้งานมา 2 โปรเจค ยังหาข้อติไม่ได้
ยกเว้นที่ QA ในทีมต้องเขียนโปรแกรมได้ระดับนึงครับ