Cara menangkap pemilih css

Jika Anda telah menggunakan Google Pengelola Tag untuk sementara waktu, Anda mungkin mengalami skenario di mana Anda ingin membedakan antara klik pada tombol yang tidak memiliki ID atau Kelas unik. Pemilih CSS memungkinkan Anda membuat pemicu dengan cara yang lebih fleksibel, menargetkan blok penyusun yang digunakan pengembang untuk menata situs web Anda

Katakanlah Anda ingin mempersempit penargetan dan melacak klik pada tombol yang memiliki Kelas tertentu tetapi ada beberapa tombol di halaman dengan Kelas yang sama dan Anda hanya menginginkan tombol yang ada di 'div' tertentu. Anda akan menggunakan Pemilih CSS di pemicu Anda untuk melakukan itu

Posting blog ini tidak akan menjadi panduan lengkap untuk Pemilih CSS tetapi ada panduan referensi praktis yang kami rekomendasikan di sini. https. // www. w3schools. com/cssref/css_selectors. asp

Jika Anda ingin melacak tombol di situs web, hal pertama yang biasanya Anda lakukan adalah mengeklik kanan tombol, mengeklik 'Periksa', lalu melihat kodenya. Jika kita mengambil tombol 'cari tahu lebih lanjut' di sebelah kanan semua posting blog kita (termasuk yang ini. ) sebagai contoh, kita dapat melihat bahwa ia memiliki Kelas 'et_pb_button'

Selector Pattern dibangun menggunakan tag HTML, atribut dan nilainya. Tema sentral di balik prosedur untuk membuat CSS Selector dan Xpath sangat mirip yang mendasari satu-satunya perbedaan dalam protokol konstruksinya

Seperti Xpath, pemilih CSS juga dapat menemukan elemen web yang tidak memiliki ID, kelas, atau Nama

Jadi sekarang bersiaplah, mari kita bahas tipe primitif dari CSS Selector

Apa yang Akan Anda Pelajari

Pemilih CSS. PENGENAL

Dalam contoh ini, kami akan mengakses kotak teks "Email" yang ada di formulir login di Gmail. com

Kotak teks Email memiliki atribut ID yang nilainya ditentukan sebagai "Email". Dengan demikian atribut ID dan nilainya dapat digunakan untuk membuat CSS Selector untuk mengakses kotak teks email

Membuat Pemilih CSS untuk elemen web

Langkah 1. Temukan/periksa elemen web (kotak teks "Email" dalam kasus kami) dan perhatikan bahwa tag HTML adalah "input" dan nilai atribut ID adalah "Email" dan keduanya secara kolektif membuat referensi ke "Kotak Teks Email". Karenanya data di atas akan digunakan untuk membuat Pemilih CSS

Verifikasi nilai locator

Langkah 1. Ketik “css=input#Email” i. e. nilai locator di kotak target di Selenium IDE dan klik tombol Find. Perhatikan bahwa kotak Teks Email akan disorot

Sintaksis

css=<#>

• Tag HTML – Ini adalah tag yang digunakan untuk menunjukkan elemen web yang ingin kita akses
• # – Tanda hash digunakan untuk melambangkan atribut ID. Wajib menggunakan tanda hash jika atribut ID digunakan untuk membuat Pemilih CSS
• Nilai atribut ID – Ini adalah nilai atribut ID yang sedang diakses
• Nilai ID selalu diawali dengan tanda hash

Catatan. Juga berlaku untuk jenis Pemilih CSS lainnya

• Saat menentukan Pemilih CSS di kotak teks target Selenium IDE, selalu ingat untuk mengawalinya dengan "css="
• Urutan artefak di atas tidak dapat diubah
• Jika dua atau lebih elemen web memiliki tag HTML dan nilai atribut yang sama, elemen pertama yang ditandai di sumber halaman akan diidentifikasi

Pemilih CSS. Kelas

Dalam contoh ini, kami akan mengakses kotak centang "Tetap masuk" yang ada di bawah formulir masuk di gmail. com

Kotak centang "Tetap masuk" memiliki atribut Kelas yang nilainya ditentukan sebagai "ingat". Dengan demikian atribut Kelas dan nilainya dapat digunakan untuk membuat Pemilih CSS untuk mengakses elemen web yang ditunjuk

Menemukan elemen menggunakan Kelas sebagai Pemilih CSS sangat mirip dengan menggunakan ID, satu-satunya perbedaan terletak pada pembentukan sintaksisnya

Bacaan yang Direkomendasikan => Jelajahi semua tentang Elemen dan Komponen Bulma

Membuat Pemilih CSS untuk elemen web

