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 Show
Pemilih CSS dalam Strategi Selenium
Sintaks DasarID#idnameClass. nama kelas1) Menggunakan Jalur Absolut Pemilih CSSAnda 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 SelectorAnda 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 SeleniumAnda 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. Contoh 4) Menggunakan Tag & Atribut & Nilai TrioAnda dapat menggunakan sintaks tag[attribute='value'] . Contoh Sintaks. input[id='user-message'] 5) Menggunakan Teks Berisi AtributAnda dapat menggunakan tag[attribute*='containing text'] sintaks. Contoh Sintaks. masukan[id*='er-messa'] 6) Menggunakan Teks Awal AtributAnda dapat menggunakan sintaks tag[attribute^='starting text'] . Contoh Sintaks. masukan[id^='pengguna'] 7) Menggunakan Teks Akhir AtributAnda dapat menggunakan sintaks tag[attribute$='ending text'] . Contoh Sintaks. masukan[id$='pesan'] 8) Menggunakan Operator Koma untuk Mengimplementasikan Operasi ATAUAnda 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 SeleniumAnda dapat menggunakan “Tag#Id” Contoh Sintaks. input#user-message 10) Menggunakan Tag dan Kelas Pemilih CSS di SeleniumAnda dapat menggunakan “Tag. Kelas” Contoh Sintaks. masukan. kontrol bentuk 11) Menggunakan tipe pertama Pemilih CSS di SeleniumAnda 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 SeleniumAnda 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
13) Menggunakan *. tipe terakhir Pemilih CSS di SeleniumAnda 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 SeleniumAnda 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 SeleniumAnda 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 SeleniumAnda 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 LocatorsAnda 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
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 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 |