Pengantar Pengujian iOS Dengan Otomasi UI

Bayangkan bisa menulis skrip yang secara otomatis berinteraksi dengan aplikasi iOS Anda dan dapat memverifikasi hasilnya. Dengan Otomasi UI Anda bisa. Otomasi UI adalah alat yang disediakan oleh Apple untuk melakukan pengujian tingkat tinggi pada aplikasi iOS Anda di luar apa pun yang dapat dicapai dengan XCTest.

1. Kotak Putih versus Pengujian Kotak Hitam

Anda mungkin telah mendengar perbandingan pengujian kotak putih versus pengujian kotak hitam berkaitan dengan bagaimana seseorang dapat menguji suatu perangkat lunak. Jika Anda tidak akrab dengan konsep-konsep ini, izinkan saya menjelaskan cara kerjanya.

Pengujian Kotak Putih

Bayangkan ada perangkat lunak yang berjalan di dalam kotak. Dengan pengujian kotak putih, Anda dapat melihat di dalam kotak dan melihat semua potongan kasar tentang bagaimana perangkat lunak bekerja, dan kemudian membuat keputusan yang mendidik tentang cara menguji perangkat lunak. Anda juga dapat memiliki hook level yang lebih dalam ke perangkat lunak dari tes yang Anda tulis.

Pengujian unit adalah pengujian kotak putih. Saat menulis tes unit, penguji memiliki akses halus ke kode yang sedang diuji. Penguji dapat benar-benar menulis tes yang memanfaatkan perangkat lunak yang diuji pada metode, atau unit, level.

Dalam pengembangan perangkat lunak iOS kami menggunakan kerangka XCTest untuk melakukan pengujian jenis ini. Silahkan lihat tutorial lain yang saya tulis tentang memulai dengan XCTest.

Pengujian Black Box

Dalam pengujian kotak hitam, kotak itu buram. Penguji tidak bisa melihat di dalam kotak. Penguji tidak dapat mengakses dan tidak tahu tentang penerapan basis kode untuk menulis tes. Sebaliknya, penguji dipaksa untuk menggunakan aplikasi sebagai pengguna akhir dengan berinteraksi dengan aplikasi dan menunggu tanggapannya, memverifikasi hasilnya.

Setidaknya ada dua cara untuk mengeksekusi jenis pengujian ini.

• Penguji yang berulang kali dan secara manual melakukan sejumlah langkah yang telah ditentukan dan secara visual memverifikasi hasilnya.
• Gunakan alat khusus untuk menguji aplikasi dengan API yang berperilaku serupa dengan bagaimana manusia berinteraksi.

Dalam pengembangan aplikasi iOS, Apple menyediakan alat yang disebut Otomasi UI untuk melakukan pengujian kotak hitam.

2. Apa itu Otomasi UI?

Otomasi UI adalah alat yang Apple sediakan dan pertahankan untuk pengujian aplikasi iOS tingkat atas, otomatis, dan lebih tinggi. Tes ditulis dalam JavaScript, mengikuti API yang didefinisikan oleh Apple.

Tes menulis dapat dibuat lebih mudah dengan mengandalkan label aksesibilitas untuk elemen antarmuka pengguna di aplikasi Anda. Namun jangan khawatir, jika Anda tidak memilikinya, ada alternatif yang tersedia.

The UI Automation API lacks the typical xUnit based format for writing tests. One difference with unit testing is that the tester needs to manually log success and failures. Tes Otomasi UI dijalankan dari instrumen Otomatisasi dalam alat Instrumen yang dilengkapi dengan alat pengembang Apple. Tes dapat dijalankan di Simulator iOS atau pada perangkat fisik.

3. Menulis Tes Otomasi UI

Langkah 1: Buka Proyek Sampel

Saya telah memperbarui proyek contoh yang digunakan dalam tutorial sebelumnya pada pengujian iOS dengan beberapa elemen antarmuka pengguna tambahan yang menyediakan beberapa kait berguna untuk menambahkan pengujian Otomasi UI. Unduh proyek dari GitHub. Buka proyek dan jalankan aplikasi untuk memastikan semuanya bekerja seperti yang diharapkan. Anda harus melihat antarmuka pengguna yang serupa dengan yang ditunjukkan di bawah ini.

Sebelum kami menulis tes apa pun, jangan ragu untuk mencoba aplikasi sampel agar terbiasa dengan fungsinya. Sebagai pengguna, Anda dapat memasukkan teks di bidang teks dan ketuk tombol untuk melihat label di layar yang menampilkan string yang dikembalikan dan dimasukkan.

