Apa batasan pemilih css di Selenium?

Pertarungan XPath vs CSS Selector adalah salah satu yang didekati orang secara berbeda—kebanyakan karena preferensi daripada berbagai implikasi penggunaan salah satu opsi. Jika Anda pernah harus memilih antara menggunakan pemilih XPath dan CSS, kemungkinan besar lingkungan tempat Anda bekerja lebih berkaitan dengan pilihan Anda daripada perbedaan sebenarnya antara opsi tersebut. Contoh di mana Anda akan mempertimbangkan pilihan termasuk ketika Anda ingin mengikis konten dari situs web langsung atau Anda sedang melakukan tes otomatis di ujung depan aplikasi Anda

Artikel ini akan membahas berbagai perbedaan antara XPath dan CSS. Sepanjang jalan, kita akan berbicara tentang apa yang dibawa oleh masing-masing opsi ke meja. Di akhir artikel ini, opsi mana yang harus Anda gunakan kemungkinan akan menjadi jelas bagi Anda meskipun Anda tidak mempertimbangkan kompatibilitasnya dengan kasus penggunaan Anda. Anda juga akan belajar mengapa satu atau yang lain bisa menjadi opsi yang lebih baik untuk digunakan saat menguji aplikasi Anda

Siklus pembuatan aplikasi berlangsung seperti ini; . Terkadang ada orang yang berbeda di setiap tahap, yang membuat segalanya menjadi rumit. Dan melewatkan fase apa pun dapat merusak kegunaan aplikasi. Pengujian sama pentingnya dengan setiap fase lainnya. Pada tahap pengujian Anda dapat mulai melihat pemilih XPath vs CSS

Sebelum kita masuk lebih dalam ke logika pilihan, mari kita definisikan masing-masing sisi dan pelajari pro dan kontra masing-masing

Apa itu XPath?

XPath adalah singkatan dari XML Path. Ini adalah bahasa kueri yang membantu mengidentifikasi elemen dari dokumen XML. Ini menggunakan ekspresi yang mengarahkan ke dokumen XML dengan cara yang dapat dilacak dari awal hingga elemen yang dimaksud—seperti membentuk jalur dari awal. Kami akan segera membahas sintaks secara lebih mendalam

Keuntungan Menggunakan XPath

  • XPath memungkinkan Anda menavigasi DOM saat mencari elemen untuk diuji atau dikikis
  • Ini kompatibel dengan browser lama (atau pada saat penerbitan — termasuk versi Internet Explorer yang lebih lama, yang masih digunakan beberapa perusahaan)
  • Membuat di XPath lebih fleksibel daripada di CSS Selector
  • Saat Anda tidak mengetahui nama suatu elemen, Anda dapat menggunakan contains untuk mencari kemungkinan kecocokan

Cara Membuat XPath

Sintaks jalur XML menggunakan aliran tipe diagram pohon untuk menemukan elemen pada halaman HTML. Pertimbangkan elemen formulir di markup halaman pencarian di bawah ini

XPath lengkap ke tombol pencarian di dalam formulir akan terlihat seperti ini

xpath lengkap untuk mengirimkan tombol dalam contoh formulir

/html/body/main-view//section/startpage-component//div/main/search-box-component//div/form/div/button

Seperti yang terlihat di XPath lengkap, dokumen dipecah menjadi elemen yang pada dasarnya mewakili kerangkanya. Pergi dari atas ke bawah dalam dokumen yang dihasilkan dan mendaftar setiap node, hingga Anda mencapai elemen yang diinginkan, inilah yang menjadi XPath. Inilah cara yang lebih singkat untuk menulis ini

//*[@id="scroll-container"]/main/search-box-component//div/form/div/button

Dan inilah tabel komprehensif untuk sintaks dari XPath dan CSS Selectors;

Sekarang setelah Anda memahami apa itu XPath dan apa yang dapat dilakukannya, mari beralih ke Pemilih CSS

