Pencari lokasi di Selenium

Apa itu Locator? Selenium?

Lokator adalah perintah yang mengarahkan Selenium IDE atau Selenium WebDriver akan mengarahkan pengguna ke elemen GUI yang benar, seperti kotak teks, tombol, tautan, atau kotak centang, tempat suatu tindakan harus dilakukan. Mengidentifikasi elemen GUI yang benar adalah prasyarat untuk membangun skrip otomatisasi yang andal. Namun, identifikasi yang akurat lebih menantang daripada yang terlihat. Terkadang, Anda mungkin berinteraksi dengan elemen yang salah, atau bahkan tidak berinteraksi dengan elemen sama sekali. Untuk mengatasi hal ini, Selenium Menawarkan berbagai strategi pencarian lokasi yang memungkinkan penargetan elemen GUI secara tepat.

Meskipun beberapa perintah, seperti perintah "buka", tidak memerlukan lokator, sebagian besar perintah lainnya memerlukannya. Selenium Perintah bergantung pada penunjuk elemen. Pilihan locator sangat bergantung pada Aplikasi yang Sedang Diuji (AUT) Anda. Dalam tutorial ini, kita akan bergantian antara Facebook dan Mercury Situs demo tur (newtours.demoaut), berdasarkan locator mana yang didukung oleh setiap aplikasi. Demikian pula, di situs Anda sendiri pengujian proyek, Anda akan memilih pencari elemen di Selenium WebDriver didasarkan pada struktur aplikasi Anda.

Menemukan berdasarkan ID

Ini adalah metode paling umum untuk menemukan elemen karena ID dimaksudkan untuk unik untuk setiap elemen di halaman. Kapan pun atribut ID ada, itu harus menjadi pilihan pertama Anda untuk skrip pengujian yang cepat, stabil, dan mudah dibaca.

Target Format: id=id elemen

Untuk contoh ini, kita akan menggunakan halaman demo Facebook karena... Mercury Tours tidak menggunakan atribut ID untuk kolom formulir utamanya.

Langkah 1) Gunakan halaman demo ini https://demo.guru99.com/test/facebook.html untuk pengujian. Periksa kotak teks “Email atau Telepon” menggunakan Alat Pengembang bawaan browser Anda (tekan F12 di Chrome, Edge, atau Firefox) dan catat ID-nya. Dalam hal ini, ID-nya adalah "email."

Langkah 2) Launch Selenium IDE dan masukkan “id=email” di Target kotak. Klik tombol Temukan dan perhatikan bahwa kotak teks “Email atau Telepon” disorot dengan warna kuning dan garis tepi hijau, yang menunjukkan bahwa Selenium IDE telah menemukan elemen tersebut dengan benar.

Menemukan berdasarkan Nama

Mencari elemen berdasarkan nama mirip dengan mencari berdasarkan ID, kecuali bahwa kita menggunakan “nama=” Gunakan awalan sebagai gantinya. Pendekatan ini berguna ketika elemen tidak memiliki ID tetapi memiliki atribut nama yang telah ditentukan.

Target Format: nama=nama elemen

Untuk demonstrasi berikut, kita akan menggunakan Mercury Tur karena semua elemen formulir penting di situs tersebut memiliki atribut nama.

Langkah 1) Navigasi ke https://demo.guru99.com/test/newtours/ dan gunakan Alat Pengembang browser untuk memeriksa kotak teks "Nama Pengguna". Perhatikan atribut namanya.

Di sini, nama elemennya adalah “userName”.

Langkah 2) In Selenium IDE, masukkan “nama=Namapengguna” di Target kotak dan klik tombol Temukan. Selenium IDE akan menemukan kotak teks Nama Pengguna dengan menyorotnya.

Cara Menemukan Elemen Berdasarkan Nama menggunakan Filter

Filter berguna ketika beberapa elemen memiliki atribut nama yang sama. Filter adalah atribut tambahan yang digunakan untuk membedakan elemen-elemen yang memiliki nama yang sama. Tanpa filter, Selenium Secara default hanya akan memilih elemen yang cocok pertama.

