นี้เป็นบทความที่น้องสาวของยี่ห้อ Fastlane ภาพรวมการทำงานกับ React พื้นเมือง แม้ว่าจะใช้fastlane snapshotงานได้กับแอป iOS แต่fastlane screengrabเป็นเวอร์ชัน Android ที่ใช้โปรแกรมจับภาพหน้าจอแอป Android โดยใช้ฟังก์ชันการทดสอบ UI ที่ Android Studio รองรับ แม้ว่าข้อกำหนดการจับภาพหน้าจอบน Android Play Store จะเข้มงวดน้อยกว่าใน Apple App Store (ไม่มีข้อกำหนดที่ยากเกี่ยวกับมิติสามารถข้ามแท็บเล็ต ฯลฯ ) แต่การเดินทางในการfastlane screengrabทำงานกับ React Native ก็ยังเป็นเรื่องที่พูดได้ fastlane screengrabบทความระบุว่ามากที่สุดในหัวข้อนี้ที่เราสามารถหาเป็นวันที่เราอยากจะแบ่งปันประสบการณ์ใหม่ของเราทำงานร่วมกับ

ระมัดระวังกับเอกสาร

เอกสารประกอบscreengrabเป็นข้อมูลล่าสุดมากกว่าภาพหน้าจอของ Androidเนื่องจากก่อนหน้านี้ระบุว่าเวอร์ชันล่าสุดscreengrabคือ 2.0.0 อย่างไรก็ตามหลังมีลิงก์อัญมณีscreengrabซึ่งระบุว่าเวอร์ชันปัจจุบันคือ 1.0.0 การกำหนดค่าscreengrabเป็น 1.0.0 (เพิ่มเติมในภายหลัง) ในการพึ่งพาการไล่ระดับไม่ทำงาน

การเตรียมการทดสอบ UI

เอกสารนี้ไม่มีรายละเอียดโดยเฉพาะเกี่ยวกับวิธีแก้ไขโค้ดเนทีฟของ Android เพื่อเตรียมพร้อมสำหรับการทดสอบ UI ด้วย expresso, AndroidJUnitRunner และ UI Automator เราพบว่าจำเป็นต้องมีการกำหนดค่าต่อไปนี้

app_root / android / build.gradle

minSdkVersion จะต้องมีขนาดใหญ่กว่าหรือเท่ากับ 18 เพื่อให้เป็นไปตามข้อกำหนดของ UI Automator

app_root / android / app / build.gradle

แก้ไขdependenciesดังนี้

dependencies {
  ...
// fastlane screengrab
  androidTestImplementation "tools.fastlane:screengrab:2.0.0"
// Espresso dependencies
  androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0'
// Hamcrest library
  androidTestImplementation 'org.hamcrest:hamcrest-library:1.3'
    
  // Core library
  androidTestImplementation 'androidx.test:core:1.0.0'
    
  // AndroidJUnitRunner and JUnit Rules
  androidTestImplementation 'androidx.test:runner:1.1.0'
  androidTestImplementation 'androidx.test:rules:1.1.0'
}

ถัดไปแก้ไขdefaultConfigดังนี้

android {
  ...
  defaultConfig { 
      ...
      testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
  }
}

วาง config ต่อไปนี้ในไฟล์ manifest

<!-- Allows unlocking your device and activating its screen so UI tests can succeed -->
<uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<!-- Allows for storing and retrieving screenshots -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- Allows changing locales -->
<uses-permission android:name="android.permission.CHANGE_CONFIGURATION" />
<!-- Indicates the use of the clean status bar feature -->
<uses-feature android:name="tools.fastlane.screengrab.cleanstatusbar"/>
<!-- Allows for changing the status bar -->
<uses-permission android:name="android.permission.DUMP"/>

ควรสร้างไฟล์ทดสอบ UI ในพา ธ นี้

app_root/android/app/src/androidTest/java/ScreenshotTest.java

