Pencari Lokasi di Selenium IDE: CSS Selector - DOM - XPath - Indo

Daftar Isi:

Anonim

Apa itu Locators?

Locator adalah perintah yang memberi tahu Selenium IDE elemen GUI mana (misalnya Kotak Teks, Tombol, Kotak Centang, dll) yang diperlukan untuk beroperasi. Identifikasi elemen GUI yang benar merupakan prasyarat untuk membuat skrip otomatisasi. Tetapi identifikasi elemen GUI yang akurat lebih sulit daripada kedengarannya. Terkadang, Anda akhirnya bekerja dengan elemen GUI yang salah atau tidak ada elemen sama sekali! Karenanya, Selenium menyediakan sejumlah Locator untuk menemukan elemen GUI secara tepat

Berbagai jenis CSS Locator di Selenium IDE

Ada perintah yang tidak membutuhkan pelacak (seperti perintah "buka"). Namun, kebanyakan dari mereka memang membutuhkan pelacak elemen di webdriver Selenium.

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

Menemukan berdasarkan ID

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

Format Target: id = id elemen

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

Langkah 1. Sejak tutorial ini dibuat, Facebook telah mengubah Desain Halaman Login mereka. 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. Jalankan Selenium IDE dan masukkan "id = email" di kotak Target. Klik tombol Temukan dan perhatikan bahwa kotak teks "Email atau Telepon" menjadi berwarna kuning dan dibatasi dengan warna hijau, yang berarti, Selenium IDE dapat menemukan elemen tersebut dengan benar.

Menemukan berdasarkan Nama

Menemukan elemen menurut nama sangat mirip dengan mencari berdasarkan ID, kecuali bahwa kita menggunakan awalan "name =" sebagai gantinya.

Format Target: nama = nama elemen

Dalam demonstrasi berikut, sekarang kita akan menggunakan Mercury Tours karena semua elemen penting memiliki nama.

Langkah 1. Buka 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 "nama pengguna".

Langkah 2. Di Selenium IDE, masukkan "name = userName" di kotak Target dan klik tombol Temukan. Selenium IDE seharusnya dapat menemukan kotak teks Nama Pengguna dengan menyorotnya.

Menemukan berdasarkan Nama menggunakan Filter

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

Format Target : name = name_of_the_element filter = value_of_filter

Mari kita lihat contoh -

LANGKAH 1 . Masuk ke Mercury Tours menggunakan "tutorial" sebagai nama pengguna dan kata sandi. Ini akan membawa Anda ke halaman Pencari Penerbangan yang ditunjukkan di bawah ini.

Langkah 2. Dengan menggunakan Firebug, perhatikan bahwa tombol radio Round Trip dan One Way memiliki nama yang sama "tripType". Namun, mereka memiliki atribut NILAI yang berbeda sehingga kita dapat menggunakan masing-masing sebagai filter kita.

LANGKAH 3.

  • Kami akan mengakses tombol radio One Way terlebih dahulu. Klik baris pertama di Editor.
  • Di kotak Command dari Selenium IDE, masukkan perintah "klik".
  • Di kotak Target, masukkan "name = tripType value = oneway". Porsi "nilai = satu arah" adalah filter kami.

LANGKAH 4 . Klik tombol Find dan perhatikan bahwa Selenium IDE dapat menyorot radio button One Way dengan warna hijau - artinya kita dapat mengakses elemen dengan sukses menggunakan atribut VALUE-nya.

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

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

Menemukan dengan Teks Tautan

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

Format Target : link = link_text

Dalam contoh ini, kita akan mengakses tautan "DAFTAR" yang terdapat di beranda Mercury Tours.

Langkah 1.

  • Pertama, pastikan Anda keluar dari Mercury Tours.
  • Buka beranda Mercury Tours.

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 kotak Target Selenium IDE. Awali dengan "link =".

Langkah 4. Klik tombol Find dan perhatikan bahwa Selenium IDE dapat menyorot tautan REGISTER dengan benar.

Langkah 5. Untuk memverifikasi lebih lanjut, masukkan "clickAndWait" di kotak Command dan jalankan. Selenium IDE seharusnya dapat mengklik link DAFTAR tersebut dengan sukses dan membawa Anda ke halaman Registrasi yang ditunjukkan di bawah ini.

Menemukan oleh Pemilih CSS

CSS Selectors di Selenium adalah pola string yang digunakan untuk mengidentifikasi elemen berdasarkan kombinasi tag HTML, id, class, dan atribut. Menemukan lokasi dengan CSS Selectors di Selenium lebih rumit daripada metode sebelumnya, tetapi ini adalah strategi penempatan yang paling umum dari pengguna Selenium tingkat lanjut karena dapat mengakses bahkan elemen yang tidak memiliki ID atau nama.

