Pemilih CSS di Selenium

Apa itu CSS Selector? Selenium?

A Pemilih CSS di Selenium Selektor CSS adalah pola string yang mengidentifikasi elemen web melalui kombinasi tag HTML, ID, kelas, dan atribut. Selektor CSS sedikit lebih canggih daripada pencarian berdasarkan ID atau Nama, tetapi merupakan strategi paling populer di kalangan pengembang berpengalaman. Selenium pengguna karena mereka dapat mengakses elemen yang sama sekali tidak memiliki atribut ID atau Nama.

Pemilih CSS di Selenium hadir dalam berbagai bentuk, tetapi panduan ini berfokus pada lima pola paling umum yang digunakan dalam Selenium ide:

• Tandai dan tanda pengenal
• Tag dan Kelas
• Tag dan Atribut
• Tag, Kelas, dan Atribut
• Teks Dalam

Saat menggunakan strategi ini dalam Selenium IDE, selalu awali Target kotak dengan “CSS=” seperti yang ditunjukkan pada setiap contoh di bawah ini.

Mengapa Menggunakan Selektor CSS di Selenium?

Selektor CSS adalah strategi pencari lokasi yang disukai oleh banyak orang. Selenium Para insinyur otomatisasi memilih CSS Selector karena mereka menyeimbangkan kecepatan, fleksibilitas, dan keterbacaan. Aplikasi web modern sering menggunakan ID yang dihasilkan secara dinamis atau menghapus atribut nama sepenuhnya, sehingga CSS Selector menjadi satu-satunya cara yang andal untuk menargetkan elemen tertentu pada halaman.

Keunggulan utama menggunakan CSS Selector meliputi:

• Kinerja: Selektor CSS diproses oleh mesin bawaan browser, sehingga eksekusinya lebih cepat daripada ekspresi XPath yang setara, terutama di browser lama seperti Internet Explorer.
• Fleksibilitas: Mereka menggabungkan logika tag, kelas, atribut, dan pencocokan parsial, memungkinkan penguji untuk menargetkan elemen yang tidak memiliki ID tetap.
• dibaca: Sintaksnya mencerminkan cara pengembang sudah menulis aturan CSS, yang mempersingkat kurva pembelajaran baik untuk insinyur QA maupun tim front-end.
• Stabilitas lintas browser: Selektor CSS berperilaku konsisten di seluruh Chrome, Firefox, Edge, dan Safari, mengurangi kegagalan pengujian yang tidak stabil.

Tag dan ID – Pemilih CSS

Contoh ini menggunakan kotak teks Email pada halaman login Facebook. Elemen tersebut memiliki ID “email“, dan elemen tersebut sudah diakses di bagian “Mencari berdasarkan ID”. Sekarang elemen yang sama ditargetkan menggunakan Selenium Selektor CSS dengan atribut ID.

Sintaksis

css=tag#id

• tag = tag HTML dari elemen yang sedang diakses
• # = tanda pagar, yang harus selalu ada saat menggunakan 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.comDengan menggunakan DevTools di browser Anda (atau alat lama seperti Firebug), periksa kotak teks “Email atau Telepon”.

Perhatikan bahwa tag HTML-nya adalah “memasukkan” dan ID-nya adalah “email“. Dengan demikian, Selektor CSS lengkapnya menjadi “css=masukan#email".

Langkah 2) Masukkan "css=masukan#email" ke dalam Target kotak Selenium IDE dan klik tombol Temukan. Selenium IDE menyoroti elemen yang cocok di halaman.

Tag dan Kelas – Pemilih CSS

Pemilih CSS di Selenium Penggunaan tag HTML dan nama kelas mengikuti konsep yang sama seperti tag dan ID, tetapi titik (.) menggantikan tanda pagar.

Sintaksis

css=tag.class

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

Langkah 1) Buka halaman demo https://demo.guru99.com/test/facebook.html dan periksa kotak teks “Email atau Telepon”. Perhatikan bahwa tag HTML-nya adalah “memasukkan” dan kelasnya adalah “teks masukan".

Langkah 2) In Selenium IDE, masukkan “css=masukan.teks masukan" dalam Target kotak dan klik Temukan. Selenium IDE mengenali kotak teks Email atau Telepon.

Perlu diperhatikan bahwa ketika beberapa elemen memiliki tag dan kelas HTML yang sama, hanya elemen pertama yang cocok dalam kode sumber yang akan dikenali. Periksa kotak teks Kata Sandi di halaman yang sama dan perhatikan bahwa kotak teks tersebut memiliki kelas yang sama dengan kotak teks Email atau Telepon.

Pada ilustrasi sebelumnya, hanya kotak teks Email atau Telepon yang disorot karena muncul pertama kali di kode sumber halaman.

Tag dan Atribut – Pemilih CSS

Strategi ini menggabungkan tag HTML dengan atribut spesifik yang dimiliki oleh elemen yang ingin Anda akses.

Sintaksis

css=tag[attribute=value]

• tag = tag HTML dari elemen yang sedang diakses
• [ dan ] = tanda kurung siku yang mengapit atribut dan nilai yang sesuai
• atribut = atribut yang akan digunakan. Pilih salah satu yang unik untuk elemen tersebut, seperti nama atau id.
• value = nilai yang sesuai dari atribut yang dipilih.

Langkah 1) Arahkan ke folder Mercury Halaman Pendaftaran Tur https://demo.guru99.com/test/newtours/register.php dan periksa kotak teks “Nama Belakang”. Perhatikan tag HTML-nya (“input”) dan atribut namanya (“lastName”).

Langkah 2) In Selenium IDE, masukkan “css=masukan[nama=Nama Belakang]" dalam Target kotak dan klik Temukan. Selenium IDE berhasil menemukan kolom Nama Belakang.

