Melakukan Inspect Element

Sebagai seorang QA atau Testing Engineer, bahwa untuk web atau mobile testing, kita memerlukan operasi-operasi seperti klik, ketik, dll pada elemen website atau mobile. Saat kita akan melakukan automation testing, software automation juga harus mampu melakukan operasi-operasi yang sama pada elemen website atau mobile yang dapat dilakukan oleh manusia. Jadi, sekarang pertanyaannya adalah, bagaimana software automation ini mengidentifikasi elemen website atau mobile mana yang dibutuhkan untuk melakukan operasi tertentu? Jawabannya adalah melalui locators.

Locators

Locator adalah cara untuk mengidentifikasi elemen website atau mobile dan hampir semua tool atau software automation menyediakan kemampuan untuk menggunakan locator untuk mengidentifikasi elemen website atau mobile.

Selenium Locator

Berikut beberapa locator Selenium:

Locators	Deskripsi
`class name`	Mencari elemen web berdasarkan atribut `class` yang dicari. Tidak bisa mencari elemen dengan nama `class` yang digabung. Contoh: `<input type="text" class="showVisited">` `findElement(By.class('showVisited'))` `findElement(By.className('showVisited'))`
`css selector`	Mencari elemen web berdasarkan CSS selector yang dicari. Contoh: `<input type="text" id="blue">` `findElement(By.cssSelector('input[id="blue"]'))`
`id`	Mencari elemen web berdasarkan atribut `id` yang dicari. Contoh: `<input type="text" id="username">` `findElement(By.id('username'))`
`name`	Mencari elemen web berdasarkan atribut `name` yang dicari. Contoh: `<input type="text" name="username">` `findElement(By.name('username'))`
`link text`	Mencari elemen web yang berbentuk link dengan teks sama dengan yang dicari. Contoh: `<a href="#">HOME</a>` `findElement(By.linkText('HOME'))`
`partial link text`	Mencari elemen web yang berbentuk link dengan teks berisi yang dicari. Contoh: `<a href="#">HOMEPAGE</a>` `findElement(By.partialLinkText('HOME'))`
`tag name`	Mencari elemen web berdasarkan tag. Contoh: `<select>` `<option>Pilihan 1</option>` `</select>` `findElement(By.tagName('option'))`
`xpath`	Mencari elemen web berdasarkan DOM dimana elemen yang dicari itu berada. Contoh: `<html>` `<head>` `<title>Homepage</title>` `</head>` `<body>` `<h1>Hello World</h1>` `</body>` `</html>` `findElement(By.xpath('/html/body/h1'))`

Appium Locator

Berikut beberapa locator Appium:

Locators	Deskripsi
`Accessibility ID`	Mencari elemen mobile berdasarkan `content-desc`.
`Class Name`	Mencari elemen mobile berdasarkan UIAutomator2 class.
`id`	Mencari elemen mobile berdasarkan `resource-id`.
`name`	Mencari elemen mobile berdasarkan nama elemen.
`xpath`	Mencari elemen mobile berdasarkan hierarki XML (“DOM” mobile).
`image`	Mencari element mobile berdasarkan file base64 image.

Inspect Element

Inspect element adalah proses mencari locator, dimana kita akan gunakan untuk melakukan automation. Seperti yang sudah dijelaskan di atas, locator ini membuat tool atau software automation melakukan interaksi seperti yang manusia lakukan (klik, ketik, dst).

a. Website dengan Inspect Elements

Untuk mencari locator pada elemen website, cukup mudah dan sederhana caranya, langkahnya adalah sebagai berikut:

Jalankan browser dan buka website
Klik kanan elemen yang akan dicari locator-nya.
Klik Inpect.
Akan muncul bagian baru pada browser yang digunakan.
Cari locator yang ada pada elemen tersebut.
Masukkan locator beserta value-nya pada kode automation.

Dari element menu Our Passion di atas, locator yang dapat digunakan adalah locator Link Text dengan value Our Passion.

findElement(By.linkText('Our Passion'))

b. Mobile app dengan Macaca

Untuk mencari locator pada elemen mobile, sejauh yang pernah saya lakukan, kita dapat menggunakan 2 tools, Macaca dan UIAutomator Viewer.

Untuk menggunakan Macaca, maka di komputer harus ter-install Node Package Manager (NPM), untuk dapat menggunakan NPM, maka harus install Node.js terlebih dahulu. Untuk mengunduh Node.js di sini.

Setelah mengunduh dan menginstall Node.js, tahap berikutnya adalah meng-install Macaca melalui NPM dengan langkah sebagai berikut:

Jalankan terminal/command prompt.
Ketik npm install macaca-cli -g
Tekan Enter dan tunggu prosesnya hingga selesai
Ketik macaca doctor
Tekan Enter dan tunggu prosesnya hingga selesai
macaca doctor untuk memeriksa dependency yang diperlukan
Ketik npm install app-inspector -g
Tekan Enter dan tunggu prosesnya hingga selesai.

Untuk menggunakan Macaca:

Hubungkan device Android (atau emulator ) ke komputer
Jalankan aplikasi yang akan di-inspect elemennya
Jalankan terminal/command prompt.
Ketik adb devices
Tekan Enter
Ingat atau catat device id yang tampil.
Ketik app-inspector -u <device id step 5>
Contoh: app-inspector -u emulator-5554
Tekan Enter

Dari elemen yang di-inspect (tab For You) maka didapat locator resource-id.

findElement(By.id('com.android.vending:id/0_resource_name_obfuscated'))

c. Mobile app dengan UIAutomator Viewer

Untuk mencari locator pada elemen mobile, sejauh yang pernah saya lakukan, kita dapat menggunakan 2 tools, Macaca dan UIAutomator Viewer.

Untuk menggunakan UIAutomator Viewer, maka di komputer harus ter-install:

Setelah mengunduh dan menginstall JDK dan Android SDK, tahap berikutnya adalah melakukan pengaturan environment, cara melakukan environment variable untuk JDK dan Android SDK dapat membaca artikel sebelumnya di sini.

Jika tahapan di atas sudah dilakukan, maka untuk menjalankan UIAutomator Viewer adalah sebagai berikut:

Hubungkan device Android (atau emulator ) ke komputer
Jalankan aplikasi yang akan di-inspect elemennya
Jalankan terminal/command prompt.
Ketik adb devices
Tekan Enter
Ingat atau catat device id yang tampil.
Ketik uiautomatorviewer
Tekan Enter
Klik icon scanner di sebelah kiri atas (icon hp android warna hijau)