Pemilih CSS di Selenium

Oleh: Krishna rungta Krishna rungta
Hours Updated

Apa itu Pemilih CSS?

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

Pemilih CSS di Selenium memiliki banyak format, tetapi kami hanya akan fokus pada format yang paling umum. Berbagai jenis CSS Locator di Selenium IDE

  • Tandai dan tanda pengenal
  • Tandai dan kelas
  • Tag dan atribut
  • Tag, kelas, dan atribut
  • Teks batin

Saat menggunakan strategi ini, kami selalu memberi awalan pada Target kotak dengan “css=" seperti yang akan ditunjukkan pada contoh berikut.

tag dan id – Pemilih CSS

Sekali lagi, kita akan menggunakan kotak teks Email Facebook dalam contoh ini. Seperti yang Anda ingat, kotak teks tersebut memiliki ID “email,” dan kita telah mengaksesnya di bagian “Menemukan Lokasi Berdasarkan ID”. Kali ini, kita akan menggunakan Selenium Pemilih CSS dengan ID dalam mengakses elemen yang sama.

Sintaksis

css=tag#id

  • tag = tag HTML dari elemen yang sedang diakses
  • # = tanda pagar. Ini harus selalu ada saat menggunakan a Selenium Pemilih CSS dengan ID
  • id = ID elemen yang sedang diakses

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

Langkah 1) Navigasi ke www.facebook.comMenggunakan 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”.

Tag dan id - Pemilih CSS

Langkah 2) Masukkan “css=input#email” ke dalam Target kotak Selenium IDE dan klik tombol Temukan. Selenium IDE harus dapat menyorot elemen itu.

Tag dan id - Pemilih CSS

tag dan kelas – Pemilih CSS

Pemilih CSS di Selenium Menggunakan tag HTML dan nama kelas mirip dengan menggunakan tag dan ID, tetapi dalam kasus ini, yang digunakan adalah titik (.) sebagai pengganti tanda pagar.

Sintaksis

css=tag.class

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

Langkah 1) Buka halaman demo https://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.”

Tag dan kelas - Pemilih CSS

Langkah 2) In Selenium IDE, masukkan “css=input.inputtext” di Target kotak dan klik Temukan. Selenium IDE seharusnya dapat mengenali kotak teks Email atau Telepon.

Tag dan kelas - Pemilih CSS

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

Tag dan kelas - Pemilih CSS

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

Tag dan kelas - Pemilih CSS

ARTIKEL TERKAIT

tag dan atribut – Pemilih CSS

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

Sintaksis

css=tag[attribute=value]

  • 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. Disarankan untuk menggunakan atribut yang unik untuk elemen tersebut seperti nama atau ID.
  • value = nilai yang sesuai dari atribut yang dipilih.

Langkah 1) Navigasi ke Mercury Halaman Pendaftaran Tur https://demo.guru99.com/test/newtours/register.php dan periksa kotak teks “Nama Belakang”. Catat tag HTML-nya (“input” dalam kasus ini) dan namanya (“namaBelakang”).

Tag dan atribut - Pemilih CSS

Langkah 2) In Selenium IDE, masukkan “css=input[nama=NamaBelakang]” di Target kotak dan klik Temukan. Selenium IDE seharusnya dapat mengakses kotak Nama Belakang dengan sukses.

Tag dan atribut - Pemilih CSS

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.

tag, kelas, dan atribut – Pemilih CSS

Sintaksis

css=tag.class[attribute=value]

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

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

Tag, kelas, dan atribut - Pemilih CSS

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 Selenium IDE Target kotak dan klik Temukan. Kotak masukan 'Email atau Telepon' akan disorot.

Tag, kelas, dan atribut - Pemilih CSS

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

Tag, kelas, dan atribut - Pemilih CSS

teks bagian dalam – Pemilih CSS

Seperti yang mungkin 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 ditampilkan label HTML pada halaman.

Sintaksis

css=tag:contains("inner text")

  • tag = tag HTML dari elemen yang sedang diakses
  • teks bagian dalam = teks bagian dalam elemen

Langkah 1) Navigasi ke Mercury Beranda tur https://demo.guru99.com/test/newtours/ dan gunakan Firebug untuk menyelidiki label “Kata Sandi”. Catat tag HTML-nya (yang dalam hal ini adalah “font”) dan perhatikan bahwa tag tersebut tidak memiliki atribut kelas, id, atau nama.

Teks bagian dalam - Pemilih CSS

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

Teks bagian dalam - Pemilih CSS

Langkah 3) Kali ini, ganti teks bagian dalam dengan “Boston” sehingga Anda Target sekarang akan 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.

Teks bagian dalam - Pemilih CSS

Ringkasan

Sintaks untuk Menemukan Berdasarkan Penggunaan Pemilih CSS

metode Target Sintaksis Example
Tandai dan tanda pengenal css=tag#id css=masukan#email
Tag dan Kelas css=tag.kelas css=masukan.teks masukan
Tag dan Atribut css=tag[atribut=nilai] css=masukan[nama=Nama Belakang]
Tag, Kelas, dan Atribut css=tag.class[atribut=nilai] css=masukan.teks masukan[tabindex=1]

Anda mungkin ingin: