การทดสอบ API

การโต้ตอบกับองค์ประกอบ UI มี 3 วิธีหลักๆ ดังนี้

• เครื่องมือค้นหาช่วยให้คุณเลือกองค์ประกอบอย่างน้อย 1 รายการ (หรือโหนดในแผนผังความหมาย) เพื่อทำการยืนยันหรือดำเนินการกับองค์ประกอบเหล่านั้น
• การยืนยันใช้เพื่อยืนยันว่าองค์ประกอบมีอยู่หรือมีแอตทริบิวต์บางอย่าง
• การดำเนินการจะแทรกเหตุการณ์ของผู้ใช้ที่จำลองขึ้นในองค์ประกอบ เช่น การคลิกหรือท่าทางสัมผัสอื่นๆ

API บางรายการเหล่านี้ยอมรับ SemanticsMatcher เพื่ออ้างอิงโหนดอย่างน้อย 1 โหนดในแผนผังความหมาย

หมายเหตุ: การทดสอบ Compose UI แตกต่างจากการทดสอบ UI แบบอิงตามมุมมอง ชุดเครื่องมือ UI ที่อิงตามมุมมองจะกำหนดไว้อย่างชัดเจนว่ามุมมองคืออะไร มุมมองจะใช้พื้นที่สี่เหลี่ยมผืนผ้าและมีพร็อพเพอร์ตี้ เช่น ตัวระบุ ตำแหน่ง ระยะขอบ และระยะห่างจากขอบ ใน Compose เนื่องจากมีคอมโพสิเบิลเพียงบางรายการเท่านั้นที่ส่ง UI ไปยังลำดับชั้น UI คุณจึงต้องใช้วิธีอื่นในการจับคู่องค์ประกอบ UI

เครื่องค้นหา

คุณสามารถใช้ onNode และ onAllNodes เพื่อเลือกโหนดเดียวหรือหลายโหนดตามลำดับ แต่คุณยังใช้เครื่องมือค้นหาที่สะดวกสำหรับการค้นหาที่พบบ่อยที่สุดได้ด้วย เช่น onNodeWithText และ onNodeWithContentDescription คุณสามารถดูรายการทั้งหมดได้ในข้อมูลสรุปเกี่ยวกับการทดสอบ Compose

เลือกโหนดเดียว

composeTestRule.onNode(<<SemanticsMatcher>>, useUnmergedTree = false): SemanticsNodeInteraction

// Example
composeTestRule
    .onNode(hasText("Button")) // Equivalent to onNodeWithText("Button")

เลือกหลายโหนด

composeTestRule
    .onAllNodes(<<SemanticsMatcher>>): SemanticsNodeInteractionCollection

// Example
composeTestRule
    .onAllNodes(hasText("Button")) // Equivalent to onAllNodesWithText("Button")

ต้นไม้ที่เลิกผสานแล้ว

บางโหนดจะผสานข้อมูลความหมายของโหนดย่อย เช่น ปุ่มที่มีองค์ประกอบของข้อความ 2 รายการจะผสานป้ายกำกับองค์ประกอบของข้อความเข้าด้วยกัน ดังนี้

MyButton {
    Text("Hello")
    Text("World")
}

จากการทดสอบ ให้ใช้ printToLog() เพื่อแสดงแผนผังความหมาย

composeTestRule.onRoot().printToLog("TAG")

โค้ดนี้จะพิมพ์เอาต์พุตต่อไปนี้

Node #1 at (...)px
 |-Node #2 at (...)px
   Role = 'Button'
   Text = '[Hello, World]'
   Actions = [OnClick, GetTextLayoutResult]
   MergeDescendants = 'true'

หากต้องการจับคู่โหนดของสิ่งที่จะเป็นโครงสร้างที่ไม่ได้ผสานรวม คุณสามารถตั้งค่า useUnmergedTree เป็น true ได้ ดังนี้

composeTestRule.onRoot(useUnmergedTree = true).printToLog("TAG")

โค้ดนี้จะพิมพ์เอาต์พุตต่อไปนี้

Node #1 at (...)px
 |-Node #2 at (...)px
   OnClick = '...'
   MergeDescendants = 'true'
    |-Node #3 at (...)px
    | Text = '[Hello]'
    |-Node #5 at (83.0, 86.0, 191.0, 135.0)px
      Text = '[World]'

พารามิเตอร์ useUnmergedTree พร้อมใช้งานในเครื่องมือค้นหาทั้งหมด ตัวอย่างเช่น ในที่นี้ มีการใช้ในเครื่องมือค้นหา onNodeWithText

composeTestRule
    .onNodeWithText("World", useUnmergedTree = true).assertIsDisplayed()

การยืนยัน

ตรวจสอบการยืนยันโดยเรียกใช้ assert() ใน SemanticsNodeInteraction ที่เครื่องมือค้นหาส่งคืนด้วย Matcher อย่างน้อย 1 รายการ ดังนี้

