Screengrab (Fastlane) — คืออะไร ความสามารถ และการทำให้สกรีนช็อตเป็นอัตโนมัติ

Screengrab คืออะไรและทำไมต้องใช้

Screengrab — เป็นองค์ประกอบของระบบนิเวศ Fastlane สำหรับการสร้างสกรีนช็อตของแอปพลิเคชันมือถือโดยอัตโนมัติ เครื่องมือนี้เปิดตัวในปี 2015 เพื่อแก้ปัญหา: สำหรับการเผยแพร่ใน Google Play และ App Store ต้องใช้สกรีนช็อต 4 ถึง 10 ภาพต่อหนึ่งภาษา เมื่อรองรับ 30 ภาษานั่นคือ 120–300 ภาพที่ต้องทำด้วยตนเอง

ปัญหาของการสร้างสกรีนช็อตด้วยตนเอง

นักพัฒนาจะเปิดแอพบนซิมูเลเตอร์หรืออุปกรณ์ด้วยตนเอง เลื่อนไปยังหน้าจอที่ต้องการ จับภาพหน้าจอ โอนไปยังคอมพิวเตอร์ ตัดแต่ง และบันทึกไว้ในโฟลเดอร์ที่ถูกต้อง ขั้นตอนนี้ทำซ้ำสำหรับแต่ละภาษาและการวางแนวแต่ละแบบ ตามข้อมูลจาก Google Play Console แอปพลิเคชันทั่วไปจะอัปเดตทุกสองสัปดาห์ ซึ่งทำให้สกรีนช็อตกลายเป็นกิจวัตรประจำที่ต้องทำซ้ำ

ข้อดีของการทำให้เป็นอัตโนมัติ

Screengrab แก้ปัญหาอย่างครบถ้วน: นักพัฒนาอธิบายสคริปต์ทดสอบบน UI เฟรมเวิร์ก (Espresso สำหรับ Android, XCTest สำหรับ iOS) และ Screengrab จะรันพวกมันบนอุปกรณ์และภาษาที่ต้องการทั้งหมดโดยอัตโนมัติ Fastlane ทำหน้าที่ประสานงานของกระบวนการ: สร้างบิลด์ รันการทดสอบ รวบรวมสกรีนช็อต และจัดเก็บในโครงสร้างโฟลเดอร์ที่ถูกต้อง

ผลลัพธ์ — สกรีนช็อตหลายร้อยภาพภายใน 10–15 นาที แทนที่จะใช้เวลาหลายชั่วโมงในการทำงานด้วยตนเอง Google แนะนำให้อัปเดตสกรีนช็อตทุกครั้งที่มีการเปลี่ยนแปลงอินเทอร์เฟซอย่างมีนัยสำคัญ และหากไม่มีการทำให้เป็นอัตโนมัติ คำแนะนำนี้มักถูกละเลย

Screengrab ทำงานอย่างไร: สถาปัตยกรรมและหลักการทำงาน

สถาปัตยกรรม ของ Screengrab สร้างขึ้นจากสององค์ประกอบหลัก: ไคลเอนต์บนอุปกรณ์ (screengrab-lib) และตัวรันที่จัดการการรันการทดสอบและรวบรวมผลลัพธ์ บน Android ใช้เฟรมเวิร์กการทดสอบแบบ instrumental test บน iOS ใช้ XCTest

วงจรของการรันครั้งเดียว

Fastlane เรียก action screengrab ซึ่งอ่านไฟล์การกำหนดค่า Screengrabfile ตัวรันจะสร้างเทสต์ APK ที่มีไลบรารี screengrab-lib เชื่อมต่ออยู่ ติดตั้งบนอุปกรณ์หรืออีมูเลเตอร์ที่เชื่อมต่ออยู่ และรัน UI-เทสที่มีคำกำกับสำหรับสกรีนช็อต

# Fastfile — คำอธิบาย lane สำหรับสกรีนช็อต
lane :screenshots do
  capture_android_screenshots(
    output_directory: "fastlane/metadata/android/screenshots",
    locales: ["ru-RU", "en-US", "de-DE"],
    devices: ["pixel_6", "pixel_tablet"],
    use_tests_external_storage: true
  )
end

โครงสร้างไฟล์ส่งออก

Screengrab สร้างลำดับชั้นโฟลเดอร์: ภาษา → อุปกรณ์ → สกรีนช็อต โครงสร้างนี้ตรงกับข้อกำหนดของ Google Play Console และ App Store Connect App Store ต้องการขนาดที่กำหนดแน่นอนสำหรับอุปกรณ์แต่ละประเภท และ Screengrab สร้างภาพตามข้อกำหนดเฉพาะ

การรองรับหลายอุปกรณ์