Apa itu Pemilih CSS?

Sebagian besar halaman HTML ditata menggunakan kelas cascading style sheet, juga dikenal sebagai CSS. Mengidentifikasi berbagai elemen pada halaman berdasarkan gaya mengharuskan Anda memilih kelasnya. Pertimbangkan pemilih CSS sebagai bagian dari style sheet yang memungkinkan Anda memilih jenis konten untuk diuji, diedit, atau disalin. Pemilih CSS mengidentifikasi berbagai elemen di DOM, dan mereka memengaruhi atau terhubung ke bagian antarmuka ini

Selektor CSS tersedia dalam berbagai jenis. Ini sebagian besar karena tidak seperti susunan pohon atau peta dari opsi XPath, pemilih memiliki nama dan kategori yang sebenarnya. Berikut beberapa jenisnya

  • pemilih sederhana. Ini mencari elemen berdasarkan kelas atau ID mereka
  • Pemilih atribut. Elemen pengambilan ini berdasarkan nilai yang diberikan padanya. Saya akan memberikan beberapa contoh nanti di artikel ini
  • Pemilih semu. Dalam situasi di mana status elemen dideklarasikan dengan CSS, seperti kotak centang atau atribut on-hover, ini mulai digunakan

Keuntungan Menggunakan Pemilih CSS

  • Ini lebih cepat dari XPath
  • Jauh lebih mudah untuk dipelajari dan diterapkan
  • Anda memiliki peluang tinggi untuk menemukan elemen Anda
  • Ini kompatibel dengan sebagian besar browser hingga saat ini

Perluas Cakupan Tes Anda

Penulisan tes end-to-end bertenaga AI yang cepat dan fleksibel — dibuat untuk skala besar

Mulai Pengujian Gratis

Cara Membuat Selector CSS

Mari gunakan gambar yang sama seperti yang kita lakukan sebelumnya, dengan markup halaman pencarian yang ditampilkan. Anda dapat melakukan ini di halaman web manapun dengan mengklik kanan dan memilih Inspect Element. Anda harus dapat membuat pemilih CSS seperti yang kami lakukan dengan XPath

Dalam hal ini, pemilih CSS akan terlihat seperti ini

pemilih css untuk tombol

Perhatikan betapa lebih mudahnya membaca pemilih CSS dibandingkan dengan XPath. Anda dapat membaca ini sebagai, “Tombol adalah elemen turunan dari div di dalam formulir, yang berada di dalam pemilih tipe div. ”

Untuk sepenuhnya membahas apa yang mungkin dilakukan dengan pemilih atribut CSS, mari pertimbangkan contoh markup yang lebih spesifik