สังเกตว่าเราใช้onView(allOf(withContentDescription(id)))เพื่อจับส่วนประกอบที่มีidเป็นaccessibilityLabel. เราสะดุดเข้ากับการแก้ปัญหานี้ในบทความGergőNagygyörgyของ นี่เป็นขั้นตอนจากสวรรค์อย่างแท้จริงเนื่องจากวิธีการที่ระบุไว้ในเอกสารไม่ได้ผลสำหรับเรา

เพิ่ม accessibilityLabel ให้กับปุ่ม Dummy

วิธีการเขียนโปรแกรมจับภาพหน้าจอเป็นเช่นเดียวกับที่อธิบายไว้ในบทความก่อนหน้านี้ ในการทดสอบ UI ของ iOS TouchableHighlightสามารถจดจำได้ผ่านทางtestIDแต่ในการทดสอบ Android UI accessibilityLabelจะรู้จักเท่านั้น ซึ่งหมายความว่าตัวอย่างเช่นในการทำให้เทมเพลตที่แสดงด้านบนใช้งานได้เราต้องระบุaccessibilityLabel="some_api_query_button"ในปุ่มจำลอง

ตั้งค่า Fastfile เพื่อเรียกใช้ screengrab

ทำตามคำแนะนำในเอกสารประกอบเพื่อสร้างช่องทางสกรีนช็อต โปรดสังเกตว่าเราต้องสร้าง APK สองรายการสำหรับscreengrabหนึ่งคือดีบักและ AndroidTest อื่น ๆ หากมีการแก้ไขโค้ด React Native จะต้องสร้างทั้งสองบิวด์ใหม่เพื่อแสดงถึงการเปลี่ยนแปลง หากScreenshotTest.javaเป็นไฟล์เดียวที่แก้ไขจะต้องสร้างเฉพาะรุ่น AndroidTest ขึ้นมาใหม่

ด้านล่างนี้คือเลนสกรีนช็อตของเรา เรายังใช้ในการกำหนดค่าScreengrabfile screengrabสำหรับรายละเอียดโปรดดูเอกสาร

desc 'Produce screenshots via screengrab'
lane :screenshots do
  gradle(task: 'clean', project_dir: 'android/')
  gradle(
    task: 'assemble',
    build_type: 'Debug',
    project_dir: 'android/',
  )
  gradle(
    task: 'assemble',
    build_type: 'AndroidTest',
    project_dir: 'android/',
  )
  screengrab
end

screengrabกำหนดให้ทั้งเมโทรบันเลอร์ (เช่นnpx react-native start) และโปรแกรมจำลองอุปกรณ์ Android ที่ต้องการจะทำงานเมื่อมีการจับภาพหน้าจอ screengrabน่าแปลกที่ทั้งสองจะไม่ได้ปั่นขึ้นโดยอัตโนมัติโดย กล่าวอีกนัยหนึ่งเราจำเป็นต้องเริ่มต้นเมโทรบันเลอร์และโปรแกรมจำลองอุปกรณ์ด้วยตนเองก่อนที่จะรันนิ่งscreengrabหรือเขียนสคริปต์เพื่อเริ่มFastfileใช้งาน ข้อดีอย่างหนึ่งของการมีโปรแกรมจำลองอุปกรณ์คือเราสามารถสังเกตได้แบบเรียลไทม์ว่าScreenshotTest.javaมีการดำเนินการอย่างไร

สรุป

เราได้นำเสนอประสบการณ์ของเราในการทำงานกับfastlane screengrabแอป React Native โดยรวมแล้วมันน่ารำคาญน้อยกว่าfastlane snapshotแต่ก็ยังมีอุปสรรคมากมายให้ข้ามผ่าน ส่วนที่เราคิดว่าเอกสารที่มีอยู่ไม่ชัดเจน ได้แก่ :

1. โค้ดเนทีฟที่ตั้งค่าสำหรับการทดสอบ UI
2. วิธีการจับส่วนประกอบเนทีฟตอบสนองระหว่างการทดสอบ UI