Target Format: nama=nama_of_elemen_filter=nilai_filter_

Mari kita lihat sebuah contoh.

Langkah 1) Masuk ke Mercury Tur.

Masuk ke Mercury Tur menggunakan "tutorial" sebagai nama pengguna dan kata sandi. Halaman Pencari Penerbangan akan muncul, seperti yang ditunjukkan di bawah ini.

Langkah 2) Gunakan Alat Pengembang untuk memeriksa atribut VALUE.

Perhatikan bahwa tombol radio Perjalanan Pulang Pergi dan Satu Arah memiliki nama yang sama, yaitu “tripType”. Namun, keduanya memiliki atribut VALUE yang berbeda, sehingga kita dapat menggunakan setiap nilai sebagai filter.

Langkah 3) Klik pada baris pertama di editor.

• Kita akan mengakses tombol radio Satu Arah terlebih dahulu. Klik baris pertama di Selenium Editor IDE.
• Di kotak Perintah, masukkan perintah “klik”.
• Dalam majalah Target Pada kotak tersebut, masukkan “name=tripType value=oneway”. Bagian “value=oneway” berfungsi sebagai filter kita.

Langkah 4) Klik tombol Temukan.

Perhatikan bahwa Selenium IDE menyoroti tombol radio One Way dengan warna hijau, yang mengkonfirmasi bahwa elemen tersebut telah berhasil diakses melalui atribut VALUE-nya.

Langkah 5) Pilih tombol radio Satu Arah.

Tekan tombol “X” pada keyboard Anda untuk menjalankan perintah klik. Tombol radio Satu Arah sekarang telah terpilih.

Anda dapat melakukan tindakan yang sama pada tombol radio Round Trip, kali ini menggunakan “name=tripType value=roundtrip” sebagai target Anda.

Menemukan berdasarkan Teks Tautan

Strategi pencari lokasi ini hanya berlaku untuk teks hyperlink. Kita mengakses tautan dengan menambahkan awalan “link=” pada target, diikuti dengan teks hyperlink yang terlihat. Metode ini sangat mudah dibaca dan berfungsi dengan baik untuk pengujian navigasi.

Target Format: tautan=link_text

Pada contoh berikut, kita akan mengakses tautan “DAFTAR” yang terdapat pada Mercury Beranda tur.

Langkah 1)

• Pertama, pastikan Anda sudah keluar dari akun. Mercury Tur.
• Arahkan ke folder Mercury Beranda tur.

Langkah 2)

• Gunakan Alat Pengembang untuk memeriksa tautan “DAFTAR”. Teks tautan muncul di antara tag jangkar pembuka dan penutup.
• Dalam hal ini, teks tautannya adalah “DAFTAR”. Salin teks tautan tersebut.

Langkah 3) Salin teks tautan dan tempelkan ke dalam Selenium IDE Target kotak. Beri awalan “link=”.

Langkah 4) Klik tombol Temukan. Selenium IDE akan menyorot tautan REGISTER dengan benar.

Langkah 5) Untuk verifikasi lebih lanjut, masukkan “clickAndWait” di kotak Perintah dan jalankan. Selenium IDE akan berhasil mengklik tautan DAFTAR dan membawa Anda ke halaman Pendaftaran seperti yang ditunjukkan di bawah ini.

Lokasi berdasarkan DOM (Model Objek Dokumen)

The Model Objek Dokumen (DOM)Secara sederhana, ini menjelaskan bagaimana elemen HTML terstruktur sebagai pohon simpul. Selenium IDE dapat menavigasi pohon ini untuk mengakses elemen halaman. Saat menggunakan metode ini, Target Kotak selalu diawali dengan “dom=document…”. Awalan “dom=” biasanya dihilangkan karena Selenium IDE secara otomatis menginterpretasikan nilai apa pun yang diawali dengan "document" sebagai jalur DOM.

Ada empat cara dasar untuk menemukan elemen melalui DOM. Selenium:

• dapatkanElementById
• dapatkanElementsByName
• dom:nama (hanya berlaku untuk elemen dalam formulir bernama)
• dom:indeks

