มีคำถามเกี่ยวกับการเข้าถึง element ต่าง ๆ
ใน User Interface ของการทดสอบพวก UI testing บน web browser
ว่าจะทำอย่างไรดี ?
เนื่องจากทำการเข้าถึง element ด้วย xpath บ้าง
เข้าถึงด้วย css selector บ้าง
เข้าถึงด้วยการเขียน JavaScript บ้าง
เพราะว่า มีปัญหาของการทดสอบ จากการเปลี่ยนแปลงมาก ๆ
การแก้ไขเบื้องต้นคือ
ถ้าทำได้ก็ทดสอบระบบงานส่วนนี้น้อยลง ทำเท่าที่จำเป็น
เพราะว่า มันใช้เวลาในการทดสอบและเตรียมมากมาย
แต่ถ้าเลี่ยงไม่ได้ แนะนำให้ เข้าถึงด้วยสิ่งที่คงที่ หรือ ไม่เปลี่ยนแปลง เป็นดีที่สุด
เพราะว่า บ่อยครั้งเรามักกจะเข้าถึง element ต่าง ๆ ด้วยสิ่งที่ผูกกติดกับ UI
ส่งผลให้เมื่อทำการเปลี่ยนแปลง UI แล้วส่วนของการทดสอบก็จะพังทั้งหมด !!
แบบนี้ไม่น่าจะเป็นเรื่องที่ดี
ยกตัวอย่างเช่น
- การกำหนด id ให้แต่ละ element ที่จะเข้าถึง และต้องเป็น unique id ด้วย
- ทำการกำหนด attribute ใหม่ขึ้นมา เพื่อใช้สำหรับการทดสอบ
มาดูจากเอกสารของ Cypress เรื่อง Best Practice กันบ้าง
มีคำแนะนำเกี่ยวกับการเข้าถึง element โดยแนะนำให้เพิ่ม attribute ใหม่ขึ้นมา
ชื่อขึ้นต้นด้วย data-* ไปเลย เพื่อใช้แยกออกมาจากส่วนของ UI อย่างชัดเจน
ว่าเป็น attribute ที่สร้างมาเพื่อการทดสอบเท่านั้น
น่าจะช่วยลดผลกระทบต่อการเปลี่ยน UI ได้
และเห็นว่ามี Cypress Testing Library ออกมาให้ใช้
โดยสามารถเพิ่ม attribute ชื่อว่า data-testid เข้ามาได้เลย
จากนั้นในชุดการทดสอบจะมี function cy.findByTestId() ให้ใช้งานเลย
ก็ง่ายขึ้นมาอีกเป็นกองเลยนะ