Langkah 2: Buat Tes Otomasi UI

Sekarang setelah Anda terbiasa dengan aplikasi sampel, saatnya untuk menambahkan tes Otomasi UI. Otomasi UI adalah alat yang dapat ditemukan di Instrumen. Untuk menjalankan aplikasi contoh di Instrumen, pilih Produk> Profil dari menu Xcode. Pilih Otomasi dari daftar alat.

Jendela Instrumen utama akan terbuka dengan instrumen tunggal yang siap dijalankan, instrumen Otomatisasi (instrumen Otomatisasi menjalankan kasus uji Otomatisasi UI). Anda juga akan melihat area di bagian bawah jendela yang terlihat seperti editor teks. Ini adalah editor skrip. Di sinilah Anda akan menulis tes Otomasi UI Anda. Untuk tes pertama ini, ikuti petunjuk di bawah ini, tambahkan setiap baris ke skrip di editor skrip.

Mulai dengan menyimpan referensi ke bidang teks dalam variabel.

1

var inputField = target.frontMostApp().mainWindow().textFields()["Input Field”];

Setel nilai bidang teks.

1

inputField.setValue("hi”);

Verifikasi bahwa nilai berhasil ditetapkan dan, jika sudah, lulus tes. Gagal tes jika tidak.

1

if (inputField.value() != "hi") UIALogger.logFail("The Input Field was NOT able to be set with the string!");

2

else UIALogger.logPass("The Input Field was able to be set with the string!");

Sementara tes ini cukup sepele, itu memang memiliki nilai. Kami baru saja menulis tes yang menguji keberadaan bidang teks saat aplikasi diluncurkan dan menguji apakah string acak dapat ditetapkan sebagai nilai bidang teks. Jika Anda tidak mempercayai saya, hapus bidang teks dari papan cerita dan jalankan pengujian. Anda akan melihat bahwa itu gagal.

Tes ini menunjukkan tiga bagian penting dari penulisan tes Otomasi UI. Pertama, ini menunjukkan kepada Anda bagaimana mengakses elemen antarmuka pengguna sederhana, bidang teks. Secara khusus, kami mengakses kamus dari semua bidang teks pada tampilan dasar aplikasi melalui target.frontMostApp (). MainWindow (). TextFields () dan kami kemudian menemukan bidang teks yang kami minati dengan mencari satu dengan kunci Input Field. Kunci ini sebenarnya adalah label aksesibilitas bidang teks. Dalam hal ini, itu didefinisikan di papan cerita. Kami juga dapat mengatur label aksesibilitas dalam kode menggunakan properti accessibilityLabel di NSObject.

Mengakses jendela utama aplikasi, aplikasi paling depan, dan target umum ketika bekerja dengan Otomasi UI. Saya akan menunjukkan kepada Anda bagaimana membuat ini lebih mudah dan kurang verbose nanti dalam tutorial ini.

Kedua, ini menunjukkan kepada Anda bahwa Anda dapat berinteraksi dengan elemen antarmuka pengguna di layar. Dalam hal ini, kami menetapkan nilai bidang teks, meniru pengguna yang berinteraksi dengan aplikasi dengan memasukkan teks ke dalam bidang teks.

Dan ketiga, contoh ini juga menunjukkan teknik untuk memverifikasi apa yang terjadi dalam aplikasi. Jika nilai berhasil ditetapkan, tes dilewati. Jika nilai tidak disetel, pengujian gagal.

Langkah 3: Menyimpan Tes

Saat menulis tes di editor skrip praktis, cepat menjadi rumit dan sulit dikelola. Jika Anda keluar dari Instrumen, semua perubahan yang belum disimpan akan dibuang. Kita perlu menyimpan tes yang kita tulis. Cukup salin dan tempel tes Anda ke dalam dokumen baru di editor teks favorit Anda dan simpanlah. Anda dapat menemukan tes yang dibuat dalam tutorial ini dalam proyek sampel di bawah Jumblify / JumblifyTests / AutomationTests.js.

Untuk menjalankan tes, pilih tab tengah di panel sebelah kanan, di sebelah editor skrip, dan pilih Tambah> Impor.

Anda akan diminta untuk memilih skrip untuk diimpor. Arahkan ke skrip yang disimpan dan impor. Anda masih dapat mengubah skrip di editor skrip. Perubahan apa pun akan disimpan secara otomatis di file eksternal yang Anda buat.

Langkah 4: Ketuk Tombol

Mari perbarui uji kami untuk menguji interaksi dengan tombol. Pengujian kami sudah menambahkan teks ke bidang teks sehingga kami hanya perlu menambahkan kode untuk mengetuk tombol. Pertama mari kita pikirkan bagaimana menemukan tombol di tampilan sehingga dapat disadap. Setidaknya ada tiga cara untuk mencapai hal ini dan setiap pendekatan memiliki pengorbanannya.

Pendekatan 1

Kami dapat secara terprogram mengetuk koordinat (X, Y) di layar. Kami melakukan ini dengan baris kode berikut:

1

target.tap({x: 8.00, y: 50.00});

Tentu saja, saya tidak tahu apakah itu bahkan koordinat tombol di layar dan saya tidak akan khawatir tentang itu, karena pendekatan ini bukan alat yang tepat untuk pekerjaan ini. Saya hanya menyebutkannya sehingga Anda tahu itu ada. Menggunakan metode tap pada target untuk mengetuk tombol adalah kesalahan-rawan, karena tombol itu mungkin tidak selalu berada pada koordinat tertentu.

Pendekatan 2

Anda juga dapat menemukan tombol dengan mencari susunan tombol pada jendela utama, serupa dengan cara kami mengakses bidang teks di tes pertama. Alih-alih mengakses tombol secara langsung menggunakan kunci, kita dapat mengambil serangkaian tombol pada jendela utama dan kode hard array index untuk mendapatkan referensi ke tombol.

1

target.frontMostApp().mainWindow().buttons()[0].tap();

Pendekatan ini sedikit lebih baik. Kami tidak mengode-kan koordinat, tetapi kami membuat kode array untuk menemukan tombolnya. Jika kita menambahkan tombol lain di halaman, itu mungkin secara tidak sengaja merusak tes ini.

Pendekatan 3

Ini membawa saya ke cara ketiga untuk menemukan tombol di halaman, menggunakan label aksesibilitas. Dengan menggunakan label aksesibilitas, kita bisa langsung mengakses tombol hanya suka kita akan menemukan objek dalam kamus menggunakan kunci.

1

target.frontMostApp().mainWindow().buttons()["Jumblify Button"].tap();

Namun, jika Anda menambahkan baris di atas ke skrip dan menjalankannya, Anda akan mendapatkan kesalahan.

Ini karena kami belum menentukan label aksesibilitas untuk tombol tersebut. Untuk melakukan itu, buka Xcode dan buka storyboard proyek. Temukan tombol di tampilan dan buka Inspektur Identitas di sebelah kanan (View> Utilities> Identity Inspector). Pastikan bahwa Aksesibilitas diaktifkan dan tetapkan Label untuk tombol ke Jumblify Button.

Untuk menjalankan tes lagi, Anda harus menjalankan aplikasi dari Xcode dengan memilih Product> Run dan kemudian profil aplikasi lagi dengan memilih Product> Profile. Ini menjalankan tes dan setiap tes harus lulus sekarang.

Langkah 5: Periksa String Campur

Seperti yang saya sebutkan sebelumnya, aplikasi kami mengambil string teks sebagai input, dan ketika pengguna mengetuk tombol, menampilkan string terbalik. Kita perlu menambahkan satu tes lagi untuk memverifikasi bahwa string input dibalik dengan benar. Untuk memverifikasi bahwa UILabel diisi dengan string yang benar, kita perlu mencari tahu bagaimana mereferensikan UILabel dan memverifikasi string yang ditampilkannya. Ini adalah masalah umum ketika menulis tes otomatisasi, yaitu mencari tahu cara mereferensikan elemen dalam aplikasi untuk membuat pernyataan di atasnya.

Ada metode di hampir setiap objek di UI Otomasi API, logElementTree. Metode ini mencatat elemen bertingkat dari elemen yang diberikan. Ini sangat berguna untuk memahami hierarki elemen dalam aplikasi dan membantu untuk mencari tahu cara menargetkan elemen tertentu.

Mari kita lihat bagaimana ini bekerja dengan menebang pohon elemen dari jendela utama. Lihatlah baris kode berikut.

1

target.frontMostApp().mainWindow().logElementTree();

Menambahkan baris ini ke hasil skrip uji dalam output berikut:

Seperti yang Anda lihat, ada sub-elemen UIAStaticText dari UIAWindow dan Anda juga dapat melihat bahwa itu memiliki nama ih, yang juga merupakan string terbalik yang perlu kami verifikasi. Sekarang, untuk menyelesaikan pengujian kami, kami hanya perlu menambahkan kode untuk mengakses elemen ini dan memverifikasi bahwa itu ada.

Mengapa kita hanya perlu memverifikasi jika elemen UIAStaticText hadir? Karena nama elemen adalah string string input terbalik, memverifikasi kehadirannya menegaskan bahwa string dibalik dengan benar. Jika elemen tidak ada ketika direferensikan oleh nama - string terbalik - maka itu berarti string tidak terbalik dengan benar.

1

var stringResult = target.frontMostApp().mainWindow().staticTexts()["ih"];

2

if (! stringResult.isValid()) UIALogger.logFail("The output text was NOT set with the correctly reversed string!");

3

else UIALogger.logPass("The output text was set with the correctly reversed string!");

4. Menggaruk Permukaan

Ada banyak cara lain sehingga pengguna akhir dapat berinteraksi dengan perangkat iOS saat menggunakan aplikasi Anda. Ini berarti ada banyak cara lain yang dapat Anda gunakan Otomasi UI untuk mensimulasikan interaksi ini. Daripada mencoba untuk menangkap daftar lengkap dari interaksi ini, saya akan mengarahkan Anda ke dokumentasi referensi Otomasi UI.

Untuk setiap jenis objek yang dapat Anda gunakan untuk berinteraksi, Anda dapat melihat daftar metode yang tersedia di objek tersebut. Beberapa metode adalah untuk mengambil atribut tentang objek sementara yang lain untuk mensimulasikan interaksi sentuhan, seperti flickInsideWithOptions di UIAWindow.

Rekaman

Ketika Anda mencoba untuk menguji aplikasi yang lebih banyak dan lebih rumit dengan Otomatisasi UI, Anda akan menemukan bahwa kadang-kadang cukup membosankan untuk berulang kali menggunakan logElementTree untuk menemukan elemen yang Anda cari. Ini juga menjadi membosankan dan rumit untuk aplikasi dengan hierarki tampilan kompleks atau navigasi. Dalam kasus ini, Anda dapat menggunakan fitur Instrumen lain untuk mencatat serangkaian interaksi pengguna. Yang lebih keren lagi adalah Instrumen menghasilkan kode JavaScript Automasi UI yang diperlukan untuk mereproduksi interaksi yang direkam. Inilah cara Anda dapat mencobanya sendiri.

Dalam Instrumen dan dengan instrumen Otomatisasi yang dipilih, cari tombol rekam di bagian bawah jendela.

Jika Anda mengklik tombol rekam, Instrumen akan memulai sesi rekaman seperti yang ditunjukkan pada gambar di bawah.

Instrumen akan meluncurkan aplikasi Anda di Simulator iOS dan Anda akan dapat berinteraksi dengannya. Instrumen akan menghasilkan skrip berdasarkan interaksi Anda dalam waktu nyata. Cobalah. Putar Simulator iOS, ketuk di lokasi acak, lakukan gerakan menggesek, dll. Ini adalah cara yang sangat berguna untuk membantu menjelajahi kemungkinan Otomasi UI.

Menghindari Basis Kode Monolitik

Seperti yang Anda mungkin dapat meramalkan, jika kami terus menambahkan lebih banyak tes ke file tes yang kami buat dengan metode yang sama, itu akan cepat menjadi sulit untuk dipertahankan. Apa yang bisa kita lakukan untuk mencegah hal itu terjadi. Dalam pengujian saya, saya melakukan dua hal untuk menyelesaikan masalah ini:

• Satu tes untuk satu fungsi: Ini menyiratkan bahwa tes yang kita tulis perlu difokuskan pada bagian fungsional tertentu. Saya bahkan akan memberikan nama yang tepat, seperti testEmptyInputField.
• Kelompokkan pengujian terkait dalam satu file: Saya juga mengelompokkan pengujian terkait dalam file yang sama. Ini membuat kode dalam satu file dikelola. Ini juga mempermudah pengujian berbagai fungsi terpisah dengan menjalankan pengujian dalam file tertentu. Selain itu, Anda dapat membuat skrip master tempat Anda memanggil fungsi atau tes yang telah Anda kelompokkan dalam file pengujian lainnya.

Dalam cuplikan kode berikut, kita mengimpor file JavaScript dan ini membuat fungsi dalam file JavaScript itu tersedia bagi kita.

1

#import “OtherTests.js”

Kesimpulan

Dalam tutorial ini, Anda telah mempelajari nilai pengujian tingkat yang lebih tinggi dan bagaimana Otomasi UI dapat membantu mengisi celah itu. Ini adalah alat lain di kotak peralatan Anda untuk membantu memastikan Anda mengirimkan aplikasi yang andal dan kuat.

Referensi

Referensi JavaScript Otomatisasi UI