Mana pemilih xpath dan css yang lebih baik di Selenium?

css locator lebih cepat dari xpath?

css locator lebih cepat daripada xpath karena css locator melintasi pohon html hanya ke arah bawah, tetapi xpath melintasi ke atas dan ke bawah

Apa perbedaan antara "/" dan "//" di XPath?

Garis miring tunggal "/". Digunakan di jalur absolut

Garis miring ganda "//". Digunakan di jalur relatif

Apa urutan prioritas untuk menggunakan pencari lokasi?

Di bawah ini adalah prioritas untuk menggunakan pencari lokasi ini

1. pengenal

2. nama

3. linkText / parsialLinkText

4. css

5. xpath

Mengapa menggunakan pencari className dan tagName tidak disarankan?

Karena className dan tagName mungkin hanya digunakan sekali dalam satu halaman pada saat mengembangkan skrip otomasi, tetapi tidak aman, pengembang dapat menggunakan tag dan kelas yang sama kapan saja. Anda akan belajar tentang semua pencari lokasi di bab berikutnya

Kapan kita menggunakan LinkText dan locator partialLinkText?

LinkText  pencari harus digunakan jika teks tautannya konstan. partialLinkText locator harus digunakan ketika bagian tertentu dari teks tautan berubah setiap kali halaman dimuat. Saya. e. untuk mengubah teks secara dinamis sebagian, kami menggunakan pencari parsialLinkText

Kapan kita menggunakan pencari id?

Ketika kode sumber html memiliki atribut id, maka kita dapat menggunakan id locator. Dan apa yang kami sampaikan sebagai argumen ke iid locator adalah nilai dari atribut id

Kapan kita menggunakan pencari nama?

Ketika kode sumber html memiliki atribut name, maka kita dapat menggunakan name locator. Dan apa yang kami berikan sebagai argumen untuk name locator adalah nilai dari atribut nama

Bagaimana Anda memastikan halaman yang diperlukan ditampilkan atau tidak?

Kami dapat menggunakan pos pemeriksaan berikut untuk memvalidasi halaman yang diperlukan ditampilkan atau tidak

1. menggunakan judul halaman

2. menggunakan URL halaman

3. menggunakan elemen unik apa pun di halaman

Kami memiliki atribut id dan nama, pencari mana yang kami sukai?

Kami lebih memilih id daripada name locator, karena id unik dan nama dapat digandakan

Bagaimana kami menangani objek yang berubah secara dinamis di halaman web?

Dengan menggunakan xpath dengan fungsi contains ketika nilai atribut atau teks sebagian berubah. Jika teks benar-benar berubah, kami menangani skenario ini dengan menggunakan konsep xpath independent-dependent

Di tangkapan layar sebelumnya, Anda dapat melihat dua opsi untuk XPath – XPath dan XPath Penuh. Bagian sebelumnya mendemonstrasikan cara membuat XPath lengkap.  

Jika XPath yang dipilih bukan XPath lengkap pada contoh di atas, maka XPath yang kita dapatkan adalah sebagai berikut

Jadi, apa yang salah dengan Full XPath? . Ini tidak akan selalu terjadi. Misalnya, jika metode yang sama diikuti untuk menghasilkan XPath lengkap untuk daftar isi halaman Wikipedia mana pun, XPath lengkap akan menjadi seperti ini

/html/body/div[3]/div[3]/div[5]/div[1]/div[2]/ul/li[1]/a/span[2]

Ada tiga masalah utama dengan XPath ini

1. Itu tidak dapat dibaca dan tidak dapat dipertahankan

2. Itu terlalu kaku. Kalaupun hanya ada sedikit perubahan, seperti banner informasi tambahan di bagian atas halaman, XPath ini akan rusak

3. XPath penuh akan melintasi setiap node dan membuatnya lambat

Itulah mengapa kita perlu mempelajari XPath yang lebih pendek, lebih cepat, dan lebih mudah dibaca. Mari kita mulai dengan blok bangunan pertama – karakter garis miring. Sementara garis miring tunggal memilih simpul anak, garis miring ganda memilih semua simpul yang cocok, di mana pun mereka berada dalam dokumen

Misalnya, untuk menemukan semua tag dalam dokumen, ekspresi XPath adalah sebagai berikut

