ตอนนี้ 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

Previous articlePlaywright ก็ทดสอบ API ได้นะ
Next articleลองใช้งาน JMeter ยิง Load Test