Langkah 1. Temukan/periksa elemen web ("Tetap masuk" kotak centang dalam kasus kami) dan perhatikan bahwa tag HTML adalah "label" dan nilai atribut ID adalah "ingat" dan keduanya secara kolektif membuat referensi ke "Tetap masuk

Verifikasi nilai locator

Langkah 1. Ketik “css=label. ingat” i. e. nilai locator di kotak target di Selenium IDE dan klik tombol Temukan. Perhatikan bahwa kotak centang "Tetap masuk" akan disorot

Sintaksis

css=<.>

• – Tanda titik digunakan untuk melambangkan atribut Kelas. Wajib menggunakan tanda titik jika atribut Kelas digunakan untuk membuat Pemilih CSS
• Nilai Kelas selalu diawali dengan tanda titik

Pemilih CSS. Atribut

Dalam contoh ini, kami akan mengakses tombol "Masuk" yang ada di bawah formulir masuk di gmail. com

Tombol "Masuk" memiliki atribut tipe yang nilainya didefinisikan sebagai "kirim". Atribut jenis ini dan nilainya dapat digunakan untuk membuat Pemilih CSS untuk mengakses elemen web yang ditunjuk

Membuat Pemilih CSS untuk elemen web

Langkah 1. Temukan/periksa elemen web (tombol "Masuk" dalam kasus kami) dan perhatikan bahwa tag HTML adalah "input", atributnya adalah tipe dan nilai atribut tipe adalah "kirim" dan semuanya bersama-sama membuat referensi ke

Verifikasi nilai locator

Langkah 1. Ketik “css=input[ketik=’kirim’]” i. e. nilai locator di kotak target di Selenium IDE dan klik tombol Temukan. Perhatikan bahwa tombol "Masuk" akan disorot

Sintaksis

css=<[attribute=Value of attribute]>

• Atribut – Ini adalah atribut yang ingin kita gunakan untuk membuat CSS Selector. Itu bisa nilai, jenis, nama dll. Direkomendasikan untuk memilih atribut yang nilainya mengidentifikasi elemen web secara unik
• Nilai atribut – Ini adalah nilai atribut yang sedang diakses

Pemilih CSS. ID/Kelas dan atribut

Dalam contoh ini, kami akan mengakses kotak teks "Kata Sandi" yang ada di formulir login di gmail. com

Kotak teks "Password" memiliki atribut ID yang nilainya didefinisikan sebagai "Passwd", jenis atribut yang nilainya didefinisikan sebagai "password". Dengan demikian atribut ID, atribut tipe dan nilainya dapat digunakan untuk membuat Pemilih CSS untuk mengakses elemen web yang ditunjuk

Membuat Pemilih CSS untuk elemen web

Langkah 1. Temukan/periksa elemen web (kotak teks "Kata Sandi" dalam kasus kami) dan perhatikan bahwa tag HTML adalah "masukan", atribut adalah ID dan jenis dan nilainya yang sesuai adalah "Kata Sandi" dan "kata sandi" dan semuanya bersama-sama membuat

Verifikasi nilai locator

Langkah 1. Ketik “css=input#Passwd[nama=’Passwd’]” i. e. nilai locator di kotak target di Selenium IDE dan klik tombol Temukan. Perhatikan bahwa kotak teks "Kata Sandi" akan disorot

Sintaksis

css=<. Or #><[attribute=Value of attribute]>

Dua atau lebih atribut juga dapat dilengkapi dalam sintaks. Misalnya , “css=input#Passwd[type='password'][name='Passwd']”.

Pemilih CSS. Sub-string

CSS di Selenium memungkinkan pencocokan string parsial dan dengan demikian memperoleh fitur yang sangat menarik untuk membuat Pemilih CSS menggunakan substring. Ada tiga cara di mana Pemilih CSS dapat dibuat berdasarkan mekanisme yang digunakan untuk mencocokkan substring

Jenis mekanisme

Semua mekanisme di bawahnya memiliki makna simbolis

• Cocokkan awalan
• Mencocokkan akhiran
• Cocokkan substring

Mari kita bahas secara rinci

Cocokkan awalan

Ini digunakan untuk menyesuaikan dengan string dengan bantuan awalan yang cocok

Sintaksis

css=<[attribute^=prefix of the string]>                

• ^ – Notasi simbolik untuk mencocokkan string menggunakan awalan
• Awalan – Ini adalah string yang didasarkan pada operasi pencocokan yang dilakukan. Kemungkinan string diharapkan dimulai dengan string yang ditentukan

Misalnya . Mari kita pertimbangkan "kotak teks Kata Sandi", sehingga Pemilih CSS yang sesuai akan menjadi.

css=input#Passwd[nama^=’Lulus’]

