Saat menyusun skrip untuk menjalankan test case secara otomatis, maupun membuat skrip dengan bantuan tools seperti Katalon atau Selenium, hal pertama yang dilakukan seorang QA adalah menentukan element web yang tepat. Skrip yang disusun harus dapat menjalankan suatu perintah spesifik pada element tersebut seperti klik, ketik, dll. Proses menentukan element web dapat menjadi rumit jika hanya mengandalkan penggunaan atribut id, name, ataupun class pada web element. Oleh karena itu digunakan selector (locator), yakni sebuah kata kunci yang akan mencari dan mengembalikan element web.
Bagaimana peran selector? Apa keunggulan CSS selector?
Selector dapat mempengaruhi hasil dan kecepatan eksekusi saat tes otomatis dijalankan. Apabila selector dibuat kompleks atau mengandung element yang dinamis maka akan menyebabkan kegagalan sehingga QA harus kembali menentukan selector yang tepat. Hal ini tentunya dapat menurunkan efisiensi proses penyusunan skrip. Umumnya, terdapat dua jenis selector yang sering digunakan yakni, CSS selector dan Xpath. Dibandingkan Xpath, CSS selector memiliki beberapa keunggulan antara lain:
- Tingkat efisiensi lebih tinggi dan mengurangi waktu eksekusi tes
- Sederhana sehingga memudahkan keterbacaan
- Konsisten pada setiap browser
CSS selector umumnya juga digunakan untuk element yang mengalami perubahan seperti, muncul tooltip saat mouse diarahkan pada suatu tombol atau perubahan warna pada tombol. Namun demikian, CSS selector memiliki kelemahan yakni tidak bisa digunakan untuk menentukan element secara bolak-balik. Apa maksudnya? Mari kita pelajari lebih dalam beberapa metode untuk menghasilkan CSS selector.
Metode-Metode yang Digunakan untuk Menentukan CSS Selector
Pada dasarnya sintaks untuk menentukan CSS selector adalah sebagai berikut:
tagname[attribute=’value’]
- tagname adalah tag HTML dari element yang dicari
- attribute adalah nama atribut dari element yang dicari
- value adalah nilai dari atribut tersebut
Penulisan CSS selector selain menggunakan sintaks dasar di atas, juga dapat direpresentasikan dengan simbol-simbol tertentu seperti pada gambar di bawah.
Untuk menjelaskan deskripsi spesifik masing-masing metode di atas akan digunakan sebuah website demo online store yakni, https://www.saucedemo.com/.
A. Metode CSS selector dengan id
Pada gambar akan ditentukan CSS selector dari textbox Username dan terlampir hasil dari inspect element dari inputan Username tersebut mempunyai atribut class, placeholder, type, id, dll.
Untuk menetukan CSS selector dari atribut id menggunakan sintaks dasar seperti dijelaskan sebelumnya adalah:
input[id=’user-name’]
input merupakan tag HTML yang menampung atribut id yang memiliki value user-name. Atau secara sederhana dapat dipersingkat menggunakan simbol representatif dari atribut id, yakni simbol ‘#’ dengan penulisan sebagai berikut:
input#user-name
Sekilas struktur penulisan mirip dengan sintaks dasarnya namun, hanya menghilangkan tanda kurung siku ‘[]’ dan mengganti atribut id menjadi simbol #.
B. Metode CSS selector dengan class
Dengan menggunakan kasus yang sama yakni menentukan CSS locator dari textbox Username namun, kali ini akan menggunakan atribut class. Sintaks dasarnya akan menjadi seperti berikut:
input[class=’input_error form_input’]
sedangkan penulisan sederhana sebagai berikut:
input.input_error atau input.input_error.form_input
dalam hal ini penulisan class digantikan dengan tanda titik (.). Namun, dalam kasus class di atas terdapat spasi antara teks input_error dan form_input sehingga ada dua pilihan, penulisan hanya teks awal class sebelum tanda spasi atau kedua teks dengan syarat mengganti spasi dengan tanda titik.
C. Metode CSS selector dengan atribut lain
Selain menggunakan atribut id dan class, semua atribut yang ada pada tag HTML juga dapat digunakan untuk menentukan element dengan CSS selector selama atribut tersebut unik. Pada inspect element di atas terdapat beberapa atribut lain seperti, placeholder, type data-text, name. Namun, penulisan CSS selector dengan atribut lain tidak memiliki simbol representatif layaknya atribut id dan class sehingga penulisannya mengikuti sintaks dasar.
input[placeholder=’Username’]
Contoh, penulisan CSS selector menggunakan atribut placeholder.
D. Metode CSS selector dengan menggunakan hierarki
Kenyataannya, terdapat beberapa element yang tidak memiliki identitas spesifik atau identitas tersebut dinamis atau berubah-ubah sehingga harus ada strategi lain yang digunakan seperti metode hierarki ini. Terdapat dua jenis metode hierarki yang dapat digunakan pada ordered maupun unordered list:
a. Direct Child
Metode ini digunakan jika element yang dicari berada dalam suatu parent element dan kedudukannya langsung setelah parent element tersebut atau urutan pertama. Penulisannya disimbolkan dengan tanda “>” sintaksnya sebagai berikut:
parent_selector>direct_child_selector
div.form_group>input#user-name
atau
div.form_group>input[id=’user-name’]
Pada gambar inspect element di atas, terdapat parent tag yakni div yang memiliki satu direct child yakni input untuk textbox username. Oleh karena itu, CSS selector dari parent diikut oleh selector direct child seperti di atas. Penggunaan metode ini juga dapat diperpanjang pada subchild lain dengan menambahkan tanda “>” diikuti oleh selector lain.
b. Nth Child
Apabila ingin menetukan selector pada urutan tertentu dalam sebuah parent yang memiliki banyak child element dapat menggunakan metode ini. N berarti angka atau urutan dari list yang akan dipilih. Penulisan sintaks untuk metode ini sebagai berikut:
parent_selector child_html_tag:nth-of-type(index)
Contoh di atas akan ditentukan selector untuk div yang mengandung pesan error maka, CSS selector yang digunakan adalah:
form div:nth-of-type(3)
Tag div yang mengandung pesan error adalah div yang memiliki class error-message-container dan urutannya berada di posisi ke-3 dari parent “form”, oleh karena itu penulisan sintaks seperti tertera di atas.
Begitulah penggunaan metode hierarki untuk menentukan CSS locator, namun pada metode inilah ditemui kelemahan penggunaan CSS locator. Metode ini hanya bisa berjalan satu arah atau dalam artian, hanya bisa diperoleh CSS selector dari parent ke child. CSS selector tidak bisa menentukan dari arah berlawanan atau dari child ke parent.
E. Metode CSS selector dengan menggunakan text strings
Metode ini dapat menentukan CSS selector yang mengandung teks tertentu dengan representasi dari simbol yakni, “^” identifikasi untuk awalan teks, “$” identifikasi untuk akhiran teks, dan “*” identifikasi untuk substring. Sintaks dari masing-masing penggunaan tersebut adalah sebagai berikut:
html_tag[attribute^=’value’]
html_tag[attribute$=’value’]
html_tag[attribute*=’value’]
Pada gambar di atas akan ditentukan CSS selector dari login button dengan menerapkan ketiga sintaks di atas maka akan diperoleh CSS selector sebagai berikut:
input[id^=’logi’]
input[id$=’tton’]
input[id*=’in-but’]
dengan menggunakan simbol awalan, value yang dicantumkan hanya empat karakter dari awal teks sedangkan dengan simbol akhiran, hanya dicantumkan empat karakter terakhir dan simbol substring digunakan enam karakter pada bagian tengah value.
F. Metode CSS selector dengan kombinasi
Menghasilkan CSS selector dengan kombinasi bisa menjadi strategi yang kuat karena meningkatkan keunikan dari selector.
div.login_credentials[id*=’cred’]
Dalam contoh di atas ditentukan selector untuk tag div yang menampung kriteria “accepted usernames are:”. Selector yang tersedia di atas dapat diartikan sebagai, tag div dengan class “login_credentials” yang mempunyai id yang mengandung karakter “cred” di tengah teks.
Best Practice dalam Memilih Selector
Pada dasarnya, id adalah atribut yang unik pada suatu laman dan nilainya tetap walaupun laman terus menerus di-load sehingga id ideal untuk digunakan sebagai selector. Namun, ternyata tidak jarang juga ditemui kasus pengecualian yakni, dalam satu laman ada beberapa element yang menggunakan id sama. Terlebih ada juga id yang dinamis sehingga saat laman di-load ada beberapa bagian id yang berbeda sehingga seorang QA tidak bisa hanya mengandalkan id untuk menentukan selector. Ada beberapa hal yang harus diperhatikan saat memilih selector antara lain:
- Pastikan memilih element dengan atribut yang statik sehingga perlu adanya komunikasi dengan developer untuk memastikan hal tersebut atau seorang QA juga harus menganalisis dan menentukan mana yang akan berubah
- Gunakan fitur yang semantik daripada sintatik. Semantik memiliki arti fitur-fitur yang dapat dipahami oleh end user contohnya, dalam online store seorang user tidak akan mengamati tabel, link, atau blok kode namun, user lebih mencermati produk apa yang dijual, berapa harganya, dll. Itulah yang disebut dengan fitur semantik, secara teoritis selector yang menggunakan fitur semantik akan lebih unik
- Penggunaan selector kombinasi akan membuat hasil lebih spesifik, apabila ada beberapa element yang ada pada satu class yang sama maka, kombinasi adalah jalan keluar untuk membedakan tiap element tersebut. Namun, hindari menggunakan kombinasi secara berlebihan sehingga membuat selector menjadi panjang dan tidak efisien
Dalam menentukan CSS selector pada dasarnya harus dibuat unik, tepat, dan efisien.
Terima kasih telah membaca! Semoga bermanfaat
Salam, Penulis