Page Object Model: The Automated Testing Pattern on Android

บทความนี้เป็นเนื้อหาโดยสรุปที่พูดในงาน Android Bangkok 2023 ค่ะ

ใครที่เคยเขียน unit test มาแล้ว ทุกคำสั่งที่ใช้เทสทั้งหมด จะอยู่ใน 1 function test
E2E Test เราเขียนแบบนั้นได้ก็จริง แต่โค้ดจะยาวมากๆๆๆๆๆ 50 lines ได้เลย
ทำให้อ่านยาก และอ่านออกอยู่คนเดียวด้วย

Page Object Model คืออะไร

ตัวย่อ POM คือ pattern ที่ใช้ในการเขียน E2E Test นั่นเองค่ะ ช่วยให้อ่านง่ายและเป็นสัดส่วน

มี 3 ส่วน
1. class E2E Test เป็น test runner ที่อยู่ใน folder androidTest ใน module ทั่วไป
2. class ScreenPlay ทำ action ของการเทส เช่น click, scroll, verify text
3. class PageObject ตามหา object ที่ใช้ในการเทส เช่น button, text, view ต่างๆ

class ScreenPlay และ class PageObject สามารถดีไซน์ตามลักษณะ modular architecture ได้ คือ แยกเป็น moduleในทีนี้ตั้งชื่อว่า e2e share

Concept of ScreenPlay & PageObject

concept : screenplay + object

จากรูป ถ้ามี ui ลักษณะนี้ สามารถกำหนดทั้งหน้าจอเป็น 1 screenplay ได้เลย และแต่ละ view ภายในเป็น object

ถ้าอยากจะเทสการคลิ๊ก item
class PageObject จะรวบรวม object อยู่ในนี้ และ class ScreenPlay ทำ action click ตามรูปด้านล่าง

click item

จากรูปด้านล่าง ui มีหลากหลาย object ใน 1 หน้า
ถ้าอยากจะเทสแค่ส่วนที่โฟกัสตามรูป สามารถกำหนด screenplay เฉพาะส่วนนี้ได้ และแต่ละ view เป็น object เช่นเดิม ความพิเศษของ ui นี้คือ มี object ที่เป็น RecyclerView ด้วย

concept : screenplay + object

ถ้าอยากจะเทสการคลิ๊ก item สุดท้ายที่อยู่ใน RecyclerView นี้
class PageObject จะรวบรวม object อยู่ในนี้ และ class ScreenPlay ทำ action click by index และ scroll ตามรูปด้านล่าง

click item in recyclerview

การแบ่ง screenplay ขึ้นอยู่กับความเหมาะสมนะคะ ไม่มีลักษณะที่แน่นอนค่ะ

ลองเขียนเทสใช้ POM

Test case คือ ต้องการเทสว่าสามารถเปิดหน้า profile ได้ถูกต้อง
โดยการที่จะเข้าถึงหน้า profile จะต้องผ่านการ sign in และคลิ๊กปุ่ม profile ที่หน้า Home ก่อนถึงจะเปิดหน้า profile ได้

ในลักษณะนี้ให้เราแบ่งส่วนเทส ได้แก่ เทส Sign in, เทส click profile และ เทสหน้า profile

1. เทส Sign in
- ให้สร้าง class ScreenPlay และ class PageObject
- class PageObject เตรียม object ได้แก่ username, password, sign in button โดยอ้างอิงจาก content description
- class ScreenPlay ทำ action sign in โดยเริ่มจากระบุ username และ password จากนั้นสั่ง click ปุ่ม sign in

Sign in Example

2. เทส click profile button ที่หน้า Home
- ให้สร้าง class ScreenPlay และ class PageObject
- class PageObject เตรียม object ของปุ่ม profile ให้พร้อม
- class ScreenPlay ทำ action click ปุ่ม profile

Click Profle Button Example

3. เทสหน้า profile ว่าแสดงผลอยู่ โดยในตัวอย่างนี้จะเทสจากข้อความ “Profile” และรูปโปรไฟล์ว่าแสดงอยู่
(สามารถเลือกเทสมากหรือน้อยกว่านี้ได้ ขึ้นอยู่กับความเหมาะสม)
- ให้สร้าง class ScreenPlay และ class PageObject
- class PageObject เตรียม object ได้แก่ profile text หรือ profile image
- class ScreenPlay ทำ action ในการเช็คว่าทั้งสอง object นี้แสดงอยู่หรือไม่ ถ้าใช่สามารถสรุปได้ว่าหน้า profile แสดงอยู่

Profile Page Example

จะได้ class ScreenPlay ทั้งหมด ได้แก่

class ScreenPlay ทั้งหมด

หลังจากที่เรามี class ScreenPlay ครบแล้ว ให้นำมาใช้ที่ class E2ETest ตามรูป
เริ่มต้นตาม journey คือ
1. เทสการ Sign in
2. เทส click profile button ในหน้า Home
3. เทสหน้า Profile

✅ ถือว่าผ่าน 1 test case

Result Test Case

สถานการณ์สมมติ

ลูกค้าบอกว่า “จะเปลี่ยน หน้า Sign in เป็บแบบใหม่ ใช้ One Time Password”

จะเกิดอะไรขึ้นกับเทสเคสเมื่อกี้? เทส failed ที่ Sign in❌

Test Failed

ดังนั้นเราจะต้องแก้ไขการเทส Sign in ตาม Journey ใหม่

Sign in with OTP

จาก ui ของหน้า sign inใหม่
- class PageObject ที่ใช้ ได้แก่ country drop down, moblie number, button
- class ScreenPlay แก้ไขวิธีการ sign in เริ่มจากเลือก country กรอกเบอร์โทรศัพท์ และคลิ๊กปุ่ม next

sign in ยังไม่จบเท่านี้ ยังเหลือขั้นตอนกรอก verification code นะคะ

Verification Code

จาก ui ของหน้ากรอก Verification code
- class PageObject เพิ่ม object คือ text ในการกรอก Verification code
- class ScreenPlay เพิ่มขั้นตอน กรอก Verification code

เมื่อเรารันเทสนี้อีกครั้ง เทสจะกลับมาผ่านแล้วค่ะ ✅

Result Test Case

สรุป

Summary

จากทั้งหมด ScreenPlay และ PageObject ที่อธิบายข้างต้น

สรุปได้ว่า ScreenPlay จะทำ action ตามที่ test case ต้องการ เช่น การคลิ๊กปุ่ม
ดังนั้น ScreenPlay จึงต้องรู้จักกับ PageObject เพราะต้องการ object ของปุ่มเพื่อทำการคลิ๊ก ส่วน pageobject ที่ทำหน้าที่หา object มาให้พร้อมใช้งาน จำเป็นต้องรู้จักกับ content description เพื่อใช้อ้างอิงถึง object นั้นๆ

ส่วนของ Espresso และ UI Automator นั้น มีส่วนช่วยในการทำ action เทสที่ ScreenPlay และ ช่วยหา object ที่ PageObject

Presentation ในงานนะคะ

Download here

ถ้ามีโอกาสได้เขียน E2E test กัน อย่าลืมลองนำ Page Object Model ไปใช้กันดูนะคะ แล้วจะติดใจค่ะ 💚

สุดท้ายขอบคุณทีมงาน True Digital Group

ขอบคุณงาน Android Bangkok 2023 ด้วยนะคะ สำหรับโอกาสที่ได้เป็น Public Speaker ครั้งแรก หลังจากที่เคยเป็นผู้ฟังมาก่อน

และขอบคุณ FC Lookmoo ที่มาเชียร์ และส่งกำลังใจให้เต็มหลอด