มาใช้ Playwright เขียน e2e testing กันเถอะ

Playwright คืออะไร

Playwright คือ e2e (end to end) testing framework ที่พัฒนาโดย Microsoft

หลายๆคนบอกว่า Playwright ยังถือว่าเป็น framework ที่ค่อนข้างใหม่มากๆ (first public release on Jan 2020) แต่ถ้าดูใน contributor page ของ playwright และ puppeteer จะพบว่า main contributor ของ puppeteer ย้ายมา contribute playwright กันหมดเลย

ซึ่งเป็นที่รับรู้โดยปกติใน community ของ Playwright ว่า Playwright ใช้ API เดียวกันกับ Puppeteer

Why not Selenium

Selenium เป็น e2e framework ที่ผ่านการทดสอบมาอย่างยาวนาน ผ่านการใช้งานอย่างโชกโชน และถึงแม้ว่าจะมีข้อดีมากมาย แต่ก็มีข้อจำกัดบางอย่างที่ทำให้ผมไม่อยากเอามาทำ POC และเลือกใช้งาน คือ

• การติดตั้งที่ซับซ้อน (เพราะต้องลง driver ของ browser)
• package ที่มีขนาดใหญ่
• เขียนและใช้งานยากเกินไป (สำหรับผม)
• ฯลฯ

Why not Cypress

ถึงแม้ว่าจะเป็น e2e framework ที่มาแรงมีจำนวนคนใช้งานเยอะ และมียอดการใช้งานที่เยอะกว่า Playwright มากๆ

แต่ Cypress ก็มีข้อจำกัดอยู่มากมาย ที่จะสร้างความลำบากให้ผมในการทำ e2e test ในระบบปัจจุบันที่ผมกำลังรับผิดชอบ ซึ่งเรื่องส่วนใหญ่จะเป็น feature ที่ Cypress ไม่มีแต่ Playwright สามารถทำได้ นั่นก็คือ

1. Thrid party login: Cypress ยอมให้รัน e2e script ได้บน domain เดียวเท่านั้น ซึ่งใน use case ที่ผมใช้จะต้องสามารถทำ login บน third party ได้ ~ นี่เป็นสาเหตุหลักในการปฏิเสธ Cypress เพราะผมไม่ต้องการที่จะเพิ่ม logic ที่ไม่เกี่ยวข้องกับการเทส จนเกินความจำเป็น

2. Multiple browser session: Cypress รันได้แค่ browser เดียว ซึ่งการทำเทสเคสในกรณีที่ต้องใช้ user หลายๆคน จะต้องเขียนในทำ log in / log out ก่อน ซึ่งจะส่งผลกระทบให้ระยะเวลาในการ execute นาน

3. Performance: ต่ำกว่า Playwright พอสมควร

4. Wait: การทำ wait นั้นยังอ่อนหัดกว่า Playwright มากๆ Cypress ทำได้แค่กำหนดเวลา และรอให้ element แสดง ส่วน Playwright มี function ทำ wait ที่ยืดหยุ่น(เพราะใช้ API ของ puppeteer ทั้งหมด) ไม่ว่าจะเป็นการ รอให้ page load เสร็จโดยดูจาก network, รอให้ element แสดง, รอ element หาย ฯลฯ

Playwright promising features

นอกเหนือจากเรื่องของ performance และการใช้งานที่แทบจะเหมือนกับ Puppeteer แล้ว สิ่งที่ทำให้ Playwright น่าสนใจว่า framework อื่นๆ คือ

1. Code generator

Playwright สามารถเปิด recording mode เพียงแค่รัน

yarn playwright codegen {url}

Playwright จะเปิด Chromium ตาม url ที่กำหนดใน command และ Playwright Inspector (หรือ IDE นั่นแหละ) ขึ้นมาบันทึกทุกการทำงานของเรา และแปลงเป็น e2e script ให้

Playwright code generator ช่วยให้เราเขียน e2e script ไวขึ้น เพราะไม่ต้องมาคอย inspect element ที่ต้องการ รวมทั้งจะได้ element ที่ Playwright มองเห็นจริงๆ

2. Debug mode