Lokasi berdasarkan DOM – getElementById

Mari kita jelajahi terlebih dahulu metode getElementById dari DOM di SeleniumMetode ini mengembalikan satu elemen dengan mencocokkan atribut ID-nya.

Sintaksis

document.getElementById("id of the element")

• ID elemen = nilai atribut ID dari elemen yang akan diakses. Nilai ini harus selalu diapit oleh sepasang tanda kutip.

Langkah 1) Gunakan halaman demo ini https://demo.guru99.com/test/facebook.htmlArahkan ke sana dan gunakan Alat Pengembang untuk memeriksa kotak centang “Tetap masuk”. Catat ID-nya.

ID yang harus kita gunakan adalah “persist_box”.

Langkah 2) Open Selenium IDE dan di Target Masukkan kotak ke dalam document.getElementById(“persist_box”), lalu klik Cari. Selenium IDE akan menemukan kotak centang “Tetap masuk”. Meskipun tidak dapat menyorot bagian dalam kotak centang, IDE akan mengelilingi elemen tersebut dengan garis tepi hijau terang, seperti yang ditunjukkan di bawah ini.

Menemukan berdasarkan DOM – getElementsByName

Metode `getElementById` hanya mengakses satu elemen dalam satu waktu, yaitu elemen dengan ID yang ditentukan. Metode `getElementsByName` berperilaku berbeda. Metode ini mengembalikan array elemen yang memiliki nama yang sama seperti yang ditentukan. Setiap elemen diakses menggunakan indeks numerik yang dimulai dari 0.

	dapatkanElementById Fungsi ini hanya mengembalikan satu elemen. Elemen tersebut memiliki ID yang ditentukan di dalam tanda kurung pada fungsi getElementById().
	dapatkanElementsByName Fungsi ini mengembalikan kumpulan elemen yang namanya identik. Setiap elemen diindeks dengan angka mulai dari 0, seperti pada array. Anda memilih elemen tertentu dengan menempatkan indeksnya di dalam tanda kurung siku pada sintaks di bawah ini.

Sintaksis

document.getElementsByName("name")[index]

• name = nama elemen sebagaimana didefinisikan oleh atribut 'nama'-nya
• indeks = bilangan bulat yang menunjukkan elemen mana dalam array getElementsByName yang akan digunakan.

Langkah 1) Arahkan ke folder Mercury Buka halaman utama tur dan masuk menggunakan "tutorial" sebagai nama pengguna dan kata sandi. Browser akan memuat layar Pencari Penerbangan.

Langkah 2) Gunakan Alat Pengembang untuk memeriksa ketiga tombol radio di bagian bawah halaman (Kelas Ekonomi, Kelas Bisnis, dan Kelas Pertama). Perhatikan bahwa semuanya memiliki nama yang sama, "servClass".

Langkah 3) Pertama, mari kita akses tombol radio “Kelas ekonomi”. Dari ketiga tombol radio tersebut, elemen ini muncul pertama, sehingga indeksnya adalah 0. Di Selenium IDE, ketik document.getElementsByName(“servClass”)[0] dan klik tombol Cari. Selenium IDE akan mengidentifikasi tombol radio kelas Ekonomi dengan benar.

Langkah 4) Ubah nomor indeks menjadi 1, sehingga milik Anda Target menjadi document.getElementsByName(“servClass”)[1]. Klik tombol Cari, dan Selenium IDE akan menyorot tombol radio “Kelas bisnis” seperti yang ditunjukkan di bawah ini.

Lokasi berdasarkan DOM – dom:nama

Seperti yang disebutkan sebelumnya, metode ini hanya berlaku jika elemen yang Anda akses terdapat di dalam formulir bernama. Jalur pencari dimulai dari formulir, kemudian menelusuri ke elemen target berdasarkan nama.

Sintaksis

document.forms["name of the form"].elements["name of the element"]

• Nama formulir = nilai atribut nama dari tag formulir yang berisi elemen yang ingin Anda akses.
• nama elemen = nilai atribut nama elemen yang ingin Anda akses

