ปัญหาที่ตัวผมเองเจอประจำ
ยิ่งช่วงนี้ต้องเขียน และ generate test script
ตาม test cases ที่ออกแบบด้วย Playwright นั่นก็คือ
การหาและตรวจสอบว่า locator ของ element ที่ต้องการเข้าถึง
ว่ามีอะไรบ้าง ?
ทำตาม หรือ ตั้งชื่อตามที่ออกแบบไว้หรือไม่ ?
และถ้าต้องใช้ AI Agent ทำการสร้าง test script ขึ้นมา จะต้องเตรียม context ให้อย่างไร ?
ถึงจะเกิดประโยชน์สูงสุด และ ไม่เปลือง token มากเกินไป

จากปัญหาที่เจอก็เลยไปดู solution ที่มีคนแก้ไขไว้แล้ว
ยกตัวอย่างเช่น Playwright CLI และ Agent Browser CLI
หรือไปนั่ง inspect หรือ Playwright codegen ก็ได้
หรือให้ AI Agent ไปเปิด URL ที่กำหนดเลย ก็ได้
หรือจริง ๆ เขียนใน spec ของ feature นั้น ๆ ไปเลยก็ได้

แต่ก็ยังไม่ตรงตามความต้องการมากนัก !!
เนื่องจากในงานที่ทำนั้น มีข้อตกลงว่าใน element ต่าง ๆ ว่า
จะต้องใส่ attribute ชื่อว่า data-testid มาเสมอ
ดังนั้นอยากจะให้ CLI เหล่านี้อ่าน attribute ออกมาให้ด้วย

และอีกอย่างในการสร้าง test script นั้น
มีการสร้าง Agent และ Skill สำหรับทำเรื่องนี้ไว้ได้
เลยคิดว่าจะเอาผลที่ได้นั้น ไปใส่ context ด้วย
น่าจะช่วยลดจำนวน token ไปได้เยอะพอสมควร

ดังนั้นจึงลองสร้าง CLI tool ง่าย ๆ ขึ้นมา ชื่อว่า Playwright DOM TestId
โดยใช้ Playwright เป็นตัวเริ่มต้น
เพื่อเปิด Google Chrome ขึ้นมาแบบ headless
จากนั้นทำการ parser DOM แบบง่าย ๆ
แล้วพ่น result ออกมา

ตัวอย่างของการทำงานกับ Playwright CLI

ซึ่งช่วยให้การ generate test script ด้วย Playwright ง่ายขึ้น
ลดจำนวน token และจำนวน turn ของการทำงานอีกด้วย
รวมทั้งยังช่วยเพิ่มความถูกต้องของการ generate อีกด้วย

แต่เครื่องมือตัวนี้ยังไม่ได้ทำการ optimize result อะไรเลย
เนื่องจากลองไปใช้กับหน้า web ใหญ่ ๆ
ยังมีจำนวน token มากกว่า Playwright CLI และ Agent browser อยู่มาก