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 kelas1) 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
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
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
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']
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']
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']
7) Menggunakan Teks Akhir Atribut
Anda dapat menggunakan sintaks tag[attribute$='ending text'] .
Contoh
Sintaks. masukan[id$='pesan']
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
9) Menggunakan Tag dan ID Pemilih CSS di Selenium
Anda dapat menggunakan “Tag#Id”
Contoh
Sintaks. input#user-message
10) Menggunakan Tag dan Kelas Pemilih CSS di Selenium
Anda dapat menggunakan “Tag. Kelas”
Contoh
Sintaks. masukan. kontrol bentuk
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
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
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”. )
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. )
Catatan. Jika Anda tidak menentukan tag sebagai *. nth-of-type(3) itu akan memungkinkan Anda untuk memilih anak ketiga.
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. )
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. )
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
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
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