Langkah 1) Navigasi ke Mercury Beranda tur https://demo.guru99.com/test/newtours/ dan gunakan Developer Tools untuk memeriksa kotak teks Nama Pengguna. Perhatikan bahwa kotak teks tersebut terdapat dalam sebuah formulir bernama “home”.

Langkah 2) In Selenium Di IDE, ketik document.forms[“home”].elements[“userName”] dan klik tombol Cari. Selenium IDE akan berhasil mengakses elemen tersebut.

Menemukan berdasarkan DOM – dom:index

Metode ini berlaku bahkan ketika elemen tersebut tidak berada di dalam formulir bernama karena menggunakan indeks formulir, bukan namanya. Ini berguna untuk halaman lama atau formulir yang dibuat secara otomatis di mana penamaan tidak tersedia.

Sintaksis

document.forms[index of the form].elements[index of the element]

• indeks formulir = nomor indeks (dimulai dari 0) formulir tersebut terhadap seluruh halaman
• indeks elemen = nomor indeks (dimulai dari 0) elemen tersebut terhadap bentuk yang memuatnya

Kita akan mengakses kotak teks “Telepon” pada Mercury Halaman Pendaftaran Tur. Formulir di halaman ini tidak memiliki atribut nama maupun ID, sehingga menjadi contoh yang baik.

Langkah 1) Arahkan ke folder Mercury Buka halaman Pendaftaran Tur dan periksa kotak teks Telepon. Perhatikan bahwa formulir di sekitarnya tidak memiliki atribut ID maupun nama.

Langkah 2) Masukkan document.forms[0].elements[3] di dalam Selenium IDE Target kotak dan klik tombol Temukan. Selenium IDE akan mengakses kotak teks Telepon dengan benar.

Langkah 3) Alternatifnya, Anda dapat menggunakan nama elemen sebagai pengganti indeksnya untuk hasil yang sama. Masukkan document.forms[0].elements[“phone”] di Target kotak. Kotak teks Telepon akan tetap disorot.

Menemukan dengan XPath

XPath adalah bahasa kueri yang digunakan untuk menavigasi node XML (Extensible Markup Language). Karena HTML dapat dianggap sebagai implementasi dari XML, XPath juga dapat menemukan elemen HTML. Ini adalah salah satu strategi pencari lokasi yang paling ampuh. Selenium.

• Keuntungan: Ia dapat mengakses hampir semua elemen, termasuk elemen yang tidak memiliki atribut kelas, nama, atau ID.
• Kerugian: Ini adalah strategi pencari lokasi yang paling kompleks karena banyaknya aturan dan variasi sintaksisnya.

Alat Pengembang (Developer Tools) pada browser modern dapat secara otomatis menghasilkan ekspresi XPath. Di Chrome, Edge, atau FirefoxKlik kanan elemen di panel Elemen dan pilih Salin > Salin XPath. Pada contoh berikut, kita akan mengakses gambar yang tidak dapat ditemukan menggunakan metode yang telah dibahas sebelumnya.

Langkah 1) Arahkan ke folder Mercury Buka halaman beranda Tours dan gunakan Developer Tools untuk memeriksa persegi panjang berwarna oranye di sebelah kanan kotak "Tautan" berwarna kuning, seperti yang ditunjukkan di bawah ini.

Langkah 2) Klik kanan kode HTML elemen tersebut, lalu pilih opsi “Salin XPath”.

Langkah 3) In Selenium IDE, ketik garis miring tunggal “/” di Target kotak, lalu tempelkan XPath yang disalin pada langkah sebelumnya. Entri dalam Target kotak sekarang harus dimulai dengan dua garis miring “//”.

Langkah 4) Klik tombol Temukan. Selenium IDE akan menyorot kotak oranye, seperti yang ditunjukkan di bawah ini.

Mengapa Memilih Lokakarya yang Tepat Itu Penting

