Berisi (teks dalam pemilih selenium css)

Menemukan elemen dengan pemilih CSS adalah cara yang lebih disukai karena lebih cepat dan lebih mudah dibaca daripada XPath

Tutorial ini memberikan contoh cara menemukan elemen web di Selenium menggunakan pemilih CSS

Pemilih CSS berdasarkan Atribut

Bayangkan kita memiliki tag dengan atribut berikut [id, class, name, value]

Cara umum untuk menemukan elemen berdasarkan atribut adalah

css = element_name[='']

Contoh

WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));

Atribut Identitas

Dalam CSS, kita dapat menggunakan notasi

css = element_name[='']

WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));

Contoh

driver.findElement(By.cssSelector("input#firstname"));

//or

driver.findElement(By.cssSelector("#firstname"));

Atribut Kelas

Prinsip yang sama dapat digunakan untuk menemukan elemen dengan atribut

WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));

Kami menggunakan notasi

WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));

driver.findElement(By.cssSelector("input.myForm"));

//or

driver.findElement(By.cssSelector(".myForm"));

Catatan. Berhati-hatilah saat menggunakan. notasi karena mungkin ada banyak elemen web pada sumber HTML dengan atribut kelas yang sama.

Beberapa Atribut

Terkadang ada kebutuhan untuk lebih spesifik dengan kriteria pemilihan untuk menemukan elemen yang tepat

Nilai tampilan bisa berupa "none" atau "block" tergantung pada panggilan ajax. Dalam situasi ini, kita harus menemukan elemen berdasarkan kelas dan gaya

Contoh

driver.findElement(By.cssSelector("div[class='ajax_enabled'] [style='display:block']"));

Atribut TIDAK mengandung nilai tertentu

Di WebDriver, bagaimana Anda menemukan elemen yang atributnya berisi nilai yang tidak ingin Anda pilih?

Misalkan Anda memiliki banyak elemen yang memiliki atribut dan nilai atribut yang sama, tetapi beberapa elemen tersebut memiliki variabel lain yang ditambahkan ke nilainya. e. g

Dalam cuplikan di atas, kami ingin memilih hari yang tersedia (mis. e. dua elemen

WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));

Seperti yang bisa dilihat, keempat div berisi “calendar-day-“ tetapi dua yang pertama juga berisi “unavailable” yang tidak kita inginkan

Pemilih CSS untuk Tidak memilih dua div pertama adalah

driver.findElement(By.cssSelector("div[class*=calendar-day-]:not([class*='unavailable'])"));"

Menemukan Elemen Anak

Untuk menemukan tag gambar, kami menggunakan

css = element_name[='']

Beberapa Elemen Anak

Ada kalanya ada beberapa elemen turunan di dalam elemen induk yang sama seperti elemen daftar

css = element_name[='']

Seperti yang bisa dilihat, masing-masing elemen daftar tidak memiliki id yang terkait dengannya. Untuk menemukan elemen dengan teks 'Oranye', kita harus menggunakan

WebElement firstName = driver.findElement(By.cssSelector("input[name='first_name']"));

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

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

• Tandai dan tanda pengenal
• 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 ditunjukkan pada contoh berikut

Apa yang Akan Anda Pelajari

tag dan id – Pemilih CSS

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

Sintaksis

css=tag#id

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

Perlu diingat bahwa ID selalu diawali dengan tanda hash (#)

Langkah 1. Arahkan ke 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 Selenium IDE dan klik tombol Temukan. Selenium IDE harus dapat menyorot elemen itu

tag dan kelas – Pemilih CSS

Pemilih CSS di Selenium menggunakan tag HTML dan nama kelas mirip dengan menggunakan tag dan ID, tetapi dalam hal ini, titik (. ) digunakan sebagai pengganti tanda hash

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 dari elemen yang sedang 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. Di 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 banyak 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 itu muncul pertama kali di sumber halaman Facebook

tag dan atribut – Pemilih CSS

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

Sintaksis

css=tag[attribute=value]

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

Langkah 1. Arahkan ke halaman Pendaftaran Mercury Tours http://demo.guru99.com/test/newtours/register.php dan periksa kotak teks "Nama Belakang". Catat tag HTML-nya ("input" dalam hal ini) dan namanya ("lastName")

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

Ketika beberapa elemen memiliki tag dan atribut HTML yang sama, hanya elemen pertama yang akan dikenali. Perilaku ini mirip dengan menemukan 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 dari elemen yang sedang diakses
• [ dan ] = tanda kurung siku tempat atribut tertentu dan nilainya yang sesuai akan ditempatkan
• atribut = atribut yang akan digunakan. Dianjurkan untuk menggunakan atribut yang unik untuk elemen seperti nama atau ID
• value = 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, kelas, dan atribut HTML mereka. Untuk contoh ini, kami akan memilih atribut 'tabindex'

Langkah 2. Kami akan mengakses kotak teks 'Email atau Telepon' terlebih dahulu. Jadi, kami akan menggunakan nilai tabindex 1. Masukkan “css=input. inputtext[tabindex=1]” di kotak Target Selenium IDE dan klik Temukan. Kotak input 'Email atau Telepon' harus disorot

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

teks dalam – Pemilih CSS

Seperti yang Anda ketahui, label HTML jarang diberi atribut id, nama, atau kelas. Jadi, bagaimana kita mengaksesnya? . Teks 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 = teks dalam elemen

Langkah 1. Arahkan ke beranda Mercury Tours http://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

Langkah 2. Ketik css=font. berisi(“Kata sandi. ”) ke dalam kotak Selenium IDE Target dan klik Temukan. Selenium IDE harus dapat mengakses label Kata Sandi seperti yang ditunjukkan pada gambar di bawah

Langkah 3. Kali ini, ganti teks bagian dalam dengan "Boston" sehingga Target Anda sekarang menjadi "css=font. mengandung ("Boston")". Klik Temukan. Anda harus memperhatikan 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

Bagaimana cara menulis pemilih CSS dengan teks berisi di Selenium?

Bisakah kita menggunakan berisi di pemilih CSS?

Apakah ada pemilih CSS untuk elemen yang berisi teks tertentu?

Bagaimana cara memilih teks di pemilih CSS?