// Single matcher:
composeTestRule
    .onNode(matcher)
    .assert(hasText("Button")) // hasText is a SemanticsMatcher

// Multiple matchers can use and / or
composeTestRule
    .onNode(matcher).assert(hasText("Button") or hasText("Button2"))

นอกจากนี้ คุณยังใช้ฟังก์ชันอำนวยความสะดวกสำหรับการยืนยันที่พบบ่อยที่สุดได้ เช่น assertExists, assertIsDisplayed และ assertTextEquals คุณดูรายการทั้งหมดได้ในข้อมูลสรุปเกี่ยวกับการทดสอบ Compose

นอกจากนี้ยังมีฟังก์ชันสำหรับตรวจสอบการยืนยันในคอลเล็กชันของโหนดด้วย ดังนี้

// Check number of matched nodes
composeTestRule
    .onAllNodesWithContentDescription("Beatle").assertCountEquals(4)
// At least one matches
composeTestRule
    .onAllNodesWithContentDescription("Beatle").assertAny(hasTestTag("Drummer"))
// All of them match
composeTestRule
    .onAllNodesWithContentDescription("Beatle").assertAll(hasClickAction())

การทำงาน

หากต้องการแทรกการดำเนินการในโหนด ให้เรียกใช้ฟังก์ชัน perform…() ดังนี้

composeTestRule.onNode(...).performClick()

หมายเหตุ: คุณไม่สามารถเชื่อมโยงการดำเนินการภายในฟังก์ชัน Perform ได้ แต่ให้เรียกใช้ perform…() หลายครั้งแทน

ตัวอย่างการดำเนินการมีดังนี้

performClick(),
performSemanticsAction(key),
performKeyPress(keyEvent),
performGesture { swipeLeft() }

คุณดูรายการทั้งหมดได้ในเอกสารสรุปการทดสอบ Compose

ตัวจับคู่

มี Matcher หลากหลายแบบให้เลือกใช้สำหรับการทดสอบโค้ด Compose

ตัวจับคู่แบบลำดับชั้น

ตัวจับคู่แบบลำดับชั้นช่วยให้คุณเลื่อนขึ้นหรือลงในแผนผังความหมายและทำการจับคู่ได้

fun hasParent(matcher: SemanticsMatcher): SemanticsMatcher
fun hasAnySibling(matcher: SemanticsMatcher): SemanticsMatcher
fun hasAnyAncestor(matcher: SemanticsMatcher): SemanticsMatcher
fun hasAnyDescendant(matcher: SemanticsMatcher):  SemanticsMatcher

ตัวอย่างการใช้ตัวจับคู่เหล่านี้มีดังนี้

composeTestRule.onNode(hasParent(hasText("Button")))
    .assertIsDisplayed()

ตัวเลือก

อีกวิธีหนึ่งในการสร้างการทดสอบคือการใช้ตัวเลือก ซึ่งจะทำให้การทดสอบบางรายการอ่านง่ายขึ้น

composeTestRule.onNode(hasTestTag("Players"))
    .onChildren()
    .filter(hasClickAction())
    .assertCountEquals(4)
    .onFirst()
    .assert(hasText("John"))

คุณดูรายการทั้งหมดได้ในข้อมูลสรุปเกี่ยวกับการทดสอบ Compose

แหล่งข้อมูลเพิ่มเติม

• ทดสอบแอปใน Android: หน้า Landing Page หลักสำหรับการทดสอบ Android จะแสดงมุมมองที่กว้างขึ้นเกี่ยวกับพื้นฐานและเทคนิคการทดสอบ
• พื้นฐานของการทดสอบ: ดูข้อมูลเพิ่มเติมเกี่ยวกับแนวคิดหลักเบื้องหลังการทดสอบแอป Android
• การทดสอบในเครื่อง: คุณสามารถทำการทดสอบบางอย่างในเครื่องบนเวิร์กสเตชันของคุณเองได้
• การทดสอบการวัดคุม: คุณควรเรียกใช้การทดสอบการวัดคุมด้วย ซึ่งก็คือการทดสอบที่ทำงานในอุปกรณ์โดยตรง
• การรวมอย่างต่อเนื่อง: การรวมอย่างต่อเนื่องช่วยให้คุณผสานรวมการทดสอบเข้ากับไปป์ไลน์การติดตั้งใช้งานได้
• ทดสอบหน้าจอขนาดต่างๆ: เนื่องจากผู้ใช้มีอุปกรณ์หลากหลายประเภท คุณจึงควรทดสอบหน้าจอขนาดต่างๆ
• Espresso: แม้ว่า Espresso จะมีไว้สำหรับ UI แบบอิงตามมุมมอง แต่ความรู้เกี่ยวกับ Espresso ก็ยังคงเป็นประโยชน์สำหรับการทดสอบ Compose ในบางแง่มุม