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
pengenal
nama
linkText / parsialLinkText
css
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
menggunakan judul halaman
menggunakan URL halaman
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
Itu tidak dapat dibaca dan tidak dapat dipertahankan
Itu terlalu kaku. Kalaupun hanya ada sedikit perubahan, seperti banner informasi tambahan di bagian atas halaman, XPath ini akan rusak
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 berikut
Dalam 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 a
elemen, tanpa tanda bintang, XPath akan menjadi sebagai berikut
Begitu juga untuk memilih semua
elemen yang merupakan anak dari
, kita bisa menggunakan XPath ini
Namun, jika kita ingin memilih semua elemen yang merupakan anak dari a
elemen, kita bisa menggunakan tanda bintang. XPath akan menjadi sebagai berikut
Anda harus menggunakan ini karena dapat mencocokkan banyak elemen jika kondisi lain tidak ditambahkan. Kondisi ini ditambahkan menggunakan tanda kurung siku dan disebut predikat
Predikat 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
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
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 tajuk
Untuk memilih anak, operator > digunakan. Untuk memilih saudara pertama + operator digunakan. Untuk memilih semua saudara, ~ digunakan. Berikut adalah beberapa contoh
div > a – memilih elemen yang merupakan turunan dari
div a – memilih elemen yang merupakan turunan dari
div + a – memilih elemen pertama setelah a
div ~ a – Memilih semua elemen setelah a
Jika 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