Demikian pula, untuk menemukan semua

tag, XPath akan menjadi sebagai berikutDalam dokumen1. html yang sedang dibahas, hanya ada satu

menandai. Ini berarti XPath yang kita buat sebelumnya, /html/body/h2 bisa jadi //h2. Blok bangunan berikutnya adalah tanda bintang. Karakter ini digunakan sebagai wild card yang akan mencocokkan setiap elemen. Misalnya, jika kita ingin mendapatkan daftar semua elemen yang merupakan anak dari aelemen, tanpa tanda bintang, XPath akan menjadi sebagai berikutBegitu juga untuk memilih semuaelemen yang merupakan anak dari, kita bisa menggunakan XPath iniNamun, jika kita ingin memilih semua elemen yang merupakan anak dari aelemen, kita bisa menggunakan tanda bintang. XPath akan menjadi sebagai berikutAnda harus menggunakan ini karena dapat mencocokkan banyak elemen jika kondisi lain tidak ditambahkan. Kondisi ini ditambahkan menggunakan tanda kurung siku dan disebut predikatPredikat di XPath

Predikat ditulis di dalam tanda kurung siku. Dalam bentuk yang paling sederhana, ini hanyalah sebuah angka

Misalnya, XPath berikut akan cocok dengan dua tag jangkar

Jika kita menambahkan angka dalam tanda kurung siku, kita dapat menentukan elemen mana yang akan dipilih. Misalnya, jika Anda ingin memilih tag jangkar pertama, XPath akan menjadi sebagai berikut

Perhatikan bahwa node pertama adalah 1, bukan 0, seperti kebanyakan bahasa pemrograman

Kita juga bisa menggunakan fungsi dalam tanda kurung siku. Misalnya untuk mendapatkan tag terakhir, kita bisa menulis XPath ini

Ada lebih banyak fungsi yang akan dibahas segera. Sebelum itu, kita akan melihat bagaimana kita bisa mendapatkan teks dari elemen

Mendapatkan Teks dari Elemen

XPath //h2 mengembalikan elemen. Mari kita lihat bagaimana kita dapat mengekstraksi teks, atau dengan kata lain, nilai atomik dari elemen.  

Teks biasanya terdapat di antara elemen pembuka dan bagian penutup. Misalnya

Welcome to XPath

Untuk mengekstrak teks ini, fungsi XPath text() dapat digunakan. Misalnya, XPath berikut akan mengembalikan teks di dalam elemen h2

Untuk mengekstrak nilai atribut apa pun, gunakan simbol @ dengan nama atribut. Misalnya, pertimbangkan tag jangkar ini

Visit our Blog

Untuk mengekstrak nilai atribut href, gunakan @href di XPath

Ini akan mendapatkan teks https. //oksilab. io/blog

Kami juga dapat menggunakan pemilih atribut dalam predikat XPath. Misalnya, XPath ini akan memilih semua

elemen di mana nilai atribut id adalah header. \

Jika Anda ingin mencari elemen yang berisi teks tertentu, Anda dapat mencarinya dengan menggunakan fungsi text() dalam tanda kurung siku

Perhatikan bahwa ini akan mencari kecocokan yang lengkap. Jika Anda ingin mencari kecocokan sebagian, gunakan fungsi berisi. Fungsi ini akan menjadi kriteria penting untuk membantu Anda memutuskan antara XPath dan CSS

Ini semua tentang dasar-dasar XPath. Di bagian selanjutnya, Anda akan mempelajari area utama di mana XPath benar-benar hebat

Keuntungan menggunakan XPath

Saat bekerja dengan HTML atau DOM apa pun, mungkin ada tiga sumbu utama. Ini adalah leluhur, keturunan, dan saudara kandung. Meskipun dimungkinkan untuk memilih saudara kandung dan keturunan menggunakan CSS juga, hanya XPath yang mampu naik ke leluhur

Ambil contoh ini

   Oxylabs

Dalam contoh ini, jika kita harus mengekstrak nilai atribut href dari tag, kita dapat menemukan tag span dan naik satu tingkat untuk menemukan tag tersebut

Perhatikan penggunaan dari. untuk naik satu tingkat. Ini tidak mungkin menggunakan Pemilih CSS