Jika beberapa elemen memiliki tag dan atribut HTML yang sama, hanya elemen pertama yang akan dikenali. Perilakunya identik dengan menemukan elemen 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, yang harus selalu ada saat menggunakan Selektor CSS dengan kelas
• class = kelas elemen yang sedang diakses
• [ dan ] = tanda kurung siku yang mengapit atribut tertentu dan nilai yang sesuai
• atribut = atribut yang akan digunakan. Pilih salah satu 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 periksa kotak input “Email atau Telepon” dan “Kata Sandi”. Perhatikan tag HTML, kelas, dan atributnya. Contoh ini menggunakan “tabindexatribut ”.

Langkah 2) Akses kotak teks “Email atau Telepon” terlebih dahulu menggunakan nilai tabindex 1. Masukkan “css=masukan.teks masukan[tabindex=1]"Ke Selenium IDE Target Pilih kotak dan klik Cari. Kolom Email atau Telepon akan disorot.

Langkah 3) Untuk menargetkan kotak input Kata Sandi, cukup ganti nilai tabindex. Masukkan “css=masukan.teks masukan[tabindex=2]" dalam Target kotak dan klik Temukan. Selenium IDE berhasil menemukan kotak teks Kata Sandi.

Teks Dalam – Selektor CSS

Label HTML jarang diberi atribut id, name, atau class. Jadi bagaimana cara mengaksesnya? SeleniumJawabannya ada melalui teks internal 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 dalam = konten teks yang terlihat dari elemen tersebut

Langkah 1) Arahkan ke folder Mercury Beranda tur https://demo.guru99.com/test/newtours/ dan periksa label “Kata Sandi”. Perhatikan tag HTML-nya (“font” dalam hal ini) dan amati bahwa elemen tersebut tidak memiliki atribut class, id, atau name.

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

Langkah 3) Kali ini, ganti teks bagian dalam dengan “Boston” sehingga Target menjadi “css=font:berisi(“Boston”)“. Klik Cari. Label “Boston ke San Francisco” disorot, menunjukkan bahwa Selenium IDE dapat menemukan label yang panjang bahkan ketika hanya kata pertama dari teks dalamnya yang diberikan.

Selektor CSS vs XPath dalam Selenium

Baik CSS Selector maupun XPath digunakan untuk mengidentifikasi elemen web. SeleniumNamun, keduanya memiliki kekuatan yang berbeda. Tabel di bawah ini membandingkan kedua strategi pencarian lokasi berdasarkan dimensi-dimensi utama:

Kriteria	Pemilih CSS	XPath
Kecepatan	Lebih cepat, berjalan menggunakan mesin bawaan browser.	Lebih lambat, terutama di browser lama.
Kepemimpinan	Teruskan saja (dari orang tua ke anak)	Maju dan mundur (anak ke orang tua)
Sintaksis	Lebih singkat dan mirip dengan aturan CSS.	Ekspresi jalur hierarkis yang lebih panjang
Pencocokan teks	Terbatas pada pseudo-kelas :contains()	Fungsi text() dan contains() yang kuat
Terbaik untuk	Tata letak statis dan aplikasi web modern	Penelusuran DOM yang kompleks dan pencari lokasi berbasis teks.

Praktik Terbaik untuk Menulis Selektor CSS di Selenium

Menulis Selector CSS yang andal lebih dari sekadar mengetahui sintaksnya. Praktik-praktik berikut membantu penguji membuat Selector yang stabil dan mudah dipelihara. Selenium Skrip yang tetap berfungsi setelah perubahan UI:

1. Lebih menyukai atribut unik: Selalu pilih atribut id, data-test-id, atau name yang secara eksplisit ditambahkan untuk otomatisasi. Atribut-atribut ini tetap stabil meskipun tata letak visual berubah.
2. Hindari penggunaan selector yang terlalu bertingkat: Rantai panjang seperti div > div > ul > li > a Mudah rusak saat pengembang melakukan refactoring pada markup. Usahakan agar selector sesingkat mungkin.
3. Gunakan pencocokan sebagian dengan bijak: Pola seperti [class*="btn-primary"] mentoleransi perubahan nama kelas kecil, tetapi mungkin juga cocok dengan elemen yang tidak diinginkan.
4. Hindari penggunaan locator berbasis indeks: Pemilih seperti nth-child(3) rapuh karena penambahan elemen saudara kandung menggeser setiap posisi.
5. Validasi pemilih di DevTools: Sebelum menjalankan Selenium skrip, tempelkan selektor ke Konsol Chrome DevTools menggunakan document.querySelector() untuk memastikan bahwa fungsi tersebut mengembalikan tepat satu elemen.
6. Gabungkan atribut untuk keunikan: Ketika suatu kelas digunakan bersama oleh banyak elemen, tambahkan filter atribut seperti input.form-control[name="email"] untuk memperjelas target.
7. Dokumentasikan dan gunakan kembali: Sentralisasikan selektor di dalam kelas Page Object sehingga satu pembaruan dapat memperbaiki setiap pengujian yang merujuk pada elemen yang sama.

Mengikuti pedoman ini mengurangi ketidakpastian, meningkatkan kecepatan eksekusi pengujian, dan membuat Selenium suite lebih mudah dirawat seiring waktu.

Ringkasan: Referensi Cepat Sintaks Selektor CSS

Tabel di bawah ini merangkum setiap Selenium Pola Selektor CSS yang dibahas dalam panduan ini:

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]
Teks Dalam	css=tag:berisi(“teks”)	css=font:berisi("Kata Sandi:")

Pertanyaan Umum Demo Slot