Mencocokkan akhiran

Ini digunakan untuk menyesuaikan dengan string dengan bantuan sufiks yang cocok

Sintaksis

css=<[attribute$=suffix of the string]>                

• # – Notasi simbolik untuk mencocokkan string menggunakan akhiran
• Akhiran – Ini adalah string yang didasarkan pada operasi pencocokan yang dilakukan. Kemungkinan string diharapkan diakhiri dengan string yang ditentukan

Misalnya, Mari kita pertimbangkan lagi “Kotak teks kata sandi”, sehingga Pemilih CSS yang sesuai adalah.

css=input#Passwd[nama$=’wd’]

Cocokkan substring

Ini digunakan untuk menyesuaikan dengan string dengan bantuan substring yang cocok

Sintaksis

css=<[attribute*=sub string]>                

• * – Notasi simbolik untuk mencocokkan string menggunakan sub string
• Sub string – Ini adalah string yang didasarkan pada operasi pencocokan yang dilakukan. Kemungkinan string diharapkan memiliki pola string yang ditentukan

Misalnya, mari kita pertimbangkan lagi “Kotak teks kata sandi”, jadi Pemilih CSS yang sesuai adalah.

css=input#Passwd[nama$=’wd’]

Pemilih CSS. Teks batin

Teks bagian dalam membantu kami mengidentifikasi dan membuat Pemilih CSS menggunakan pola string yang dimanifestasikan oleh Tag HTML di halaman web

Pertimbangkan, "Butuh bantuan?" . com

Tag jangkar yang mewakili hyperlink memiliki teks yang terlampir di dalamnya. Dengan demikian teks ini dapat digunakan untuk membuat Pemilih CSS untuk mengakses elemen web yang ditunjuk

Sintaksis

css=<:><(text)>

• – Tanda titik digunakan untuk melambangkan metode berisi
• Berisi – Ini adalah nilai atribut Kelas yang sedang diakses
• Teks – Teks yang ditampilkan di manapun pada halaman web terlepas dari lokasinya

Ini adalah salah satu strategi yang paling sering digunakan untuk menemukan elemen web karena sintaksnya yang disederhanakan

Karena pembuatan CSS Selector dan Xpath membutuhkan banyak usaha dan latihan, sehingga prosesnya hanya dilakukan oleh pengguna yang lebih canggih dan terlatih.

Tutorial Berikutnya #7 . Melanjutkan tutorial kami berikutnya, kami akan mengambil kesempatan untuk memperkenalkan Anda dengan perluasan strategi penempatan. Jadi, dalam tutorial berikutnya, kita akan mempelajari mekanisme untuk menemukan elemen web di Google Chrome dan Internet Explorer.

Kami membahas Selenium Locators lebih detail karena ini merupakan bagian penting dari pembuatan Skrip Selenium

Beri tahu kami pertanyaan/komentar Anda di bawah ini

Bacaan yang Direkomendasikan

• Cara Menemukan Elemen di Browser Chrome dan IE untuk Membuat Skrip Selenium – Tutorial Selenium #7

  Bagaimana cara mendapatkan pemilih CSS?

  Cukup klik kanan dan klik Inspect Element . Ini akan memunculkan pemilih CSS untuk elemen itu.

  Bagaimana cara mendapatkan pemilih CSS dari XPath?

  Menemukan Pemilih CSS atau XPath .

  Klik kanan pada sebuah elemen

  Pilih Periksa

  Temukan elemen di panel Elemen Alat Pengembang

  Klik kanan pada baris elemen

  Pilih Salin -> Salin Pemilih atau Salin -> Salin XPath

  Rekatkan hasilnya ke bidang ID tindakan

  Bagaimana Anda mengambil CSS?

  Cara Mendapatkan Semua CSS Untuk Elemen HTML .

  Buka halaman web

  Klik kanan pada elemen yang Anda perlukan untuk mendapatkan CSS-nya

  Pilih Periksa , Periksa Elemen , atau opsi serupa lainnya

  Alat Pengembang akan terbuka. .

  Elemen harus dipilih secara default di dalam panel kiri tempat kode HTML dicantumkan

  Bagaimana cara menargetkan pemilih di CSS?

  Pemilih CSS .

  Menandai. Memilih elemen dengan tag HTML-nya adalah cara yang paling jelas. .

  Penggabung. Menggunakan kombinator adalah cara yang efektif untuk menyempurnakan pemilih tag. .

  PENGENAL. Menambahkan atribut ID ke elemen HTML adalah cara umum CSS untuk menargetkannya. .

  Kelas. .

  Atribut. .

  Pencocokan substring. .

  Kelas Pseudo