Selanjutnya, untuk kecocokan sebagian, CSS memilikinya. berisi operator tetapi sekarang sudah tidak digunakan lagi. Ini mungkin bekerja dengan beberapa alat khusus tetapi dukungannya tidak dijamin

Di sisi lain, fungsi XPath contains() didukung secara universal. Singkatnya, jika Anda ingin melintasi DOM, XPath adalah satu-satunya pilihan Anda. Jika Anda ingin melakukan pencocokan sebagian, sekali lagi, XPath mungkin satu-satunya pilihan Anda

Apa itu pemilih CSS?

Pemilih CSS adalah bagian pertama dari aturan CSS. CSS adalah seperangkat komponen dan aturan yang memberi tahu browser elemen HTML mana yang harus ditempatkan dan diterapkan dengan properti CSS

HTML jarang disajikan tanpa CSS, atau Cascading Style Sheet. Jika ada kebutuhan untuk mengubah tampilan elemen HTML apa pun, cara paling umum untuk melakukannya adalah dengan menerapkan gaya padanya – bisa sesederhana mengubah warna teks, atau bisa lebih rumit jika Anda menggunakan animasi

Dalam kedua kasus, langkah pertama adalah menemukan elemen. Setelah elemen ditemukan, gaya dapat diterapkan menggunakan CSS. Untuk menemukan elemen, pemilih CSS digunakan. Selektor CSS dikembangkan untuk alasan yang sama sekali berbeda, tetapi mereka melayani tujuan yang sama – memilih elemen

Sekarang setelah Anda memiliki gagasan tentang apa itu pemilih XPath dan CSS, kami akan melihat bagaimana XPath dan CSS dibuat dan kapan Anda harus menggunakannya di atas yang lain

Bagaimana cara membuat pemilih CSS?

Memulai dengan pemilih CSS sangatlah mudah. Pemilih CSS dapat menggunakan nama tag, id, kelas (pseudo-) atau atribut. Pertimbangkan elemen ini

XPath vs CSS

Berikut beberapa contoh pemilih CSS untuk tag ini

• h2 – Pilih berdasarkan nama elemen. Kartu liar adalah *

• #header – Gunakan # untuk menentukan id

• mewah – Gunakan titik untuk menentukan kelas

• [name="ctrl"] – Gunakan atribut apa pun dalam tanda kurung siku

Ini juga bisa digabungkan. Misalnya

h2#header memilih

elemen dengan id sebagai tajukUntuk memilih anak, operator > digunakan. Untuk memilih saudara pertama + operator digunakan. Untuk memilih semua saudara, ~ digunakan. Berikut adalah beberapa contohdiv > a – memilih elemen yang merupakan turunan dari (adsbygoogle = window.adsbygoogle || []).push({}); div a – memilih elemen yang merupakan turunan dari div + a – memilih elemen pertama setelah adiv ~ a – Memilih semua elemen setelah aJika Anda mengetahui ini, Anda seharusnya dapat mencakup sebagian besar skenario

Keuntungan menggunakan Pemilih CSS

Hal terbaik tentang pemilih CSS adalah mudah dipelajari dan dipelihara

Pemilih CSS didukung oleh semua perpustakaan pengikisan dan pengujian web – Selenium, Beautiful Soup (Python), Scrapy (Python), Cheerio (JavaScript), dan Puppeteer (JavaScript)

Perhatikan bahwa Beautiful Soup tidak mendukung XPath. Pemilih CSS adalah satu-satunya pilihan dalam kasus ini

Browser lama seperti Internet Explorer tidak mendukung CSS sepenuhnya. Namun, saat ini, browser mendukung Pemilih CSS sepenuhnya;

Pemilih CSS juga lebih cepat dari XPath. Namun, perhatikan bahwa perbedaannya sangat kecil sehingga tidak masalah sama sekali di dunia nyata

CSS vs XPath dibandingkan

Memutuskan antara XPath dan CSS mungkin terasa seperti tugas yang sulit. Mari kita lihat tabel di bawah ini untuk perbandingan

Manakah Pemilih CSS atau XPath terbaik?

Pemilih mana yang lebih cepat di Selenium?

Mengapa pemilih CSS memiliki prioritas lebih tinggi daripada ekspresi XPath?

Mengapa XPath tidak direkomendasikan di Selenium?