เครื่องมือสามารถรันการทดสอบแบบขนานบนอุปกรณ์และอีมูเลเตอร์ที่เชื่อมต่ออยู่ทั้งหมด อีมูเลเตอร์ Android จะเริ่มต้นโดยอัตโนมัติหากยังไม่ทำงาน สำหรับ iOS Screengrab ใช้ซิมูเลเตอร์ของ Xcode

การติดตั้งและตั้งค่า Screengrab สำหรับ Android

การติดตั้ง Screengrab ประกอบด้วยสองส่วน: การเพิ่มไลบรารีในโปรเจกต์และการตั้งค่าไฟล์การกำหนดค่า บน Android จำเป็นต้องใช้ UI-เฟรมเวิร์ก Espresso และไลบรารี screengrab-lib จากคลัง Fastlane

การเชื่อมต่อไลบรารี

ใน build.gradle ของโมดูลแอปพลิเคชัน จะเพิ่มไลบรารี screengrab-lib ไลบรารีนี้ให้คลาส ScreenCapturer ที่ใช้สำหรับจับภาพหน้าจอในขณะที่เรียกใช้

// build.gradle (โมดูล: app)
androidTestImplementation(
  'tools.fastlane:screengrab-lib:2.1.0'
)

การเขียนเทสที่มีสกรีนช็อต

UI-เทสจะถูกกำกับด้วยแอนโนเทชัน Screengrab.screenshot() ในจุดที่ต้องการ แต่ละการเรียกใช้จะจับภาพหน้าจอปัจจุบันและบันทึกไว้ภายใต้ชื่อที่ระบุ

import tools.fastlane.screengrab.Screengrab
import tools.fastlane.screengrab.locale.LocaleTestRule

class ScreenshotTest {

    @get:Rule
    val localeTestRule = LocaleTestRule()

    @Test
    fun testTakeScreenshots() {
        Screengrab.screenshot("main_screen")
        // การดำเนินการ: คลิกปุ่มเข้าสู่ระบบ
        Screengrab.screenshot("login_screen")
    }
}

การกำหนดค่า Screengrabfile

ไฟล์ Screengrabfile เก็บพารามิเตอร์การรันใช้งาน: รายการอุปกรณ์ ภาษา การหมดเวลา และเส้นทางสำหรับการบันทึก โดยปกติไฟล์นี้จะอยู่ในโฟลเดอร์ fastlane ถัดจาก Fastfile

การแปลภาษาสกรีนช็อตและหลายภาษา

การแปลภาษา — คือความสามารถหลักของ Screengrab ที่ทำให้คนส่วนใหญ่เลือกใช้ เครื่องมือจะสลับภาษาของแอปพลิเคชันโดยอัตโนมัติก่อนการรันการทดสอบแต่ละครั้งและจับภาพบนภาษาที่ระบุทั้งหมด

การตั้งค่าภาษา

ภาษาจะถูกระบุใน Screengrabfile ด้วยพารามิเตอร์ locales สำหรับแต่ละภาษา Screengrab จะติดตั้งแอปพลิเคชันใหม่พร้อมทรัพยากรที่สอดคล้องกันและรันรอบการทดสอบอย่างสมบูรณ์ LocaleTestRule บน Android จะสลับโลคอลของอุปกรณ์โดยอัตโนมัติ

# Screengrabfile
locales [
  "ru-RU",
  "en-US",
  "de-DE",
  "fr-FR",
  "es-ES",
  "ja-JP",
  "ko-KR"
]

โครงสร้างโฟลเดอร์สำหรับสกรีนช็อตที่แปลภาษา

Screengrab สร้างไดเรกทอรีตามโครงสร้าง: screenshots/{locale}/{device_name}/{screenshot_name}.png โครงสร้างนี้ตรงกับข้อกำหนดของ Google Play ซึ่งทำให้สามารถอัปโหลดสกรีนช็อตผ่าน Fastlane deliver ด้วยคำสั่งเดียว

สำหรับ iOS App Store Connect คาดหวังสกรีนช็อตในโครงสร้างแบนตามภาษา Fastlane จะแปลงลำดับชั้นของ Screengrab เป็นรูปแบบที่ต้องการโดยอัตโนมัติเมื่อเผยแพร่

การรวม Screengrab เข้ากับไปป์ไลน์ CI/CD

CI/CD — เป็นข้อได้เปรียบหลักของ Screengrab เครื่องมือสามารถรันจากบรรทัดคำสั่งและไม่ต้องการส่วนติดต่อแบบกราฟิก ทำให้เหมาะสำหรับการสร้างบนเซิร์ฟเวอร์

GitHub Actions

ในสภาพแวดล้อม CI จำเป็นต้องเริ่มต้นอีมูเลเตอร์ Android หรือซิมูเลเตอร์ iOS จากนั้นจึงเรียก lane ที่มีสกรีนช็อต GitHub Actions รองรับการเก็บแคช AVD ซึ่งทำให้การรันซ้ำเร็วขึ้น

