Tidak diperlukan emulator untuk pengujian tangkapan layar Compose @Previews di CI | oleh David Vávra | Juli 2022

Tes tangkapan layar adalah cara paling efektif untuk menguji lapisan Tampilan Anda. Dan jika Anda menggunakan Compose, Anda sudah memilikinya — @Preview-metode beranotasi untuk Android Studio. Saya menunjukkan ini di artikel saya sebelumnya yang menunjukkan cara menghubungkan perpustakaan pengujian tangkapan layar Showkase & Facebook. Tetapi perpustakaan ini memiliki kelemahan — memerlukan instrumentasi (perangkat atau emulator) untuk dijalankan. Yang memperumit pengaturan pada CI dan menyebabkan kerapuhan. Pada artikel ini saya akan menunjukkan cara mengkonfigurasinya tanpa emulator, termasuk pengaturan CI.

Paparazi

Pengujian tangkapan layar tanpa emulator dimungkinkan dengan pustaka Paparazzi dari Square. Mereka menggunakan perender Android Studio untuk merender Tampilan dan Komposisi Android dalam pengujian unit reguler (folder “test”). Tidak perlu instrumentasi (folder “androidTest”). Ini berarti bahwa tes tangkapan layar selesai dalam detik bukannya menit. Anda dapat menggunakan mesin CI berbasis cloud termurah dan menghilangkan sakit kepala dengan menjalankan emulator Android di CI. Pustaka ini baru-baru ini mencapai versi stabil 1.0.0.

Jika Anda ingin menjalankan Paparazzi secara lokal, cukup gunakan dua tugas Gradle ini:

• ./gradlew recordPaparazziDebug menangkap semua tangkapan layar ke dalam folder “snapshots”
• ./gradlew verifyPaparazziDebug memverifikasi apakah tangkapan layar di folder “snapshots” cocok dan memberi tahu Anda mana yang berbeda

Integrasi Showcase

Saya sudah menjelaskan perpustakaan ini di artikel saya sebelumnya. Singkatnya, itu menangkap semua Anda @Preview-metode beranotasi dan membuatnya tersedia untuk pengujian tangkapan layar. Langsung ke contoh integrasi saya, jika Anda memerlukan detail lengkap.

Kelas ini adalah bagian utama dari integrasi Showkase-Paparazzi:

TestParameterInjector

Kelas menggunakan pustaka TestParameterInjector dari Google. Ini memungkinkan untuk membuat beberapa unit test dari satu @Test metode, yang sangat bagus untuk pengujian tangkapan layar. Contoh ini akan membuat tes tangkapan layar untuk setiap @Preview-metode beranotasi. Dan sebagai bonus, tangkapan layar untuk mode gelap & skala font 1,5! Ini dapat dengan mudah diperluas dengan berbagai lokal, ukuran layar, orientasi, dll.

integrasi CI

Anda ingin membandingkan tangkapan layar dengan setiap permintaan tarik. Anda dapat dengan cepat menangkap bug regresi bahkan sebelum menggabungkan PR. Namun saat Anda menambahkan atau memodifikasi fitur, perubahan tangkapan layar mungkin disengaja. Oleh karena itu, integrasi CI saya berfungsi seperti ini:

• Ini membandingkan tangkapan layar dengan yang sudah ada. Jika mereka sama, centangnya berwarna hijau.
• Jika berbeda, itu mendorong tangkapan layar yang berbeda ke cabang yang berbeda berdasarkan cabang PR.
• Ini memposting komentar ke PR dengan tautan untuk membandingkan dua cabang. GitHub melakukan pekerjaan yang cukup baik untuk menunjukkan perbedaan antara gambar.
• Jika perubahan itu disengaja, Anda cukup menggabungkan cabang kembali ke cabang PR. Jika tidak, Anda harus memperbaiki bug regresi.

Tindakan GitHub

Saya sangat menyukai GitHub Actions CI: integrasi GitHub yang mulus, gratis untuk proyek kecil, banyak Action buatan komunitas yang dapat Anda gunakan kembali. Jadi contoh saya adalah untuk Tindakan, tetapi prinsipnya sama untuk semua CI:

Lihat skrip bash untuk memproses tes tangkapan layar yang gagal. Dan lihat contoh permintaan tarik. Pemeriksaan ini hanya berjalan 2:43 menit. Dan sebagian besar waktu dihabiskan untuk membangun aplikasi.

Ringkasan

Saya menunjukkan kepada Anda cara mengintegrasikan perpustakaan Showkase dengan perpustakaan Paparazzi dan membuat tes tangkapan layar untuk semua Tulis Anda @Preview-metode beranotasi, termasuk mode gelap & skala font 1,5. Saya menunjukkan kepada Anda contoh integrasi Tindakan Github dengan alur kerja untuk menggabungkan perubahan yang disengaja dalam tangkapan layar. Semuanya berjalan dalam hitungan detik tanpa perlu emulator Android. Lihat repo GitHub untuk semua detailnya.

Saya percaya bahwa dengan penyiapan yang cepat & mudah ini, pengujian tangkapan layar dapat menjadi berguna dan tersebar luas seperti pengujian unit logika bisnis.