Pencari lokasi di Selenium

Apa itu Pencari Lokasi?

Locator adalah perintah yang memberitahu Selenium IDE elemen GUI mana (katakanlah Text Box, Tombol, Periksa Boxes dll) kebutuhannya untuk beroperasi. Identifikasi elemen GUI yang benar merupakan prasyarat untuk membuat skrip otomatisasi. Namun identifikasi elemen GUI yang akurat lebih sulit daripada kedengarannya. Terkadang, Anda akhirnya bekerja dengan elemen GUI yang salah atau tanpa elemen sama sekali! Karena itu, Selenium menyediakan sejumlah Pencari Lokasi untuk menemukan elemen GUI secara tepat

Ada perintah yang tidak memerlukan pencari lokasi (seperti perintah “buka”). Namun, sebagian besar dari mereka memerlukan elemen Locator di dalamnya Selenium driver web.

Pilihan pencari lokasi sangat bergantung pada Aplikasi Anda yang Sedang Diuji. Dalam tutorial ini, kita akan beralih antara Facebook, new tours.demoaut berdasarkan pelacak yang didukung aplikasi ini. Begitu juga di pengujian proyek, Anda akan memilih salah satu pencari elemen yang tercantum di atas Selenium webdriver, berdasarkan dukungan aplikasi Anda.

Menemukan berdasarkan ID

Ini adalah cara paling umum untuk menemukan elemen karena ID seharusnya unik untuk setiap elemen.

Target Format: id=id elemen

Untuk contoh ini, kami akan menggunakan Facebook sebagai aplikasi pengujian kami karena Mercury Tur tidak menggunakan atribut ID.

Langkah 1) Sejak tutorial ini dibuat, Facebook telah mengubah Desain Halaman Loginnya. Gunakan halaman demo ini http://demo.guru99.com/test/facebook.html untuk pengujian. Periksa kotak teks “Email atau Telepon” menggunakan Firebug dan catat ID-nya. Dalam kasus 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 dibatasi dengan warna hijau, artinya, Selenium IDE dapat menemukan elemen tersebut dengan benar.

Menemukan berdasarkan Nama

Menemukan elemen berdasarkan nama sangat mirip dengan menemukan berdasarkan ID, hanya saja kita menggunakan “nama=” awalan sebagai gantinya.

Target Format: nama=nama elemen

Dalam demonstrasi berikut, kita sekarang akan menggunakan Mercury Wisata karena semua unsur penting mempunyai nama.

Langkah 1) Navigasi ke http://demo.guru99.com/test/newtours/ dan gunakan Firebug untuk memeriksa kotak teks “Nama Pengguna”. Catat atribut namanya.

Di sini, kita melihat bahwa nama elemennya adalah “Namapengguna”.

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

Cara Menemukan Elemen Berdasarkan Nama menggunakan Filter

Filter dapat digunakan ketika beberapa elemen memiliki nama yang sama. Filter adalah atribut tambahan yang digunakan untuk membedakan elemen dengan nama yang sama.

Target dibentuk: nama=nama_of_the_element filter=nilai_of_filter

Mari kita lihat contoh –

Langkah 1) Masuk ke Mercury Tur.

Masuk ke Mercury Tur menggunakan “tutorial” sebagai username dan password. Ini akan membawa Anda ke halaman Pencari Penerbangan yang ditunjukkan di bawah ini.

Langkah 2) Menggunakan pembakar menggunakan atribut VALUE.

Dengan menggunakan Firebug, perhatikan bahwa tombol radio Pulang Pergi dan Satu Arah memiliki nama yang sama “tripType.” Namun, keduanya memiliki atribut VALUE yang berbeda sehingga kita dapat menggunakan masing-masing atribut tersebut sebagai filter.

Langkah 3) Klik pada baris pertama.

• Kita akan mengakses tombol radio One Way terlebih dahulu. Klik baris pertama pada Editor.
• Di kotak Perintah Selenium IDE, masukkan perintah “klik”.
• Dalam majalah Target kotak, masukkan “name=tripType value=oneway”. Bagian “value=oneway” adalah filter kami.