elemen halus dengan pemilih css

    

  • Subdomain Google Maps
  •     

  • Tautan ke Layanan Mail iCloud
  •     

  • Surat Opera
  •     

  • Layanan Gmail
  • Pemilih yang berlaku untuk menemukan elemen tertentu dalam contoh di atas akan terlihat seperti ini

    a[href^="beberapa nilai di sini"]

    For instance, let’s say you want to pick out the element that includes “mail” as a value. In that case, you’d use the * sign after the href key. This would give you:

    Ini mengembalikan semua elemen kecuali yang pertama karena tidak memiliki email sebagai sub-domain

    Bagaimana dengan contoh di mana Anda ingin memilih semua elemen yang diakhiri dengan nilai tertentu? . Anda dapat memfilter entri yang dimulai dengan nilai tertentu dengan menggunakan tanda ^. Ada banyak tanda seperti itu tergantung pada aturan yang Anda gunakan untuk pemilihan

    Sekarang Anda telah melakukan tur mini untuk setiap opsi. Jadi mana yang tepat untuk Anda?

    Yang Digunakan. Pemilih XPath atau CSS?

    Saat Anda menerapkan produk perangkat lunak ke sekelompok pengguna, waktu seringkali menjadi hal yang penting. Pernyataan ini saja seharusnya memberi tahu Anda opsi apa yang lebih baik untuk Anda gunakan. Jika penguji perangkat lunak Anda memutuskan untuk membuat skrip otomasi pengujian mereka sendiri, menggunakan opsi yang sudah mereka alami adalah cara yang tepat. Selain itu, perbedaan waktu eksekusi antara pemilih XPath dan CSS tidak memungkinkan Anda melakukan pekerjaan yang berarti sementara yang lain menunggu. Perbedaan yang dapat diabaikan seperti itu berarti bahwa kedua opsi mungkin berjalan ketat untuk Anda pada saat ini

    Seperti yang saya sebutkan di awal artikel ini, lingkungan Anda bekerja lebih dari variabel lainnya. Faktor pembatas ketika berurusan dengan penyeleksi adalah kenyataan bahwa mereka menjadi lebih kompleks karena jenis elemen berevolusi dari yang sederhana hingga pseudo ke kombinator. Banyak penyeleksi juga akan membuatnya lebih kompleks bahkan untuk menggunakan penyeleksi di tempat pertama

    “Harus ada cara yang lebih baik untuk mengimplementasikan otomatisasi pengujian. Anda mungkin berkata. Seperti kebanyakan proses berulang, kecerdasan buatan mulai memengaruhi kedua opsi tersebut. Layanan seperti Testim telah menemukan cara yang lebih cepat dan lebih intuitif untuk menjalankan pengujian pada elemen di DOM

    Di masa lalu, Anda harus membuat jalur atau menentukan pemilih di back-end dengan menyisir semua markup. Sekarang, layanan seperti Testim akan mengurusnya untuk Anda. Perusahaan menggunakan kecerdasan buatan dan algoritme untuk melihat seluruh DOM dan mengidentifikasi elemen dengan beberapa atribut. Testim akan melihat class, parent/child, color, text, type, ID, atau atribut lainnya dan menemukan item untuk menjalankan pengujian. Menggunakan layanan seperti itu menghentikan fokus Anda dari fokus pada XPath vs CSS Selector. Sebaliknya, Anda dapat lebih fokus pada hasil

    Selain itu, jika Anda menggunakan Testim, bekerja di ujung depan saat membuat pengujian otomatis juga memudahkan penerapan produk dengan lebih cepat. Anda dapat menggunakan lebih sedikit keterampilan kode-kritis untuk mengulangi fase pengujian dan umpan balik dari siklus hidup pengembangan produk

    Apakah lebih baik menggunakan pemilih CSS atau XPath?

    Pemilih CSS cenderung berkinerja lebih baik, lebih cepat, dan lebih andal daripada XPath di sebagian besar browser. Mereka jauh lebih pendek dan lebih mudah dibaca dan dipahami.

    Manakah dari berikut ini yang merupakan batasan CSS?

    CSS tidak dapat melakukan operasi logis apa pun seperti if/else atau for/while atau +/- . Kami tidak dapat membaca file apa pun menggunakan CSS. Itu tidak dapat berinteraksi dengan database. CSS tidak dapat meminta halaman web.

    Mengapa kita tidak dapat menggunakan pemilih CSS daripada XPath?

    XPath memungkinkan aliran dua arah . Menggunakan XPath, kita dapat melintasi dua arah, yaitu. e. , dari orang tua ke anak dan anak ke orang tua, yang tidak mungkin dilakukan di CSS.

    Mengapa pemilih CSS lebih cepat dari XPath?

    Kita dapat melintasi maju dan mundur di DOM, mis. e kita dapat berpindah dari elemen induk ke elemen anak dan juga dari elemen anak ke elemen induk dengan xpath. Namun untuk css, kita hanya bisa melakukan traverse dari parent ke child dan bukan sebaliknya. Dalam hal performa, css lebih baik dan lebih cepat , sedangkan xpath lebih lambat.