ตอนนี้ UI Mode เปลี่ยนสถานะเป็น Stable เรียบร้อยแล้ว รอบนี้เลยขอมารีวิวฟีเจอร์เต็มๆกันอีกซักรอบ โดยเราสามารถเปิด UI Mode เพียงรันคำสั่ง
npx playwright test --ui
Run Test
ฟีเจอร์พื้นฐานในการรันเทสของเรา ที่มาพร้อมกับ option search และ filter รวมถึงรองรับ Tag โดยเราสามารถแสดงและ filter test ที่ต้องการจาก Tag ที่เรากำหนดไว้
เพียงแค่เพิ่ม Tag ใน test case ที่ต้องการเช่น @E2E หลังจากนั้น UI Mode ก็จะแสดง Tag ในรายการ Test case ให้อัตโนมัติ
Timeline View
มุมมองการแสดงผลการรัน แบบ Timeline ช่วยให้เราสามารถตราวจสอบการรันเทส ตามช่วงเวลาต่างๆ ช่วยให้เราเทียบการทำงานของ Web Application กับ Test script ได้ง่ายขึ้น เมื่อเกิดปัญหาต่างๆขึ้นมานั่นเอง
Action / Before / After Tab
Tab Action จะแสดง Locator ที่ Playwright ทำการส่งคำสั่ง เช่น Click Button ก็จะแสดงไฮไลท์ปุ่มที่จะกดนั่นเอง
Tab Before จะแสดงหน้าเว็บก่อนที่จะทำการรันคำสั่ง และ Tab After จะแสดงหน้าเว็บหลังจากที่ส่งคำสั่งไปแล้ว
Locators
เราสามารถ inspect หรือหา Locator ในแต่ละ Step ได้เลยหลังจากที่เรารันเทสเสร็จไปแล้ว เพียงแค่กดที่สัญลักณ์ @ ด้านล่างซ้าย ข้างๆคำว่า Locator แล้วเราจะสามารถดู Suggest locator เพียงแค่ไปคลิกที่ element ต่างๆ ใน tab Action ได้เลย
อีกทั้งถ้าเราเปิด Developer Inspector mode เพื่อทำการตรวจสอบ locator กับ live code ได้อีกด้วย
Source
ในแต่ละ Test step ที่เรารัน เราสามารถกดที่ Tab Source ด้านล่าง เพื่อดูว่า Test log นั้นมาจาก Test script line ไหนของเรานั่นเอง
สนใจเรียนรู้แบบเจาะลึก
Playwright Web Automated Test
เรียนรู้การทดสอบ Web Application ด้วย
Playwright และ TypeScript