Playwright คือ

     Playwright เป็น Automation Test Tool ที่พัฒนาโดย Microsoft สามารถทดสอบได้ทั้ง Web Application และ API โดย Playwright จะจำลองการทำงานบนหน้าเว็บ การใส่ข้อมูล การกดปุ่ม การคลิ๊กต่างๆบนหน้าเว็บ เพื่อดูการตอบสนองว่าเป็นไปตามที่ต้องการหรือไม่ สามารถงานได้หลายเบราว์เซอร์ได้แก่ Google Chrome, Microsoft Edge, Mozilla Firefox และ Apple Safari อีกทั้งยังรองรับหลายภาษาเช่น JS, Python, Java, .NET, Go เป็นต้น

     Playwright เข้ามาแก้ปัญหาจาก Automated Tools หลายๆตัวที่พบว่า Run ช้า เพราะใช้วิธีการเชื่อมต่อจาก WebSocket Protocol แทนที่จะเชื่อมต่อแบบ HTTP Request การเชื่อมต่อแบบ WebSocket จะเชื่อมต่อตลอดจนกว่าการทดสอบจะเสร็จสิ้นซึ่งการเชื่อมต่อแบบนี้จะช่วยให้ลดความล้มเหลวจากโปรแกรมได้

Features ที่น่าสนใจ

• ไม่ต้องติดตั้ง Web-Driver สามารถ Run บน Browser ได้เลย เช่น Chrome, Microsoft Edge, Mozilla Firefox และ Apple Safari
• Mobile Emulation เป็นการจำลองว่าเรากำลังใช้อุปกรณ์อะไรเช่น iPhones, iPads เพื่อดูว่าโปรแกรมสามารถทำงานได้หรือไม่ในขนาดหน้าจอที่แตกต่างกัน
• Video Recording คือการบันทึก VDO สำหรับ Test ต่างๆที่ Run ซึ่งเราสามารถนำ VDO ที่ถูกบันทึกมา debug ดูการทำงานของ Test Scripts ได้
• Cross Browser Testing รองรับการทดสอบแบบหลาย Browser เช่น Chrome, Microsoft Edge, Firefox, Safari เพื่อสามารถโปรแกรมบนหลายๆ Browser ได้
• CI/CD Integration สามารถเชื่อมต่อ CI/CD เข้ากับ GitHub, Jenkins หรือ CircleCI ได้
• Visual Testing สามารถ screenshots เพื่อเปรียบเทียบสิ่งที่เปลี่ยนแปลงระหว่างตัว Test ที่สร้างกับบนหน้า Application
• Code Generation มีฟังก์ชันการสร้าง code ขึ้นมาจาก test case ที่สร้างบนโปรแกรม ซึ่งจะช่วยให้ลด error ต่างๆที่อาจเกิดขึ้นได้
• ไม่ต้องใช้ Wait Until Element เพราะการทำงานของ WebSocket จะจอจนกว่า Element นั้นแสดงขึ้นมาเอง

ติดตั้ง Playwright

1. ติดตั้ง VSCode

2. ติดตั้ง NodeJS 

3. ติดตั้ง Playwright โดยใช้คำสั่ง

npm init playwright@latest

เลือกภาษาที่ต้องการติดตั้ง

เมื่อติดตั้งเสร็จจะแสดงดังภาพ

CD เข้าในที่ Folder tests

ลอง Run ด้วยคำสั่ง

npx playwright test

หาก Run สำเสร็จจะแสดงดังรูป

หากต้องการ Run โดยแสดง UI ด้วยให้ใช้คำสั่ง

npx playwright test --ui

โปรแกรมจะเปิด Browser ขึ้นมาพร้อมแสดง step ต่างๆที่ Run

เริ่มเขียน Test Scripts โดยใช้ VSCode

ใช้ VSCode เปิด Project ของ playwright ที่ได้ติดตั้งลงไปจะแสดงไฟล์ต่างๆดังนี้

• node_modules เป็น Folder Directory ของ NodeJS ใช้เก็บ Library ที่จะเรียกใช้ ติดตั้งจากทำสั่ง npm 
• playwright-report หลังจาก Run Test Scripts เสร็จแล้ว Report จะถูกเก็บไว้ใน Folder นี้ในรูปแบบของ html file
• test-results เป็นผลลัพธ์จาก Test Resutls เช่นกันแต่อยู่ในรูปแบบของ xml เพื่อนำไปเชื่อมแต่ CI/C ได้ Screenshot ต่างๆก็ถูกเก็บไว้ที่นี้ด้วย
• tests คือ folder ที่เราจะใช้เก็บ Test Scripts ซึ่งจะมี script ตัวอย่างที่ติดมากับโปรแกรมเพื่อใช้ทดลอง Run ดูว่าโปรแกรมสามารถทำงานได้หรือไม่
• tests-examples เป็นไฟล์ตัวอย่างที่มีรายละเอียดของ test scripts วิธีการเขียนให้ดูเป็นตัวอย่าง
• playwright.config.js สำหรับ config ค่าเริ่มต้นต่างๆของโปรแกรมเช่น สามารถ Run แบบ parallel ได้หรือไม่ จะให้ capture screenshot เฉพาะผลที่ failed หรือเปล่า เป็นต้น

ตัวอย่าง Contact Form อย่างง่าย

เริ่มจากสร้างไฟล์ Test Script ขึ้นมาภายใต้ Folder tests

คำสั่งต่างๆจะอยู่ในรูปแบบ TypeScript เริ่มจากการเปิด Browser โดยใช้คำสั่ง

await page.goto('https://xxxx.com/contact-us-form/');

คำสั่งสำหรับการ Input ค่าต่างๆ

await page.locator('#fname').fill('Terry');

ตัว locator จะใช้เป็น # ตามด้วย id จากนั้น .fill เพื่อระบุข้อมูลที่ต้องการป้อนเข้าไป ส่วน expect คือตรวจสอบว่าค่าภายใน field ที่ป้อนเข้าไปนั้นเป็นค่าตรงกับที่ต้องการหรือไม่

await page.locator('#fname').fill('Terry');

เมื่อป้อนข้อมูลครบหมดแล้วก็ click ปุ่ม Submit

await page.click('button[type="submit"]');

จากนั้น Run เพื่อดูผลการทำงาน

Reference:

- https://www.checklyhq.com/learn/playwright/what-is-playwright/#further-reading