![Playwright ui mode stable version](https://i0.wp.com/www.qahive.com/wp-content/uploads/2024/04/Playwright-ui-mode-stable-version.png?resize=696%2C392&ssl=1)
ตอนนี้ UI Mode เปลี่ยนสถานะเป็น Stable เรียบร้อยแล้ว รอบนี้เลยขอมารีวิวฟีเจอร์เต็มๆกันอีกซักรอบ โดยเราสามารถเปิด UI Mode เพียงรันคำสั่ง
npx playwright test --ui
Run Test
ฟีเจอร์พื้นฐานในการรันเทสของเรา ที่มาพร้อมกับ option search และ filter รวมถึงรองรับ Tag โดยเราสามารถแสดงและ filter test ที่ต้องการจาก Tag ที่เรากำหนดไว้
![](https://i0.wp.com/www.qahive.com/wp-content/uploads/2024/04/UI-Mode-Tag-1.png?resize=600%2C333&ssl=1)
เพียงแค่เพิ่ม Tag ใน test case ที่ต้องการเช่น @E2E หลังจากนั้น UI Mode ก็จะแสดง Tag ในรายการ Test case ให้อัตโนมัติ
![](https://i0.wp.com/www.qahive.com/wp-content/uploads/2024/04/Tag-code-playwright.png?resize=600%2C237&ssl=1)
Timeline View
มุมมองการแสดงผลการรัน แบบ Timeline ช่วยให้เราสามารถตราวจสอบการรันเทส ตามช่วงเวลาต่างๆ ช่วยให้เราเทียบการทำงานของ Web Application กับ Test script ได้ง่ายขึ้น เมื่อเกิดปัญหาต่างๆขึ้นมานั่นเอง
![](https://i0.wp.com/www.qahive.com/wp-content/uploads/2024/04/Playwright-Timeline-View.png?resize=600%2C278&ssl=1)
Action / Before / After Tab
Tab Action จะแสดง Locator ที่ Playwright ทำการส่งคำสั่ง เช่น Click Button ก็จะแสดงไฮไลท์ปุ่มที่จะกดนั่นเอง
![](https://i0.wp.com/www.qahive.com/wp-content/uploads/2024/04/Action-Input.png?resize=600%2C298&ssl=1)
Tab Before จะแสดงหน้าเว็บก่อนที่จะทำการรันคำสั่ง และ Tab After จะแสดงหน้าเว็บหลังจากที่ส่งคำสั่งไปแล้ว
![](https://i0.wp.com/www.qahive.com/wp-content/uploads/2024/04/New-Project.jpg?resize=600%2C241&ssl=1)
Locators
เราสามารถ inspect หรือหา Locator ในแต่ละ Step ได้เลยหลังจากที่เรารันเทสเสร็จไปแล้ว เพียงแค่กดที่สัญลักณ์ @ ด้านล่างซ้าย ข้างๆคำว่า Locator แล้วเราจะสามารถดู Suggest locator เพียงแค่ไปคลิกที่ element ต่างๆ ใน tab Action ได้เลย
![](https://i0.wp.com/www.qahive.com/wp-content/uploads/2024/04/Playwright-Locator.png?resize=600%2C267&ssl=1)
อีกทั้งถ้าเราเปิด Developer Inspector mode เพื่อทำการตรวจสอบ locator กับ live code ได้อีกด้วย
Source
ในแต่ละ Test step ที่เรารัน เราสามารถกดที่ Tab Source ด้านล่าง เพื่อดูว่า Test log นั้นมาจาก Test script line ไหนของเรานั่นเอง
![](https://i0.wp.com/www.qahive.com/wp-content/uploads/2024/04/Code-Source.png?resize=600%2C221&ssl=1)
สนใจเรียนรู้แบบเจาะลึก
![](https://i0.wp.com/www.qahive.com/wp-content/uploads/2022/07/course-playwright-e2e-cover.jpg?w=696&ssl=1)
Playwright Web Automated Test
เรียนรู้การทดสอบ Web Application ด้วย
Playwright และ TypeScript