Cara Membuat UI Automation Testing pada Aplikasi iOS dan SwiftUI dengan Menggunakan XCTest (Apple Native Framework)
Seringkali dalam mengembangkan aplikasi, developer mengabaikan pembuatan test. Entah itu Unit Test atau User Inteface (UI) Test. Hal ini terjadi mungkin karna budget perusahaan yang terbatas, membuang waktu developer dan membutuhkan waktu untuk belajar. Atau adanya tekanan dari sisi team produk supaya bisa cepat merilis aplikasi ke pengguna.
Padahal UI Test merupkan investasi untuk masa depan. Seiring berjalanannya waktu fitur aplikasi kita akan semakin banyak. Quality Assurance (QA) akan terus melakukan testing, memastikan tidak ada bugs sebelum aplikasi release ke pengguna. Untuk perusahan yang sudah memikirkan produktifitas ini merupakan sebuah masalah yang harus di selesaikan. Salah satunya dengan menggunakan UI Testing.
Pada artikel kali ini saya akan membahas tentang cara membuat UI Testing di iOS. Saya menggunakan SwiftUI untuk membuat sample aplikasi dan XCTest Untuk membuat UI Test casenya.
Apa Itu UI Test?
“Make sure that your app’s user interface behaves correctly when expected actions are performed.”
Apple Documentation
Mengutip dari dokumentasi apple, tentu saja kita ingin memastikan bahwa tampilan dan behavior aplikasi yang kita bangun sudah sesuai dengan yang kita harapkan. Contohnya ketika pengguna berinteraksi dengan sebuah tombol akan menampilkan sebuah pesan, ketika pengguna mengetik pada sebuah text field dan lain sebagainya.
Contoh kasus yang lebih besar, kita bisa saja melakukan pengujian pada user flow. Contohnya ketika didalam sebuah aplikasi ada flow pencarian produk, menambah ke keranjang belanja, checkout, pembayaran dan lain sebagainya. Kita bisa memastikan bahwa flow tersebut berjalan dengan benar dengan menggunakan UI Test. Menarik Bukan😁
Apa Manfaat UI Test?
Meski untuk membuat UI Test kita membutuhkan waktu, tenaga dan tentu saja biaya. Akan tetapi ibarat investasi, UI Test akan memberikan manfaat yang luar biasa kedepanya. Berikut keuntungan yang bisa kita dapatkan apabila kita membuat UI Test pada sebuah aplikasi.
Mengurangi bug atau defect, bahkan sebelum aplikasi kita diserahkan ke QA. Sehingga developer dapat melakukan perbaikan lebih cepat.
Mengurangi Beban QA untuk melakukan manual testing. Hal ini tentu akan sangat berguna untuk menaikan produktifitas QA, sehingga QA akan punya waktu lebih untuk melakukan hal-hal yang lebih bermakna.
Menambah kepercayaan diri pada saat refactoring sebuah kode. Sama seperti Unit Test, UI Test akan menjadi gate bahwa kode yang kita improve tidak merusak flow user yang ada.
Apa Saja Framework yang Bisa diGunakan Untuk Membuat UI Test di iOS?
Banyak framework di luar sana baik gratis atau berbayar yang bisa membantu kita untuk melakukan UI Test di aplikasi iOS. Bahkan beberapa framework bisa bekerja untuk multi platform seperti iOS dan Android sekaligus. Berikut ini framework / tools yang bisa digunakan untuk membuat UI atomation testing pada aplikasi iOS.
Katalon (https://katalon.com/)
Apium (https://appium.io/)
Maestro (https://maestro.mobile.dev/)
Pada artikel kali ini saya hanya akan membahas lebih dalam tentang UI Testing di iOS dengan menggunakan XCTest.
Sample Projek Aplikasi iOS untuk UI Test
Untuk melakukan UI Testing tentunya kita memerlukan sebuah aplikasi sebagai bahan percobaan. Sample projek yang akan kita buat berupa sebuah aplikasi iOS yang berisi list mobil sederhana. Apabila item pada list tersebut ditekan akan menampilkan halaman detail.
1. Buat perojek baru dengan interface SwiftUI dan pastikan include tests dicentang.
2. Buat struct Car sebagai data model sebuah mobil.
Di dalam sebuah mobil terdapat random ID, brand dan model.
struct Car: Identifiable {
var id = UUID()
var brand: String
var model: String
}3. Buat struct Identifiers berisi kumpulan accessibility identifier.
struct Identifiers {
struct Lists {
static let CAR = "CAR"
}
struct Images {
static let CAR = "CAR IMAGES"
}
struct Text {
static let CAR_DESCRIPTION = "CAR DESCRIPTION"
}
struct NavigationBars {
static let CAR_DETAILS = "CAR DETAILS"
}
}4. Buat sebuah UI component untuk menampilkan sebuah mobil.
Di dalamnya kita akan menampilkan 2 Text yaitu brand dan model.
import SwiftUI
struct CarUIView: View {
let car: Car
var body: some View {
VStack(alignment: .leading) {
Text(car.brand).font(.headline)
Text(car.model).font(.subheadline)
}
}
}5. Buat Sebuah halaman yang berisi list mobil.
Untuk membuat sebuah list kita cukup menggunakan komponen List. Di dalam List tersebut terdapat komponent CarUIView yang sudah kita buat sebelumnya.
Jangan lupa untuk menambahkan accessibility identifier untuk mempermudah kita dalam membuat UI Test.
import SwiftUI
struct CarListScreen: View {
@State var cars = [
Car(brand: "BMW",
model: "BMW Z4 Roadster"),
Car(brand: "BMW",
model: "BMW i7"),
Car(brand: "BMW",
model: "BMW i5"),
Car(brand: "BMW",
model: "BMW i4"),
Car(brand: "Tesla",
model: "Tesla Model 3"),
]
var body: some View {
NavigationView {
List(cars) { car in
NavigationLink(destination: CarDetailsScreen(car: car)) {
CarUIView(car: car)
}
.accessibilityIdentifier(car.model)
}
.accessibilityIdentifier(Identifiers.Lists.CAR)
.navigationBarTitle("Car List", displayMode: .automatic)
}
}
}
#Preview {
CarListScreen()
}7. Buat halaman detail mobil.
Di dalam halaman detail kita cukup menampilkan gambar mobil dan sebuah deskripsi berupa model mobil. Jangan lupa menambahkan accessibility identifier pada komponen tersebut.
import SwiftUI
struct CarDetailsScreen: View {
let car: Car
var body: some View {
VStack {
Image(systemName: "car.fill")
.font(.system(size: 100))
.foregroundColor(.blue)
.accessibilityIdentifier(Identifiers.Images.CAR)
Text(car.model)
.font(.largeTitle)
.padding()
.accessibilityIdentifier(Identifiers.Text.CAR_DESCRIPTION)
}
.navigationBarTitle(car.brand, displayMode: .inline)
}
}8. Panggil halaman list mobil di main entry point aplikasi.
import SwiftUI
@main
struct UI_TestingApp: App {
var body: some Scene {
WindowGroup {
CarListScreen()
}
}
}9. Jalan aplikasi list mobil dan lihat hasilnya.
Membuat UI Test pada Sample Project dengan Menggunakan XCTest
Pada sample projek kita akan membuat UI Test untuk 2 skenario.
- Menguji apakah list mobil berhasil tampil di layar pengguna.
- Menguji setelah pengguna menekan salah satu item dari list mobil dan akan redirect ke halaman detail mobil.
import XCTest
final class UI_TestingUITests: XCTestCase {
var app: XCUIApplication!
override func setUpWithError() throws {
continueAfterFailure = false
app = XCUIApplication()
app.launch()
}
override func tearDownWithError() throws {
app = nil
}
func testCarListExist() throws {
// Assert the existence of the navigation bar with the title "Car List"
XCTAssertTrue(app.navigationBars["Car List"].exists)
let carList = app.collectionViews["CAR"]
// Assert the existence of car list
XCTAssertTrue(carList.exists, "The list car with Identifiers.Lists.CAR does not exist.")
XCTAssertTrue(carList.cells.count > 0, "The list should have not more than 0 items.")
}
func testRedirectToCarDetails() throws {
let carList = app.collectionViews["CAR"]
// Tapped on the first item
carList.cells.element(boundBy: 0).tap()
// Assert the existence of car image and description
XCTAssertTrue(app.images["CAR IMAGES"].exists)
XCTAssertTrue(app.staticTexts["CAR DESCRIPTION"].exists)
}
}Penjelasan kode:
- setupWithError() merupakan method yang akan selalu di panggil sebelum method test di jalankan.
- app.launch() method yang digunakan untuk menjalankan aplikasi.
- testCarListExist() merupakan method yang berisi pengujian apakah list mobil berhasil ditampilkan di layar pengguna dan isi listnya tidak kosong.
- testRedirectToCarDetails() merupakan method untuk pengujian menekan item pada list mobil dan menampilkan halaman details mobil. Kita mestikan bahwa gambar dan deskripsi muncul di layar user.
Notes: perhatikan bahwa disini saya menggunakan accessibility identifier yang telah kita daftarkan sebelumnya untuk mendapatkan komponen yang akan diuji.
Sekarang coba jalankan UI Testnya dan aplikasi akan berjalan dengan sendirinya yang menandakan pengujian sedang berjalan.
Lihat pada test navigator, akan muncul centang hijau yang mendakan test case sukses semua.
Kesimpulan
Seringkali dalam membangun sebuah aplikasi, developer mengabaikan UI Testing. Padahal sama seperti investasi, UI Testing akan membawa manfaat yang besar kedepannya dari sisi code quality, meminimalisir bug dan jangka panjang bisa meringankan pekerjaan QA.
Ada banyak cara untuk membuat UI Testing di iOS. Salah satunya adalah XCTest yang mana merupakan apple native framework. Cara menggunakanya cukup mudah. Pada intinya adalah bagaimana cara mendapatkan komponent yang ingin diuji, apa action pada komponen tersebut, dan hasil dari action tersebut kita validasi benar atau tidak.
Terimakasih teman-teman yang membaca sampai akhir. Semoga artikel ini memberi manfaat pada teman-teman semua. Sampai jumpa di artikel berikutnya 👋
Jangan lupa clapped apabila artikel ini bermanfat dan follow medium saya untuk mendapatkan tutorial, tips dan tricks terkait iOS atau mobile development lainnya.
Happy coding! 😊