Langkah 4) Klik tombol Temukan.

Perhatikan bahwa Selenium IDE dapat menyorot tombol radio One Way dengan warna hijau – artinya kita berhasil mengakses elemen menggunakan atribut VALUE-nya.

Langkah 5) Pilih tombol radio Satu Arah.

Tekan tombol "X" di keyboard Anda untuk menjalankan perintah klik ini. Perhatikan bahwa tombol radio One Way dipilih.

Anda dapat melakukan hal yang sama dengan tombol radio Pulang Pergi, kali ini, menggunakan “name=tripType value=roundtrip” sebagai target Anda.

Menemukan berdasarkan Teks Tautan

Jenis pencari CSS ini di Selenium hanya berlaku untuk teks hyperlink. Kami mengakses tautan dengan mengawali target kami dengan “link=” dan kemudian diikuti dengan teks hyperlink.

Target dibentuk: tautan=link_text

Dalam contoh ini, kita akan mengakses tautan “DAFTAR” yang terdapat di Mercury Beranda tur.

Langkah 1)

• Pertama, pastikan Anda sudah logout Mercury Tur.
• Pergi ke Mercury Beranda tur.

Langkah 2)

• Menggunakan Firebug, periksa tautan “DAFTAR”. Teks tautan ditemukan di antara tag dan.
• Dalam hal ini, teks tautan kami adalah “DAFTAR”. Salin teks tautan.

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

Langkah 4) Klik pada tombol Temukan dan perhatikan itu Selenium IDE dapat menyorot tautan DAFTAR dengan benar.

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

Lokasi berdasarkan DOM (Model Objek Dokumen)

Model Objek Dokumen (DOM), secara sederhana, adalah cara penyusunan elemen HTML. Selenium IDE dapat menggunakan DOM dalam mengakses elemen halaman. Jika kita menggunakan metode ini, kita Target kotak akan selalu dimulai dengan “dom=document…”; namun, awalan “dom=” biasanya dihilangkan karena Selenium IDE mampu secara otomatis menafsirkan apa pun yang dimulai dengan kata kunci “dokumen” untuk menjadi jalur dalam DOM di Selenium pula.

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

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

Lokasi berdasarkan DOM – getElementById

Mari kita fokus pada metode pertama – menggunakan metode DOM getElementById Selenium. Sintaksnya adalah:

Sintaksis

document.getElementById("id of the element")

• id elemen = ini adalah nilai atribut ID elemen yang akan diakses. Nilai ini harus selalu diapit oleh tanda kurung (“”).

Langkah 1) Gunakan halaman demo ini http://demo.guru99.com/test/facebook.html Arahkan ke sana dan gunakan Firebug untuk memeriksa kotak centang “Keep me logged in”. Catat ID-nya.

Kita dapat melihat bahwa ID yang harus kita gunakan adalah “persist_box”.

Langkah 2) Open Selenium IDE dan di Target kotak, masukkan “document.getElementById(“persist_box”)” dan klik Temukan. Selenium IDE seharusnya dapat menemukan kotak centang “Keep me logged in”. Meskipun tidak dapat menyorot bagian dalam kotak centang, Selenium IDE masih bisa mengelilingi elemen dengan batas hijau terang seperti yang ditunjukkan di bawah ini.

Menemukan berdasarkan DOM – getElementsByName

Metode getElementById hanya dapat mengakses satu elemen dalam satu waktu, dan itu adalah elemen dengan ID yang Anda tentukan. Metode getElementsByName berbeda. Ini mengumpulkan array elemen yang memiliki nama yang Anda tentukan. Anda mengakses elemen individual menggunakan indeks yang dimulai dari 0.

	dapatkanElementById Itu hanya akan mendapatkan satu elemen untuk Anda. Elemen tersebut memuat ID yang Anda tentukan di dalam tanda kurung getElementById().
	dapatkanElementsByName Itu akan mendapatkan kumpulan elemen yang namanya semua sama. Setiap elemen diindeks dengan angka yang dimulai dari 0 seperti halnya array Anda menentukan elemen mana yang ingin Anda akses dengan memasukkan nomor indeksnya ke dalam tanda kurung siku dalam sintaksis getElementsByName 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) Navigasi ke Mercury Beranda Tur dan login menggunakan “tutorial” sebagai nama pengguna dan kata sandi. Firefox akan membawa Anda ke layar Pencari Penerbangan.

