Bagaimana cara memilih css di selenium?

Halo semuanya, Pemilih CSS di Selenium akan dijelaskan dalam tutorial ini, saya akan menjelaskan kepada Anda cara menulis Pencari Lokasi CSS yang efektif untuk menginterogasi elemen web untuk proyek otomasi Anda. Sebagai patokan, strategi interogasi Anda harus dalam urutan di bawah ini

  • Pertama coba gunakan Id, nama, kelas, dll
  • Kemudian, coba interogasi dengan CSS
  • Kemudian, gunakan XPath untuk menemukan elemen

Pemilih CSS dalam Strategi Selenium

Situs Demo Referensi. http. // www. selenium mudah. com/test/basic-first-form-demo. html

Sintaks Dasar

ID#idnameClass. nama kelas

1) Menggunakan Jalur Absolut Pemilih CSS

Anda harus menggunakan > tanda tangan untuk mencapai elemen secara langsung. (Catatan. Untuk XPath, kami menggunakan / menandatangani untuk ini. )

Contoh

Sintaks. form>div>masukan

Bagaimana cara memilih css di selenium?

2) Menggunakan Non-Absolute Path CSS Selector

Anda harus menggunakan spasi putih di antara tag untuk menemukan elemen. Menggunakan ". ” untuk kelas dan “#” untuk id.

Contoh

Sintaks. bentuk. form-group #user-message

Bagaimana cara memilih css di selenium?

3) Menggunakan Nama Tag Pemilih CSS di Selenium

Anda dapat menulis nama tag secara langsung seperti “form”, “div”, “img”, “body”, dll. Seperti gambar di bawah ini, saya menulis tag “form” untuk menemukan elemen form.
(Catatan. Untuk XPath kami menggunakan //tagname untuk ini. )

Contoh

Bagaimana cara memilih css di selenium?

4) Menggunakan Tag & Atribut & Nilai Trio

Anda dapat menggunakan sintaks tag[attribute='value'] .
(Catatan. Untuk XPath kami menggunakan tag[@attribute='value'] untuk ini. )

Contoh

Sintaks. input[id='user-message']

Bagaimana cara memilih css di selenium?

5) Menggunakan Teks Berisi Atribut

Anda dapat menggunakan tag[attribute*='containing text'] sintaks.
(Catatan. Untuk XPath kami menggunakan tag[contains((@attribute,’containing text’)] untuk ini. )

Contoh

Sintaks. masukan[id*='er-messa']

Bagaimana cara memilih css di selenium?

6) Menggunakan Teks Awal Atribut

Anda dapat menggunakan sintaks tag[attribute^='starting text'] .
(Catatan. Untuk XPath kami menggunakan  tag[dimulai dengan( @attribute, ‘starting text’)] untuk ini. )

Contoh

Sintaks. masukan[id^='pengguna']

Bagaimana cara memilih css di selenium?

7) Menggunakan Teks Akhir Atribut

Anda dapat menggunakan sintaks tag[attribute$='ending text'] .

Contoh

Sintaks. masukan[id$='pesan']

Bagaimana cara memilih css di selenium?

8) Menggunakan Operator Koma untuk Mengimplementasikan Operasi ATAU

Anda dapat menggunakan operator “,” di antara dua pernyataan pencari lokasi CSS.

Contoh

Sintaks. form#get-input,input#user-message

Bagaimana cara memilih css di selenium?

9) Menggunakan Tag dan ID Pemilih CSS di Selenium

Anda dapat menggunakan “Tag#Id” 

Contoh

Sintaks. input#user-message

Bagaimana cara memilih css di selenium?

10) Menggunakan Tag dan Kelas Pemilih CSS di Selenium

Anda dapat menggunakan “Tag. Kelas” 

Contoh

Sintaks. masukan. kontrol bentuk

Bagaimana cara memilih css di selenium?

11) Menggunakan tipe pertama Pemilih CSS di Selenium

Anda dapat menggunakan “Tag. tipe pertama”. Ini akan memilih elemen tag pertama.

Contoh

Sintaks. . dahan-pohon>ul>li. tipe pertama

Bagaimana cara memilih css di selenium?

12) Menggunakan tipe terakhir Pemilih CSS di Selenium

Anda dapat menggunakan “Tag. tipe terakhir” . Ini akan memilih elemen tag terakhir.

Contoh

Sintaks. . dahan-pohon>ul>li. tipe pertama

Bagaimana cara memilih css di selenium?

