สวัสดี Playwright 1.39 !!

มา share ความรู้เรื่องการทดสอบระบบงานด้วย Playwright
แล้ว Playwright 1.39 ก็ปล่อยออกมาพอดี
เลยได้นำความสามารถใหม่ ๆ มาใช้งานด้วย
จึงทำการสรุปคร่าว ๆ ไว้นิดหน่อยดังนี้

เรื่องแรกที่ชอบคือ Box test step หรือ boxing ใน test.step

จะช่วยในการแจ้ง error ใน test report
เพราะว่าปกติเมื่อมีขั้นตอนไหนใน code มีปัญหา หรือ failure ขึ้นมา
จะแจ้งในบรรทัดนั้น ๆ
ทำให้ดูได้ยากว่า มีปัญหาตรง step ไหน (ถ้าเราใช้งาน test.step)
ดังนั้นถ้าต้องการให้แจ้งใน report เลยว่า failure ตรง test.step ไหน
ก็สามารถเพิ่ม config ว่า boxing: true ได้เลย

[gist id="6e610ff26af6c82afa66ca690d31c68a" file="1.ts"]

เรื่องที่สอง สามารถทำการ custom matcher ได้เลย ทำให้สะดวกมากยิ่งขึ้น

[gist id="6e610ff26af6c82afa66ca690d31c68a" file="2.ts"]

เรื่องที่สาม ใครมี fixture หรือ data test เยอะ ๆ สามารถ merge กัน เพื่อมาใช้งานได้

ตัว matcher หรือ expect ก็ merge ได้เช่นเดียวกัน

[gist id="6e610ff26af6c82afa66ca690d31c68a" file="3.ts"]

Tips เพิ่มเติม

แนะนำให้ใช้การ trace แทน video หรือ screenshot
โดยใน project ให้ทำการ config ค่า trace: 'on-first-retry' ไปเลย
ซึ่งเป็นค่าเริ่มต้นจากการสร้าง project ใหม่นั่นเอง
ส่วน video และ screenshot ก็ปิดไปเลย
ซึ่งทำให้ performance ของการ test ดีกว่าเดิมมาก
และใช้งานได้ทั้งใน local และ CI ได้เลย

ส่วนใน VSCode อาจจะเจอ error ในไฟล์ config ต่าง ๆ
ดังนั้นก็แก้ง่าย ๆ ด้วยการติดตั้ง type ของ node ไปใน test ดังนี้

[code]$npm i --save-dev @types/node[/code]

อีกอย่าง function type() ใน object ต่าง ๆ deprecated แล้วนะตั้งแต่ version 1.38
page.type(), frame.type(), locator.type() and elementHandle.type()
โดยไปใช้ fill() แทนนะ
และไม่ download browser ให้ใหม่แบบอัตโนมัติแล้ว สำหรับ version เก่า
ต้องทำการ download เอง ด้วยคำสั่ง $npx playwright install

Reference Websites

• What's new in Playwright 1.39