ถึงแม้ว่าจะมี code generator แต่ Playwright ก็ไม่ได้ฉลาดมากพอที่จะ capture ทุก element ที่เราต้องการ โดยเฉพาะ component ที่เราไม่ได้เขียนมาเพื่อรองรับการทำ e2e ที่จะทำให้ Playwright เลือก selector ที่คลุมเครือ 

ซึ่งอันที่จริง ก็เป็นเรื่องปกติของการทำ recording ของ e2e framework ทุกตัว และก็เป็นเรื่องปกติที่เราจะต้องมา revise และแก้ไขมันตลอด

แต่ใน debug mode Playwright จะเปิด IDE และเปิดไฟล์และ highlight บรรทัดที่กำลังรันอยู่ ที่จะทำให้เรารู้ว่ามันกำลังทำงานที่บรรทัดไหน

นอกเหนือจากนั้นเราสามารถหยุด โดยการกด pause ที่ IDE หรือกำหนด page.pause() ใน e2e script ของเราได้

debug mode จะช่วยให้เราสามารถแก้ไข e2e script ของเราได้ง่ายและไวขึ้น เพราะไม่จำเป็นต้องคอยรันหลายๆครั้งเพื่อดู error เราสามารถหยุด แล้วลองเล่นและ record การใช้งานเพื่อเอามาแก้ไขได้เลย

3. Trace viewer

ในกรณีที่รัน e2e ไม่ผ่าน สิ่งที่เราต้องการจะรู้คือ ทำไมมันถึงไม่ผ่าน มันเกิดปัญหาอะไร ซึ่งตามปกติ e2e framework ทั่วๆไปจะสามารถ capture screen shot หรือ record video ได้

แต่ Playwright มี feature ที่เทพกว่านั้น คือ Trace Viewer ซึ่งจะแสดง timeline ของการรัน คู่กับ script ในแต่ละ line เพื่อดูว่าปัญหาเกิดขึ้นที่ตรงไหนบ้าง

4. Authentication

นี่คือ feature ที่ตอบโจทย์ผมมากกที่สุด คือการที่สามารถทำ login แล้วเก็บ browser session เพื่อเอากลับมา reuse ได้ โดยที่ไม่ต้อง login ซ้ำอีกหลายๆครั้ง

การใช้งาน authentication ของ Playwright ถือว่าง่ายมากๆ เพราะเราสามารถเก็บ session ลง config และ reuse ได้ง่ายๆ โดยไม่ต้องเขียนโค้ดเพื่อดึง cache session เหมือน framework อื่นๆ ที่จะต้องเอา logic การทำ authentication ไปป่ะปนกับเทสเคส

และสิ่งที่เทพสุดๆของการทำ authentication คือ Playwright สามารถทำ login ได้หลาย session และสามารถเอามา reuse ในเทสเคส

การรัน e2e พร้อมกันหลายๆ​ session จะทำให้ลดระยะเวลาในการ execute เพราะไม่จำเป็นต้องเขียนให้ทำ log in / log out

บทสรุป

นี่เป็นเพียงแค่ความคิดเห็นส่วนตัวของผม ณ เวลานี้เท่านั้น โดยตาม use case และข้อจำกัดของระบบที่ผมดูแลในตอนนี้ Playwright เหมาะสมที่สุดในการเอามาทำ e2e testing เนื่องจากมีเครื่องมือที่ช่วยให้ผมเขียน e2e testing ได้ง่ายและรวดเร็ว

ผลลัพท์คือ สร้าง e2e ได้ไว ลด logic ที่ไม่เกี่ยวข้องกับการเทส และที่สำคัญที่สุดคือลด execution time ซึ่งจะช่วยประหยัดเวลาและประหยัดเงินในการรัน e2e ไปได้เยอะ

Ref

• why playwright
• playwright trace viwer
• playwright debug
• playwright codegen
• playwright auth
• multiple context scenario
• geekculture: Is Playwright better than Cypress? Playwright vs Cypress
• somkiat.cc: สรุปจากบทความเปรียบเทียบความเร็วของ Cypress vs Selenium vs Playwright vs Puppeteer
• npm compare between cypress and playwright