Catatan. Jika Anda ingin menemukan elemen atau anak terakhir, Anda dapat menggunakan pencari di bawah ini

  • Menandai. n-tipe-terakhir (n)
  • Menandai. ke-n-anak-terakhir(n)

13) Menggunakan *. tipe terakhir Pemilih CSS di Selenium

Anda dapat menggunakan “*last-of-type” . Ini akan memilih anak terakhir dari tag induk.

Contoh

Sintaks. . dahan-pohon>ul>*. last-of-type (Memilih anak terakhir dari tag induk “ul”. )

Bagaimana cara memilih css di selenium?

14) Menggunakan t ag. nth-of-type(n) Pemilih CSS di Selenium

Anda dapat menggunakan “tag. nth-of-type(n)” . Ini akan memilih elemen tag ke-n dari daftar.

Contoh

Sintaks. . dahan-pohon>ul>li. nth-of-type(3)   (Memilih elemen li ke-3. )

Bagaimana cara memilih css di selenium?

Catatan. Jika Anda tidak menentukan tag sebagai  *. nth-of-type(3) itu akan memungkinkan Anda untuk memilih anak ketiga.

Bagaimana cara memilih css di selenium?

15) Menggunakan t ag. nth-child(n) Pemilih CSS di Selenium

Anda dapat menggunakan “tag. nth-child(n)” . Ini akan memilih anak ke-n.

Contoh

Sintaks. . dahan-pohon>ul>li. nth-child(3) (Ini akan memilih anak ke-n. )

Bagaimana cara memilih css di selenium?

16) Menggunakan Sibling “+” Operator Pemilih CSS di Selenium

Anda dapat menggunakan “E1+ E2“ . Pertama, cari E1 lalu pilih E2.

Contoh HTML

<ul id="Cars">
   <li id="mercedes">Mercedes made in Germany!</li>
   <li>BMW</li>
   <li>Porsche</li>
</ul>

Sintaks. li#mercedes + li

'li#automation + li' pertama akan pergi ke elemen li dengan id 'mercedes' dan kemudian pilih li yang berdekatan yang merupakan item daftar 'BMW'

Contoh

Sintaks. . dahan-pohon>ul>li. nth-child(3) + li  (Ini akan memilih elemen berikutnya. )

Bagaimana cara memilih css di selenium?

17) Kecualikan Nama Kelas CSS di Selenium CSS Locators

Anda dapat mengecualikan salah satu nama kelas dengan. bukan(. nama-kelas) sintaks

Contoh

btn. btn-info. tarik-kanan. bukan(. xs-mt-0)

Pemilih di atas mengecualikan kelas "xs-mt-o" dan memilih garis di bawah seperti yang ditunjukkan gambar di bawah ini

Bagaimana cara memilih css di selenium?

Selain itu, Anda dapat mempelajari cara menulis pencari lokasi Smart XPath di artikel di bawah ini

Semua Taktik Selenium XPath Dijelaskan

Anda dapat menemukan banyak trik di bawah pdf. Saya sarankan Anda menyimpannya

https. // www. gerbang merah. com/simple-talk/wp-content/uploads/imported/1269-Locators_table_1_0_2. pdf?berkas=4937

Sampai jumpa di artikel selanjutnya ;)
Onur

Bagaimana cara memilih css di selenium?

Onur Baskirt

Onur Baskirt adalah profesional TI senior dengan pengalaman lebih dari 15 tahun. Sekarang, dia bekerja sebagai Konsultan Teknis Senior di Emirates Airlines di Dubai

Bagaimana menemukan elemen CSS di Selenium?

Kita dapat menemukan elemen menggunakan pencari css dengan webdriver Selenium. Untuk mengidentifikasi elemen dengan css, ekspresinya harus tagname[attribute='value'] . Kami juga dapat secara khusus menggunakan atribut id untuk membuat ekspresi css. Dengan id, format ekspresi css harus tagname#

Bagaimana cara memilih CSS tertentu?

Pemilih id CSS . Id dari suatu elemen adalah unik di dalam sebuah halaman, sehingga pemilih id digunakan untuk memilih satu elemen unik. Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen .

Bagaimana cara menggunakan pemilih CSS di 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 cara saya memilih berdasarkan pemilih di CSS?

Pemilih [atribut$="nilai"] CSS . Contoh berikut memilih semua elemen dengan nilai atribut class yang diakhiri dengan "test". Catatan. Nilainya tidak harus berupa kata utuh