CSS Selectors di Selenium memiliki banyak format, tetapi kami hanya akan fokus pada format yang paling umum.

  • Tag dan ID
  • Tag dan kelas
  • Tag dan atribut
  • Tag, kelas, dan atribut
  • Teks batin

Saat menggunakan strategi ini, kami selalu mengawali kotak Target dengan "css =" seperti yang akan ditampilkan pada contoh berikut.

Menemukan berdasarkan Pemilih CSS - Tag dan ID

Sekali lagi, kami akan menggunakan kotak teks Email Facebook dalam contoh ini. Seperti yang Anda ingat, ini memiliki ID "email," dan kami telah mengaksesnya di bagian "Menemukan berdasarkan ID". Kali ini, kita akan menggunakan Selenium CSS Selector dengan ID dalam mengakses elemen yang sama.

Sintaksis

Deskripsi

css = tag # id
  • tag = tag HTML dari elemen yang sedang diakses
  • # = tanda hash. Ini harus selalu ada saat menggunakan Selenium CSS Selector dengan ID
  • id = ID elemen yang sedang diakses

Perlu diingat bahwa ID selalu diawali dengan tanda pagar (#).

Langkah 1. Buka www.facebook.com. Menggunakan Firebug, periksa kotak teks "Email atau Telepon".

Pada titik ini, perhatikan bahwa tag HTML adalah "input" dan ID-nya adalah "email". Jadi sintaks kita akan menjadi "css = input # email".

Langkah 2. Masukkan "css = input # email" ke dalam kotak Target dari Selenium IDE dan klik tombol Temukan. Selenium IDE harus dapat menyorot elemen tersebut.

Menemukan berdasarkan Pemilih CSS - Tag dan Kelas

Menemukan dengan CSS Selector di Selenium menggunakan tag HTML dan nama kelas mirip dengan menggunakan tag dan ID, tetapi dalam kasus ini, titik (.) Digunakan sebagai pengganti tanda pagar.

Sintaksis

Deskripsi

css = tag. kelas
  • tag = tag HTML dari elemen yang sedang diakses
  • . = tanda titik. Ini harus selalu ada saat menggunakan Pemilih CSS dengan kelas
  • class = kelas elemen yang diakses

Langkah 1. Buka halaman demo http://demo.guru99.com/test/facebook.html dan gunakan Firebug untuk memeriksa kotak teks "Email atau Telepon". Perhatikan bahwa tag HTML-nya adalah "input" dan kelasnya adalah "inputtext."

Langkah 2. Dalam Selenium IDE, masukkan "css = input.inputtext" di kotak Target dan klik Temukan. Selenium IDE harus dapat mengenali kotak teks Email atau Telepon.

Perhatikan bahwa ketika beberapa elemen memiliki tag dan nama HTML yang sama, hanya elemen pertama dalam kode sumber yang akan dikenali . Menggunakan Firebug, periksa kotak teks Kata Sandi di Facebook dan perhatikan bahwa itu memiliki nama yang sama dengan kotak teks Email atau Telepon.

Alasan mengapa hanya kotak teks Email atau Telepon yang disorot pada ilustrasi sebelumnya adalah karena kotak teks tersebut muncul pertama kali di sumber halaman Facebook.

Menemukan menurut Pemilih CSS - Tag dan Atribut

Strategi ini menggunakan tag HTML dan atribut tertentu dari elemen yang akan diakses.

Sintaksis

Deskripsi

css = tag [atribut = nilai]
  • tag = tag HTML dari elemen yang sedang diakses
  • [dan] = tanda kurung siku di mana atribut tertentu dan nilai yang sesuai akan ditempatkan
  • atribut = atribut yang akan digunakan. Dianjurkan untuk menggunakan atribut yang unik untuk elemen seperti nama atau ID.
  • nilai = nilai yang sesuai dari atribut yang dipilih.

Langkah 1. Buka halaman Registrasi Mercury Tours (http://demo.guru99.com/test/newtours/register.php) dan periksa kotak teks "Last Name". Catat tag HTML-nya ("input" dalam hal ini) dan namanya ("lastName").

Langkah 2. Dalam Selenium IDE, masukkan "css = input [name = lastName]" di kotak Target dan klik Temukan. Selenium IDE seharusnya dapat mengakses kotak Nama Belakang dengan sukses.

Jika beberapa elemen memiliki tag dan atribut HTML yang sama, hanya elemen pertama yang akan dikenali . Perilaku ini mirip dengan mencari elemen menggunakan pemilih CSS dengan tag dan kelas yang sama.

Menemukan lokasi menurut Pemilih CSS - tag, kelas, dan atribut

Sintaksis Deskripsi
css = tag.class [atribut = nilai]
  • tag = tag HTML dari elemen yang sedang diakses
  • . = tanda titik. Ini harus selalu ada saat menggunakan Pemilih CSS dengan kelas
  • class = kelas elemen yang diakses
  • [dan] = tanda kurung siku di mana atribut tertentu dan nilai yang sesuai akan ditempatkan
  • atribut = atribut yang akan digunakan. Dianjurkan untuk menggunakan atribut yang unik untuk elemen seperti nama atau ID.
  • nilai = nilai yang sesuai dari atribut yang dipilih.

Langkah 1. Buka halaman demo http://demo.guru99.com/test/facebook.html dan gunakan Firebug untuk memeriksa kotak masukan 'Email atau Telepon' dan 'Kata Sandi'. Catat tag HTML, kelas, dan atribut mereka. Untuk contoh ini, kami akan memilih atribut 'tabindex' mereka.

Langkah 2. Kita akan mengakses kotak teks 'Email atau Telepon' terlebih dahulu. Jadi, kita akan menggunakan nilai tabindex 1. Masukkan "css = input.inputtext [tabindex = 1]" di kotak Target Selenium IDE dan klik Find. Kotak masukan 'Email atau Telepon' harus disorot.

Langkah 3. Untuk mengakses kotak masukan Kata Sandi, cukup ganti nilai atribut tabindex. Masukkan "css = input.inputtext [tabindex = 2]" di kotak Target dan klik tombol Temukan. Selenium IDE harus dapat mengidentifikasi kotak teks Kata Sandi dengan sukses.

Menemukan dengan Pemilih CSS - teks bagian dalam

Seperti yang Anda ketahui, label HTML jarang diberi atribut id, nama, atau kelas. Jadi, bagaimana kita mengaksesnya? Jawabannya adalah melalui penggunaan teks batin mereka. Teks bagian dalam adalah pola string sebenarnya yang ditunjukkan oleh label HTML di halaman.

Sintaksis

Deskripsi

css = tag: berisi ("teks bagian dalam")
  • tag = tag HTML dari elemen yang sedang diakses
  • teks bagian dalam = teks bagian dalam dari elemen

Langkah 1. Buka beranda Mercury Tours (http://demo.guru99.com/test/newtours/) dan gunakan Firebug untuk menyelidiki label "Sandi". Catat tag HTML-nya (dalam hal ini "font") dan perhatikan bahwa ia tidak memiliki atribut class, id, atau name.

Langkah 2. Ketik css = font: contains ("Password:") ke dalam kotak Target Selenium IDE dan klik Temukan. Selenium IDE seharusnya dapat mengakses label Kata Sandi seperti yang ditunjukkan pada gambar di bawah ini.

Langkah 3. Kali ini, ganti teks bagian dalam dengan "Boston" sehingga Target Anda sekarang menjadi "css = font: contains (" Boston ")". Klik Temukan. Anda akan melihat bahwa label "Boston ke San Francisco" menjadi disorot. Ini menunjukkan kepada Anda bahwa Selenium IDE dapat mengakses label panjang meskipun Anda baru saja menunjukkan kata pertama dari teks dalamnya.

Menemukan berdasarkan DOM (Model Objek Dokumen)

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

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

  • getElementById
  • getElementsByName
  • dom: name (hanya berlaku untuk elemen dalam bentuk bernama)
  • dom: index

Menemukan dengan DOM - getElementById

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

Sintaksis

Deskripsi

document.getElementById ("id elemen")

id of the element = ini adalah nilai atribut ID dari elemen yang akan diakses. Nilai ini harus selalu diapit oleh sepasang 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 "Biarkan saya tetap masuk". Catat ID-nya.

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

Langkah 2. Buka Selenium IDE dan di kotak Target, masukkan "document.getElementById (" persist_box ")" dan klik Temukan. Selenium IDE seharusnya dapat menemukan kotak centang "Biarkan saya tetap masuk". Meskipun tidak dapat menyorot bagian dalam kotak centang, Selenium IDE masih dapat mengelilingi elemen dengan batas hijau terang seperti yang ditunjukkan di bawah ini.

Menemukan dengan DOM - getElementsByName

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

getElementById

  • Itu hanya akan mendapatkan satu elemen untuk Anda.
  • Elemen itu mengandung ID yang Anda tentukan di dalam tanda kurung getElementById ().

getElementsByName

  • Ini akan mendapatkan kumpulan elemen yang namanya sama.
  • Setiap elemen diindeks dengan angka yang dimulai dari 0 seperti array
  • Anda menentukan elemen mana yang ingin Anda akses dengan memasukkan nomor indeksnya ke dalam tanda kurung siku dalam sintaks getElementsByName di bawah ini.

Sintaksis

Deskripsi

document.getElementsByName ("nama") [indeks]
  • name = nama elemen seperti yang didefinisikan oleh atribut 'name' nya
  • index = integer yang menunjukkan elemen mana dalam larik getElementsByName yang akan digunakan.

Langkah 1. Masuk ke Beranda Mercury Tours dan login menggunakan "tutorial" sebagai nama pengguna dan kata sandi. Firefox akan membawa Anda ke layar Flight Finder.

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 dulu tombol radio "Kelas ekonomi". Dari ketiga tombol radio ini, elemen ini yang pertama, sehingga memiliki indeks 0. Dalam 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 Target Anda sekarang menjadi document.getElementsByName ("servClass") [1]. Klik tombol Temukan, dan Selenium IDE seharusnya dapat menyorot tombol radio "Kelas bisnis", seperti yang ditunjukkan di bawah ini.

Menemukan berdasarkan DOM - dom: name

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

Sintaksis

Deskripsi

document.forms ["nama bentuk"] .elements ["nama elemen"]
  • name of the form = nilai atribut nama dari tag formulir yang berisi elemen yang ingin Anda akses
  • name of the element = nilai atribut name dari elemen yang ingin kamu akses

Langkah 1. Buka beranda Mercury Tours (http://demo.guru99.com/test/newtours/) dan gunakan Firebug untuk memeriksa kotak teks Nama Pengguna. Perhatikan bahwa itu terkandung dalam formulir bernama "rumah."

Langkah 2. Pada Selenium IDE, ketik "document.forms [" home "]. Elements [" userName "]" dan klik tombol Find. Selenium IDE harus dapat mengakses elemen dengan sukses.

Menemukan berdasarkan DOM - dom: index

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

Sintaksis

Deskripsi

document.forms [indeks formulir] .elements [indeks elemen]
  • indeks formulir = nomor indeks (mulai dari 0) formulir sehubungan dengan keseluruhan halaman
  • indeks elemen = nomor indeks (mulai dari 0) elemen sehubungan dengan seluruh formulir yang memuatnya

Kami akan mengakses kotak teks "Telepon" dalam halaman Pendaftaran Mercury Tours. Formulir di halaman itu tidak memiliki atribut nama dan ID, jadi ini akan menjadi contoh yang baik.

Langkah 1. Buka halaman Registrasi Mercury Tours dan periksa kotak teks Phone. Perhatikan bahwa formulir yang berisi itu tidak memiliki atribut ID dan nama.

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

Langkah 3. Alternatifnya, Anda dapat menggunakan nama elemen sebagai ganti indeksnya dan mendapatkan hasil yang sama. Masukkan "document.forms [0] .elements [" phone "]" di kotak Target Selenium IDE. Kotak teks Telepon harus tetap disorot.

Menemukan dengan XPath

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

Keuntungan: Dapat mengakses hampir semua elemen, bahkan yang tidak memiliki atribut class, name, atau id.

Kerugian: Ini adalah metode yang paling rumit untuk mengidentifikasi elemen karena terlalu banyak aturan dan pertimbangan yang berbeda.

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

Langkah 1. Arahkan ke Mercury Tours Homepage dan gunakan Firebug untuk memeriksa persegi panjang oranye di sebelah kanan kotak kuning "Links". Lihat gambar di bawah.

LANGKAH 2 . Klik kanan pada kode HTML elemen dan kemudian pilih opsi "Salin XPath".

Langkah 3. Di Selenium IDE, ketik satu garis miring "/" di kotak Target lalu tempelkan XPath yang telah kita salin pada langkah sebelumnya. Entri di kotak Target Anda sekarang harus dimulai dengan dua garis miring "//".

LANGKAH 4 . Klik pada tombol Temukan. Selenium IDE harus dapat menyorot kotak oranye seperti gambar di bawah ini.

Ringkasan

Sintaks untuk Penggunaan Locator

metode

Sintaks Target

Contoh
Menurut ID id = id_of_the_element id = email
Dengan nama name = name_of_the_element name = userName
Dengan Nama Menggunakan Filter name = name_of_the_element filter = value_of_filter name = tripType value = oneeway
Dengan Teks Tautan link = link_text link = DAFTAR
Tag dan ID css = tag # id css = masukan # email
Tag dan Kelas css = tag. kelas css = input.inputtext
Tag dan Atribut css = tag [atribut = nilai] css = masukan [name = lastName]
Tag, Kelas, dan Atribut css = tag. kelas [atribut = nilai] css = input.inputtext [tabindex = 1]