Pencari di Selenium IDE: CSS Selector - DOM - XPath - ID

Isi kandungan:

Anonim

Apa itu Pencari?

Locator adalah perintah yang memberitahu Selenium IDE elemen GUI mana (seperti Kotak Teks, Tombol, Kotak Periksa dll) keperluannya untuk beroperasi. Pengenalpastian elemen GUI yang betul adalah prasyarat untuk membuat skrip automasi. Tetapi pengenalpastian elemen GUI yang tepat lebih sukar daripada dibunyikan. Kadang-kadang, anda akhirnya dapat menggunakan elemen GUI yang salah atau tidak ada unsur sama sekali! Oleh itu, Selenium menyediakan sebilangan Pencari untuk mencari elemen GUI dengan tepat

Pelbagai jenis CSS Locator di Selenium IDE

Terdapat arahan yang tidak memerlukan pencari (seperti perintah "terbuka"). Walau bagaimanapun, kebanyakan mereka memerlukan Pencari elemen dalam pemacu web Selenium.

Pilihan pencari sangat bergantung pada Aplikasi Anda yang Diuji . Dalam tutorial ini, kita akan beralih antara Facebook, tours.demoaut baru berdasarkan pencari yang disokong oleh aplikasi ini. Begitu juga dalam projek Pengujian anda, anda akan memilih mana-mana pencari elemen yang disenaraikan di atas dalam pemacu web Selenium, berdasarkan sokongan aplikasi anda.

Mencari mengikut ID

Ini adalah kaedah yang paling biasa untuk mencari elemen kerana ID semestinya unik untuk setiap elemen.

Format Sasaran: id = id elemen

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

Langkah 1. Sejak tutorial ini dibuat, Facebook telah mengubah Reka Bentuk Halaman Log Masuk mereka. Gunakan halaman demo ini http://demo.guru99.com/test/facebook.html untuk ujian. Periksa kotak teks "E-mel atau Telefon" menggunakan Firebug dan perhatikan IDnya. Dalam kes ini, IDnya adalah "e-mel".

Langkah 2. Lancarkan Selenium IDE dan masukkan "id = e-mel" di kotak Sasaran. Klik butang Cari dan perhatikan bahawa kotak teks "E-mel atau Telefon" diserlahkan dengan kuning dan berbatasan dengan hijau, yang bermaksud, Selenium IDE dapat mengesan elemen itu dengan betul.

Mencari mengikut Nama

Mengesan elemen berdasarkan nama sangat serupa dengan mencari berdasarkan ID, kecuali bahawa kita menggunakan awalan "name =" .

Format Sasaran: nama = nama elemen

Dalam demonstrasi berikut, kita sekarang akan menggunakan Mercury Tours kerana semua elemen penting mempunyai nama.

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

Di sini, kita melihat bahawa nama elemen tersebut adalah "userName".

Langkah 2. Di Selenium IDE, masukkan "name = userName" di kotak Target dan klik butang Cari. Selenium IDE harus dapat mencari kotak teks Nama Pengguna dengan menonjolkannya.

Mencari mengikut Nama menggunakan Penapis

Penapis boleh digunakan apabila beberapa elemen mempunyai nama yang sama. Penapis adalah atribut tambahan yang digunakan untuk membezakan elemen dengan nama yang sama.

Format Sasaran : name = name_of_the_element filter = value_of_filter

Mari lihat contoh -

Langkah 1 . Log masuk ke Mercury Tours menggunakan "tutorial" sebagai nama pengguna dan kata laluan. Ia akan membawa anda ke halaman Pencari Penerbangan yang ditunjukkan di bawah.

Langkah 2. Dengan menggunakan Firebug, perhatikan bahawa butang radio Round Trip dan One Way mempunyai nama yang sama "tripType." Walau bagaimanapun, mereka mempunyai NILAI atribut yang berbeza sehingga kami dapat menggunakannya masing-masing sebagai penapis kami.

Langkah 3.

  • Kami akan mengakses butang radio Sehala terlebih dahulu. Klik baris pertama pada Editor.
  • Dalam kotak Perintah Selenium IDE, masukkan perintah "klik".
  • Di kotak Sasaran, masukkan "name = tripType value = oneway". Bahagian "value = oneway" adalah penapis kami.

Langkah 4 . Klik butang Cari dan perhatikan bahawa Selenium IDE dapat menonjolkan butang radio Sehala dengan warna hijau - yang bermaksud bahawa kita dapat mengakses elemen dengan berjaya menggunakan atribut NILAI.