Memilih strategi pencari lokasi yang tepat adalah salah satu keputusan paling berpengaruh dalam Selenium Otomatisasi sangat penting karena secara langsung memengaruhi stabilitas skrip, kecepatan eksekusi, dan biaya pemeliharaan jangka panjang. Locator yang dipilih dengan buruk dapat menyebabkan pengujian yang tidak stabil, kegagalan palsu, dan pengerjaan ulang yang sering terjadi setiap kali UI aplikasi berubah. Urutan preferensi yang direkomendasikan oleh insinyur otomatisasi berpengalaman adalah ID terlebih dahulu, kemudian Nama, diikuti oleh Pemilih CSS, Teks Tautan, dan terakhir XPath.

Lokator berbasis ID adalah yang tercepat karena pencarian browser dioptimalkan untuk pengidentifikasi unik. Lokator berbasis nama hampir sama efisiennya ketika nama-nama tersebut unik. Selektor CSS dan XPath memberikan fleksibilitas tetapi cenderung lebih lambat dan lebih rentan ketika pengembang melakukan refactoring DOM. Teks tautan sangat baik untuk tautan navigasi tetapi menawarkan penggunaan ulang yang terbatas.

Otomatisasi yang stabil juga bergantung pada kolaborasi dengan pengembang. Ketika penguji meminta atribut ID atau data-* yang konsisten dan bermakna selama tinjauan kode, daya tahan locator meningkat secara signifikan. Hindari mengandalkan ID yang dihasilkan secara otomatis (seperti yang dihasilkan oleh framework) karena ID tersebut dapat berubah antar build. Dengan memprioritaskan locator yang mudah dibaca dan berorientasi pada tujuan, tim dapat menjaga agar rangkaian pengujian tetap mudah dipelihara dan mengurangi hutang teknis seiring perkembangan aplikasi.

Praktik Terbaik untuk Menulis Lokator yang Andal

Sistem pencari lokasi yang andal adalah fondasi dari sistem yang berkelanjutan. Selenium rangkaian pengujian. Praktik-praktik berikut membantu mengurangi kegagalan skrip, meningkatkan keterbacaan, dan membuat pengujian tahan terhadap perubahan UI.

1. Lebih disukai menggunakan ID unik: Selalu periksa atribut ID terlebih dahulu. ID dimaksudkan untuk bersifat unik dalam satu halaman dan merupakan pilihan yang paling efisien.
2. Gunakan atribut Name dan data-* semantik: Dorong pengembang untuk menambahkan atribut pengujian yang stabil seperti data-testid atau data-qa. Atribut ini tetap konsisten meskipun kelas CSS berubah.
3. Hindari penggunaan XPath absolut: Jalur absolut seperti /html/body/div[2]/div[3]/span mudah rusak. Gunakan ekspresi XPath relatif dengan atribut seperti //input[@name='userName'].
4. Gabungkan atribut untuk presisi: Jika suatu atribut tunggal tidak unik, gabungkan beberapa atribut (misalnya, //button[@type='submit' dan @name='login']) untuk menargetkan elemen yang tepat.
5. Gunakan teks dengan bijak: Lokator yang bergantung pada teks yang terlihat mungkin mengalami masalah di berbagai lokalisasi bahasa. Gunakan lokator berbasis teks hanya jika konten stabil dan satu bahasa.
6. Sentralisasi pencari lokasi: Simpan locator dalam kelas Page Object Model (POM) sehingga pembaruan dapat dilakukan di satu tempat, bukan di banyak skrip pengujian.
7. Validasi di Alat Pengembang: Sebelum menambahkan locator ke skrip, ujilah di konsol browser menggunakan $x(“//xpath”) untuk XPath atau document.querySelector untuk CSS untuk memastikan bahwa locator tersebut mengembalikan tepat satu elemen.
8. Sebisa mungkin hindari penggunaan locator berbasis indeks: Posisi indeks seperti [3] bergantung pada urutan elemen. Bahkan perubahan tata letak kecil dapat menggeser indeks dan merusak skrip.

Dengan menerapkan praktik-praktik ini secara konsisten, para insinyur otomatisasi menciptakan rangkaian pengujian yang dapat diskalakan di berbagai tim dan tetap berfungsi meskipun sering dilakukan pembaruan UI dengan perawatan minimal.

Pertanyaan Umum Demo Slot