พารามิเตอร์สำหรับ CI

ในการกำหนดค่า CI สิ่งสำคัญต้องคำนึงถึงข้อจำกัดด้านหน่วยความจำและเวลา อีมูเลเตอร์ Android ต้องใช้ RAM อย่างน้อย 2 GB ต่ออุปกรณ์ และการรันเต็มรูปแบบบน 7 ภาษาและ 2 อุปกรณ์ใช้เวลา 20–40 นาที

# Fastfile — lane สำหรับ CI พร้อมการหมดเวลา
lane :ci_screenshots do
  capture_android_screenshots(
    locales: ["en-US", "ru-RU"],
    devices: ["pixel_6"],
    clear_previous_screenshots: true,
    tests_timeout: "600",
    output_directory: "screenshots/ci"
  )
end

Jenkins Pipeline

สำหรับ Jenkins ใช้ขั้นตอน sh ด้วยการเรียก bundle exec fastlane แนะนำให้รันสกรีนช็อตตอนกลางคืนหรือตามทริกเกอร์หลังการ Merge เข้าสู่สาขาหลัก เพื่อไม่ให้ชะลอวงจรการพัฒนา

Screengrab เทียบกับทางเลือก: การเปรียบเทียบเครื่องมือ

Screengrab ไม่ใช่เครื่องมือเดียวสำหรับการทำให้สกรีนช็อตเป็นอัตโนมัติ มีทางเลือกมากมายด้วยแนวทางที่แตกต่างกัน: เครื่องมือในตัวของ OS, แพลตฟอร์มเชิงพาณิชย์ และไลบรารีสำหรับจับภาพหน้าจอในโค้ด

ADB Shell ให้การควบคุมอย่างสมบูรณ์ แต่ต้องเขียนสคริปต์สำหรับแต่ละสถานการณ์ XCTest ถูกสร้างไว้ใน Xcode แต่ไม่จัดการการแปลภาษาโดยอัตโนมัติ Firebase Test Lab รันการทดสอบบนอุปกรณ์จริงในคลาวด์ ซึ่งให้ความครอบคลุมสูงสุด แต่มีค่าใช้จ่ายต่อนาที

Screengrab ชนะด้วยการเชื่อมโยง: Fastlane จัดการวงจรชีวิตทั้งหมดของการสร้าง — ตั้งแต่การคอมไพล์ไปจนถึงการเผยแพร่ Google Play รองรับโครงสร้างโฟลเดอร์ของ Screengrab โดยตรงผ่าน Fastlane deliver

ปัญหาทั่วไปและวิธีแก้ไข

เมื่อทำงานกับ Screengrab นักพัฒนามักพบกับปัญหาที่เกิดซ้ำหลายประการ ความรู้เกี่ยวกับข้อผิดพลาดทั่วไปช่วยลดเวลาในการดีบักในการรันครั้งแรก

สกรีนช็อตได้ภาพว่างหรือสีดำ

ปัญหาเกิดขึ้นเมื่อ Screengrab จับภาพก่อนที่การเรนเดอร์หน้าจอจะเสร็จสมบูรณ์ วิธีแก้ไข — เพิ่มการหน่วงเวลา Thread.sleep() ก่อนเรียก screenshot() หรือใช้ IdlingResource จาก Espresso เพื่อรอการดำเนินการแบบอะซิงโครนัส

ข้อผิดพลาดความไม่เข้ากันของเวอร์ชัน

Screengrab-lib ต้องตรงกับเวอร์ชันของ Fastlane Fastlane มีการอัปเดตทุกเดือน และไลบรารีเก่าอาจไม่รองรับพารามิเตอร์การกำหนดค่าใหม่ วิธีแก้ไข — ซิงโครไนซ์เวอร์ชันผ่าน Gemfile และ gradle.properties

การรันที่ยาวนานบน CI

การรันบน 30 ภาษาบน 5 อุปกรณ์อาจใช้เวลามากกว่าหนึ่งชั่วโมง วิธีแก้ไข — แยกการรัน: หนึ่งสำหรับร้านค้าบนทุกภาษา อีกอันสำหรับใช้ภายในบนสองภาษา GitHub Actions อนุญาตให้ใช้เมทริกซ์กลยุทธ์สำหรับการรันแบบขนาน

ปัญหากับอีมูเลเตอร์บน CI

อีมูเลเตอร์ Android ต้องการการจำลองเสมือนของฮาร์ดแวร์ ซึ่งไม่สามารถใช้งานได้เสมอบนเซิร์ฟเวอร์ CI KVM ต้องเปิดใช้งานมิฉะนั้นอีมูเลเตอร์จะไม่ทำงาน วิธีแก้ไข — ใช้ x86 อิมเมจที่ไม่มีการเร่ง GPU หรือ Firebase Test Lab