Langkah 5. Tekan kekunci "X" di papan kekunci anda untuk melaksanakan perintah klik ini. Perhatikan bahawa butang radio Sehala telah dipilih.

Anda boleh melakukan perkara yang sama dengan butang radio Round Trip, kali ini, dengan menggunakan "name = tripType value = roundtrip" sebagai sasaran anda.

Mencari dengan Teks Pautan

Pencari CSS jenis ini di Selenium hanya berlaku untuk teks hyperlink. Kami mengakses pautan dengan awalan sasaran kami dengan "link =" dan kemudian diikuti dengan teks hyperlink.

Format Sasaran : link = link_text

Dalam contoh ini, kita akan mengakses pautan "DAFTAR" yang terdapat di laman utama Mercury Tours.

Langkah 1.

  • Pertama, pastikan anda keluar dari Mercury Tours.
  • Pergi ke halaman utama Mercury Tours.

Langkah 2 .

  • Dengan menggunakan Firebug, periksa pautan "DAFTAR". Teks pautan terdapat di antara dan teg.
  • Dalam kes ini, teks pautan kami adalah "DAFTAR". Salin teks pautan.

Langkah 3 . Salin teks pautan di Firebug dan tampalkannya ke kotak Target Selenium IDE. Awalkan dengan "link =".

Langkah 4. Klik pada butang Cari dan perhatikan bahawa Selenium IDE dapat menonjolkan pautan DAFTAR dengan betul.

Langkah 5. Untuk mengesahkan lebih lanjut, masukkan "clickAndWait" di kotak Perintah dan jalankan. Selenium IDE boleh berjaya mengklik pautan PENDAFTARAN itu dan membawa anda ke halaman Pendaftaran yang ditunjukkan di bawah.

Mencari oleh Pemilih CSS

Pemilih CSS di Selenium adalah corak rentetan yang digunakan untuk mengenal pasti elemen berdasarkan kombinasi tag HTML, id, kelas, dan atribut. Mencari oleh Pemilih CSS di Selenium lebih rumit daripada kaedah sebelumnya, tetapi ini adalah strategi mencari yang paling biasa bagi pengguna Selenium maju kerana dapat mengakses bahkan elemen-elemen yang tidak mempunyai ID atau nama.

Pemilih CSS di Selenium mempunyai banyak format, tetapi kami hanya akan menumpukan pada yang paling umum.

  • Teg dan ID
  • Tag dan kelas
  • Teg dan atribut
  • Teg, kelas dan atribut
  • Teks dalaman

Semasa menggunakan strategi ini, kami selalu mengawali kotak Target dengan "css =" seperti yang akan ditunjukkan dalam contoh berikut.

Mencari mengikut Pemilih CSS - Tag dan ID

Sekali lagi, kami akan menggunakan kotak teks E-mel Facebook dalam contoh ini. Seperti yang anda ingat, ia mempunyai ID "e-mel", dan kami telah mengaksesnya di bahagian "Mencari mengikut ID". Kali ini, kita akan menggunakan Selenium CSS Selector dengan ID dalam mengakses elemen yang sama.

Sintaks

Penerangan

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