Langkah 2) Dengan menggunakan Firebug, periksa tiga tombol radio di bagian bawah halaman (tombol radio Kelas Ekonomi, Kelas Bisnis, dan Kelas Satu). Perhatikan bahwa mereka semua memiliki nama yang sama yaitu “servClass”.

Langkah 3) Mari kita akses tombol radio “Kelas Ekonomi” terlebih dahulu. Dari ketiga radio button tersebut, elemen ini berada di urutan pertama sehingga memiliki indeks 0. In Selenium IDE, ketik “document.getElementsByName(“servClass”)[0]” dan klik tombol Temukan. Selenium IDE harus dapat mengidentifikasi tombol radio kelas Ekonomi dengan benar.

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

Lokasi berdasarkan DOM – dom:nama

Seperti disebutkan sebelumnya, metode ini hanya akan berlaku jika elemen yang Anda akses terdapat dalam formulir bernama.

Sintaksis

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

• name of the form = nilai atribut name dari tag form yang berisi elemen yang ingin Anda akses
• nama elemen = nilai atribut nama elemen yang ingin Anda akses

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

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

Menemukan berdasarkan DOM – dom:index

Metode ini berlaku bahkan ketika elemen tidak berada dalam formulir bernama karena menggunakan indeks formulir dan bukan namanya.

Sintaksis

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

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

Kita akan mengakses kotak teks “Telepon” di dalam Mercury Halaman Pendaftaran Tur. Formulir di halaman itu tidak memiliki atribut nama dan ID, jadi ini akan menjadi contoh yang bagus.

Langkah 1) Navigasi ke Mercury Halaman Pendaftaran Tur dan periksa kotak teks Telepon. Perhatikan bahwa formulir yang memuatnya tidak memiliki atribut ID dan nama.

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

Langkah 3) Alternatifnya, Anda bisa menggunakan nama elemen alih-alih indeksnya dan mendapatkan hasil yang sama. Masukkan “document.forms[0].elements[“phone”]” di Selenium IDE Target Kotak teks Telepon seharusnya masih disorot.

Menemukan dengan XPath

XPath adalah bahasa yang digunakan saat mencari node XML (Extensible Markup Language). Karena HTML dapat dianggap sebagai implementasi XML, kita juga dapat menggunakan XPath dalam menemukan elemen HTML.

• Keuntungan: Itu dapat mengakses hampir semua elemen, bahkan elemen tanpa atribut kelas, nama, atau id.
• Kerugian: Ini adalah metode yang paling rumit dalam mengidentifikasi elemen karena terlalu banyak aturan dan pertimbangan yang berbeda.

Untungnya, Firebug dapat menghasilkan XPath secara otomatis Selenium locator. Dalam contoh berikut, kita akan mengakses gambar yang tidak mungkin diakses melalui metode yang telah kita bahas sebelumnya.

Langkah 1) Navigasi ke Mercury Beranda Tours dan gunakan Firebug untuk memeriksa persegi panjang oranye di sebelah kanan kotak “Links” berwarna kuning. Lihat gambar di bawah ini.

Langkah 2) Klik kanan pada kode HTML elemen dan kemudian pilih opsi “Salin XPath”.

Langkah 3) In Selenium IDE, ketikkan satu garis miring “/” di Target kotak lalu tempel XPath yang telah kita salin pada langkah sebelumnya. Entri di Anda Target kotak sekarang harus dimulai dengan dua garis miring “//”.

Langkah 4) Klik pada tombol Temukan. Selenium IDE seharusnya dapat menyorot kotak oranye seperti yang ditunjukkan di bawah ini.