Perlu diingat bahawa ID selalu didahului dengan tanda hash (#).

Langkah 1. Navigasi ke www.facebook.com. Dengan menggunakan Firebug, periksa kotak teks "E-mel atau Telefon".

Pada tahap ini, perhatikan bahawa tag HTML adalah "input" dan IDnya adalah "e-mel". Jadi sintaks kita akan menjadi "css = input # email".

Langkah 2. Masukkan "css = input # email" ke dalam kotak Target Selenium IDE dan klik butang Cari. Selenium IDE harus dapat menonjolkan elemen itu.

Mencari mengikut Pemilih CSS - Tag dan Kelas

Mencari oleh CSS Selector di Selenium menggunakan tag HTML dan nama kelas serupa dengan menggunakan tag dan ID, tetapi dalam kes ini, titik (.) Digunakan sebagai ganti tanda hash.

Sintaks

Penerangan

css = teg. kelas
  • tag = tag HTML elemen yang sedang diakses
  • . = tanda titik. Perkara ini mesti selalu ada semasa menggunakan CSS Selector bersama kelas
  • class = kelas elemen yang sedang diakses

Langkah 1. Pergi ke halaman demo http://demo.guru99.com/test/facebook.html dan gunakan Firebug untuk memeriksa kotak teks "E-mel atau Telefon". Perhatikan bahawa tag HTMLnya adalah "input" dan kelasnya adalah "inputtext."

Langkah 2. Di Selenium IDE, masukkan "css = input.inputtext" di kotak Sasaran dan klik Cari. Selenium IDE harus dapat mengenali kotak teks E-mel atau Telefon.

Perhatikan bahawa apabila beberapa elemen mempunyai tag dan nama HTML yang sama, hanya elemen pertama dalam kod sumber yang akan dikenali . Dengan menggunakan Firebug, periksa kotak teks Kata Laluan di Facebook dan perhatikan bahawa ia mempunyai nama yang sama dengan kotak teks E-mel atau Telefon.

Sebab mengapa hanya kotak teks E-mel atau Telefon yang diserlahkan dalam ilustrasi sebelumnya adalah bahawa ia muncul pertama di sumber halaman Facebook.

Mencari mengikut Pemilih CSS - Tag dan Atribut

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

Sintaks

Penerangan

css = tag [atribut = nilai]
  • tag = tag HTML elemen yang sedang diakses
  • [dan] = tanda kurung persegi di mana atribut tertentu dan nilai yang sesuai akan diletakkan
  • atribut = atribut yang akan digunakan. Sebaiknya gunakan atribut yang unik untuk elemen seperti nama atau ID.
  • nilai = nilai sepadan dari atribut yang dipilih.

Langkah 1. Navigasi ke halaman Pendaftaran Mercury Tours (http://demo.guru99.com/test/newtours/register.php) dan periksa kotak teks "Nama Akhir". Perhatikan teg HTMLnya ("masukan" dalam kes ini) dan namanya ("nama belakang").

Langkah 2. Di Selenium IDE, masukkan "css = input [name = lastName]" di kotak Target dan klik Cari. Selenium IDE seharusnya dapat mengakses kotak Nama Akhir dengan jayanya.

Apabila pelbagai elemen mempunyai teg dan atribut HTML yang sama, hanya elemen pertama yang akan dikenali . Tingkah laku ini serupa dengan mencari elemen menggunakan pemilih CSS dengan teg dan kelas yang sama.

Mencari mengikut Pemilih CSS - tag, kelas, dan atribut

Sintaks Penerangan
css = tag.class [atribut = nilai]
  • tag = tag HTML elemen yang sedang diakses
  • . = tanda titik. Perkara ini mesti selalu ada semasa menggunakan CSS Selector bersama kelas
  • class = kelas elemen yang sedang diakses
  • [dan] = tanda kurung persegi di mana atribut tertentu dan nilai yang sesuai akan diletakkan
  • atribut = atribut yang akan digunakan. Sebaiknya gunakan atribut yang unik untuk elemen seperti nama atau ID.
  • nilai = nilai sepadan dari atribut yang dipilih.

Langkah 1. Pergi ke halaman demo http://demo.guru99.com/test/facebook.html dan gunakan Firebug untuk memeriksa kotak input 'E-mel atau Telefon' dan 'Kata Laluan'. Perhatikan teg, kelas, dan atribut HTML mereka. Untuk contoh ini, kami akan memilih atribut 'tabindex' mereka.

Langkah 2. Kami akan mengakses kotak teks 'E-mel atau Telefon' terlebih dahulu. Oleh itu, kita akan menggunakan nilai tabindex 1. Masukkan "css = input.inputtext [tabindex = 1]" di kotak Sasaran Selenium IDE dan klik Cari. Kotak input 'E-mel atau Telefon' harus diserlahkan.

Langkah 3. Untuk mengakses kotak input Kata Laluan, ganti saja nilai atribut tabindex. Masukkan "css = input.inputtext [tabindex = 2]" di kotak Sasaran dan klik pada butang Cari. Selenium IDE mesti dapat mengenal pasti kotak teks Kata Laluan dengan jayanya.

Cari oleh CSS Selector - teks dalaman

Seperti yang anda perhatikan, label HTML jarang diberi atribut, nama, atau atribut kelas. Jadi, bagaimana kita mengaksesnya? Jawapannya adalah melalui penggunaan teks dalaman mereka. Teks dalaman adalah corak rentetan sebenar yang ditunjukkan oleh label HTML di halaman.

Sintaks

Penerangan

css = tag: mengandungi ("teks dalaman")
  • tag = tag HTML elemen yang sedang diakses
  • teks dalaman = teks dalaman unsur

Langkah 1. Navigasi ke halaman utama Mercury Tours (http://demo.guru99.com/test/newtours/) dan gunakan Firebug untuk menyiasat label "Kata Laluan". Perhatikan teg HTMLnya (yang "font" dalam hal ini) dan perhatikan bahawa ia tidak mempunyai atribut kelas, id, atau nama.

Langkah 2. Ketik css = font: mengandung ("Kata Laluan:") ke dalam kotak Sasaran Selenium IDE dan klik Cari. Selenium IDE harus dapat mengakses label Kata Laluan seperti yang ditunjukkan pada gambar di bawah.

Langkah 3. Kali ini, ganti teks dalaman dengan "Boston" sehingga Target anda sekarang akan menjadi "css = font: mengandung (" Boston ")". Klik Cari. Anda harus perhatikan bahawa label "Boston to San Francisco" menjadi terserlah. Ini menunjukkan kepada anda bahawa Selenium IDE dapat mengakses label panjang walaupun anda baru sahaja menunjukkan kata pertama dari teks dalamnya.

Mencari mengikut DOM (Model Objek Dokumen)

Model Objek Dokumen (DOM), dalam istilah sederhana, adalah cara penyusun elemen HTML. Selenium IDE dapat menggunakan DOM dalam mengakses elemen halaman. Sekiranya kita menggunakan kaedah ini, kotak Sasaran kita akan selalu bermula dengan "dom = document…"; namun, awalan "dom =" biasanya dikeluarkan kerana Selenium IDE secara automatik dapat menafsirkan apa sahaja yang bermula dengan kata kunci "dokumen" untuk menjadi jalan dalam DOM di Selenium pula.

Terdapat empat cara asas untuk mencari elemen melalui DOM di Selenium:

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

Mencari dengan DOM - getElementById

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

Sintaks

Penerangan

document.getElementById ("id elemen")

id elemen = ini adalah nilai atribut ID elemen yang akan diakses. Nilai ini harus selalu dilampirkan dalam sepasang tanda kurung ("").

Langkah 1. Gunakan halaman demo ini http://demo.guru99.com/test/facebook.html Navigasi ke sana dan gunakan Firebug untuk memeriksa kotak centang "Tetap saya log masuk". Perhatikan IDnya.

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

Langkah 2. Buka Selenium IDE dan di kotak Sasaran, masukkan "document.getElementById (" persist_box ")" dan klik Cari. Selenium IDE seharusnya dapat mencari kotak centang "Tetap masuk saya". Walaupun tidak dapat menonjolkan bahagian dalam kotak centang, Selenium IDE masih dapat mengelilingi elemen dengan batas hijau terang seperti yang ditunjukkan di bawah.

Mencari mengikut DOM - getElementsByName

Kaedah getElementById hanya dapat mengakses satu elemen pada satu masa, dan itu adalah elemen dengan ID yang anda tentukan. Kaedah getElementsByName berbeza. Ia mengumpulkan pelbagai elemen yang mempunyai nama yang anda tentukan. Anda mengakses elemen individu menggunakan indeks yang bermula pada 0.

getElementById

  • Ia hanya akan mendapat satu elemen untuk anda.
  • Elemen itu mengandungi ID yang anda nyatakan di dalam kurungan getElementById ().

getElementsByName

  • Ia akan mendapat koleksi elemen yang namanya sama.
  • Setiap elemen diindeks dengan nombor bermula dari 0 sama seperti array
  • Anda menentukan elemen mana yang ingin anda akses dengan memasukkan nombor indeksnya ke dalam tanda kurung dalam sintaks getElementsByName di bawah.

Sintaks

Penerangan

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

Langkah 1. Navigasi ke Laman Utama Mercury Tours dan log masuk menggunakan "tutorial" sebagai nama pengguna dan kata laluan. Firefox akan membawa anda ke skrin Flight Finder.

Langkah 2. Menggunakan Firebug, periksa tiga butang radio di bahagian bawah halaman (butang radio Kelas ekonomi, Kelas perniagaan, dan kelas Pertama). Perhatikan bahawa mereka semua memiliki nama yang sama iaitu "servClass".

Langkah 3. Biarkan kami mengakses butang radio "Kelas ekonomi" terlebih dahulu. Dari ketiga-tiga butang radio ini, elemen ini didahulukan, jadi ia mempunyai indeks 0. Di Selenium IDE, ketik "document.getElementsByName (" servClass ") [0]" dan klik butang Cari. Selenium IDE harus dapat mengenal pasti butang radio kelas Ekonomi dengan betul.

Langkah 4. Tukar nombor indeks menjadi 1 sehingga Sasaran anda sekarang akan menjadi document.getElementsByName ("servClass") [1]. Klik butang Cari, dan Selenium IDE seharusnya dapat menonjolkan butang radio "Kelas perniagaan", seperti yang ditunjukkan di bawah.

Mencari mengikut nama DOM - dom:

Seperti yang telah disebutkan sebelumnya, metode ini hanya akan berlaku jika elemen yang Anda akses terkandung dalam bentuk bernama.

Sintaks

Penerangan

document.forms ["nama bentuk"]. elemen ["nama elemen"]
  • nama bentuk = nilai atribut nama tag borang yang mengandungi elemen yang ingin anda akses
  • nama elemen = nilai atribut nama elemen yang ingin anda akses

Langkah 1. Navigasi ke halaman utama Mercury Tours (http://demo.guru99.com/test/newtours/) dan gunakan Firebug untuk memeriksa kotak teks Nama Pengguna. Perhatikan bahawa itu terkandung dalam bentuk bernama "rumah."

Langkah 2. Di Selenium IDE, ketik "document.forms [" home "]. Elemen [" userName "]" dan klik butang Cari. Selenium IDE mesti dapat mengakses elemen dengan jayanya.

Mencari mengikut DOM - dom: index

Kaedah ini berlaku walaupun elemen tidak berada dalam bentuk bernama kerana menggunakan indeks borang dan bukan namanya.

Sintaks

Penerangan

document.forms [indeks bentuk]. elemen [indeks elemen]
  • indeks borang = nombor indeks (bermula pada 0) borang berkenaan dengan keseluruhan halaman
  • indeks elemen = nombor indeks (bermula pada 0) elemen berkenaan dengan keseluruhan bentuk yang mengandunginya

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

Langkah 1. Navigasi ke halaman Pendaftaran Mercury Tours dan periksa kotak teks Telefon. Perhatikan bahawa borang yang mengandunginya tidak mempunyai ID dan atribut nama.

Langkah 2. Masukkan "document.forms [0] .elements [3]" di kotak Target Selenium IDE dan klik butang Cari. Selenium IDE seharusnya dapat mengakses kotak teks Telefon dengan betul.

Langkah 3. Sebagai alternatif, anda boleh menggunakan nama elemen dan bukannya indeksnya dan memperoleh hasil yang sama. Masukkan "document.forms [0] .elements [" phone "]" di kotak Target Selenium IDE. Kotak teks Telefon masih harus diserlahkan.

Mencari dengan XPath

XPath adalah bahasa yang digunakan semasa mencari nod XML (Extensible Markup Language). Oleh kerana HTML dapat dianggap sebagai implementasi XML, kita juga dapat menggunakan XPath dalam mencari elemen HTML.

Kelebihan: Ia dapat mengakses hampir semua elemen, bahkan yang tidak mempunyai atribut kelas, nama, atau id.

Kekurangan: Ini adalah kaedah yang paling rumit untuk mengenal pasti unsur kerana terlalu banyak peraturan dan pertimbangan yang berbeza.

Nasib baik, Firebug dapat menjana XPath Selenium pencari secara automatik. Dalam contoh berikut, kita akan mengakses gambar yang tidak mungkin dapat diakses melalui kaedah yang telah kita bincangkan sebelumnya.

Langkah 1. Navigasi ke Mercury Tours Homepage dan gunakan Firebug untuk memeriksa kotak oren di sebelah kanan kotak "Pautan" berwarna kuning. Rujuk gambar di bawah.

Langkah 2 . Klik kanan pada kod HTML elemen dan kemudian pilih pilihan "Salin XPath".

Langkah 3. Di Selenium IDE, ketik satu garis miring ke depan "/" di kotak Sasaran kemudian tampal XPath yang kami salin pada langkah sebelumnya. Entri dalam kotak Sasaran anda sekarang harus dimulakan dengan dua garis miring ke depan "//".

Langkah 4 . Klik pada butang Cari. Selenium IDE harus dapat menonjolkan kotak oren seperti gambar di bawah.

Ringkasan

Sintaks untuk Penggunaan Pencari

Kaedah

Sintaksis Sasaran

Contohnya
Mengikut ID id = id_of_the_element id = e-mel
Mengikut Nama name = name_of_the_element nama = nama pengguna
Mengikut Nama Menggunakan Penapis name = name_of_the_element filter = value_of_filter nama = nilai tripType = oneway
Dengan Teks Pautan pautan = pautan_teks pautan = DAFTAR
Teg dan ID css = tag # id css = masukan # e-mel
Teg dan Kelas css = teg. kelas css = input.inputtext
Teg dan Atribut css = tag [atribut = nilai] css = input [nama = nama akhir]
Teg, Kelas dan Atribut css = teg. kelas [atribut = nilai] css = input.inputtext [tabindex = 1]