Apa perbedaan antara cssSelector & Xpath dan mana yang lebih baik dalam hal kinerja untuk pengujian lintas browser?

89

Saya bekerja dengan Selenium WebDriver 2.25.0 pada aplikasi web multibahasa & terutama menguji konten halaman (Untuk berbagai bahasa seperti Arab, Inggris, Rusia & sebagainya).

Untuk aplikasi saya yang lebih baik menurut kinerja & pastikan itu harus mendukung semua browser (yaitu IE 7,8,9, FF, Chrome dll).

Terima kasih sebelumnya atas saran Anda yang berharga.

Chetan
sumber

Jawaban:

108

Pemilih CSS bekerja jauh lebih baik daripada Xpath dan didokumentasikan dengan baik di komunitas Selenium. Berikut beberapa alasannya,

  • Mesin Xpath berbeda di setiap browser, karenanya membuatnya tidak konsisten
  • IE tidak memiliki mesin xpath asli, oleh karena itu selenium menyuntikkan mesin xpath-nya sendiri untuk kompatibilitas API-nya. Oleh karena itu, kami kehilangan keuntungan menggunakan fitur browser asli yang secara inheren dipromosikan WebDriver.
  • Xpath cenderung menjadi kompleks dan karenanya membuat sulit dibaca menurut saya

Namun ada beberapa situasi di mana, Anda perlu menggunakan xpath, misalnya, mencari elemen induk atau mencari elemen berdasarkan teksnya (saya tidak akan merekomendasikan nanti).

Anda dapat membaca blog dari Simon di sini . Dia juga merekomendasikan CSS di atas Xpath.

Jika Anda menguji konten, jangan gunakan pemilih yang bergantung pada konten elemen. Itu akan menjadi mimpi buruk pemeliharaan untuk setiap lokasi. Cobalah berbicara dengan pengembang dan gunakan teknik yang mereka gunakan untuk mengeksternalisasi teks dalam aplikasi, seperti kamus atau kumpulan sumber daya, dll. Berikut adalah blog saya yang menjelaskannya secara mendetail.

edit 1

Terima kasih kepada @parishodak, berikut adalah tautan yang memberikan angka-angka yang membuktikan bahwa kinerja CSS lebih baik

nilesh
sumber
7
Pemilih CSS tidak mengizinkan teks. 'berisi' tidak digunakan lagi di CSS. Seperti yang saya katakan di atas, minta pemilih tidak bergantung pada konten. Konten dapat berada di luar. Anda dapat berbicara dengan pengembang. Mereka pasti telah mengeksternalisasi teks tersebut. Mereka sering kali memiliki kamus per lokal. Jadi kunci dalam kamus sama tetapi nilainya berubah sesuai dengan lokalnya. Anda dapat menggunakan file-file ini untuk memvalidasi konten. Perhatikan bahwa Anda perlu mengubah karakter asli menjadi karakter ascii menggunakan alat nativ2ascii dari JDK. Saya harus menulis blog tentang ini. Saya memang menguji banyak lokal menggunakan teknik ini.
nilesh
1
@Chetan चेतन Saya menambahkan link blog saya di jawabannya. Maaf butuh waktu lama. Semoga itu bisa membantu Anda.
nilesh
8
@Nilesh: Saya tidak setuju dengan jawaban Anda. 1.) Mesin CSS juga berbeda di setiap browser. Ini bukan argumen. 3.) Dengan beberapa pengalaman XPath sangat mudah dimengerti dan menawarkan fungsionalitas lebih dari CSS. Jika Anda mencari elemen yang sangat bersarang, keduanya rumit: XPath dan CSS. Menurut pengalaman saya, jawaban umum apa pun untuk pertanyaan ini akan salah. Keputusan CSS / XPATH harus diambil secara individu. Pertanyaan aslinya adalah tentang kinerja. Jawaban Anda sebagian besar terdiri dari asumsi dan pendapat pribadi. Bukti nyata adalah MENGUKUR kinerja dan memposting hasilnya di sini.
Elmue
2
Artikel yang sangat bagus yang bertentangan dengan kalimat pertama Anda: "Pemilih CSS bekerja jauh lebih baik daripada Xpath". Tidak sesederhana itu, bahkan mungkin sebaliknya. Dan: "IE tidak memiliki mesin xpath asli, oleh karena itu selenium menyuntikkan mesin xpath-nya sendiri untuk kompatibilitas API-nya." Di sini Selenium mengalami kesalahan desain. Itu pasti akan lebih baik untuk mengimplementasikan mesin XPath di C ++ daripada java script. Tapi IE sudah mati, sekarang muncul Edge. Di balik semua pertanyaan kinerja, seseorang tidak boleh lupa bahwa CSS tidak memiliki fungsi yang sangat penting seperti mencari teks dari suatu elemen.
Elmue
2
elementalselenium.com/tips/32-xpath-vs-css memberikan tolok ukur yang menunjukkan bahwa css3 tidak lagi jauh lebih cepat.
mc0e
46

Saya akan mempertahankan opini tidak populer tentang tag selenium SO bahwa XPath lebih disukai daripada CSS dalam jangka panjang.

Posting panjang ini memiliki dua bagian - pertama saya akan meletakkan bukti di belakang serbet perbedaan kinerja antara keduanya adalah 0,1-0,3 milidetik (ya; itu 100 mikro detik) , dan kemudian saya akan membagikan pendapat saya mengapa XPath lebih kuat.


Perbedaan kinerja

Pertama-tama mari kita tangani "gajah di dalam ruangan" - jalur x itu lebih lambat dari css.

Dengan kekuatan cpu saat ini (baca: apa pun yang diproduksi x86 sejak 2013) , bahkan pada VM browserstack / saucelabs / aws, dan pengembangan browser (baca: semua yang populer dalam 5 tahun terakhir) itu bukan masalahnya. Mesin browser telah berkembang, dukungan xpath seragam, IE tidak sesuai dengan keinginan (mudah-mudahan bagi kebanyakan dari kita) . Perbandingan di jawaban lain ini dikutip di semua tempat, tetapi sangat kontekstual - berapa banyak yang menjalankan - atau peduli - otomatisasi terhadap IE8?

Jika ada perbedaan, itu hanya dalam sepersekian milidetik .

Namun, sebagian besar kerangka kerja tingkat yang lebih tinggi menambahkan setidaknya 1ms overhead selama panggilan selenium mentah (pembungkus, penangan, penyimpanan negara, dll); senjata pilihan pribadi saya - RobotFramework - menambahkan setidaknya 2 md, yang dengan senang hati saya korbankan untuk apa yang disediakannya. Perjalanan pulang pergi jaringan dari AWS us-east-1 ke hub BrowserStack biasanya 11 milidetik .

Jadi dengan peramban jarak jauh jika ada perbedaan antara xpath dan css, itu dibayangi oleh yang lainnya, dalam urutan besarnya.


Pengukuran

Tidak banyak perbandingan publik (saya benar-benar hanya melihat yang dikutip) , jadi - inilah kasus tunggal yang kasar, tiruan dan sederhana.
Ini akan menemukan elemen dengan dua strategi X kali, dan membandingkan waktu rata-rata untuk itu.

Target - halaman arahan BrowserStack, dan tombol "Daftar"; screenshot dari html saat menulis posting ini:

masukkan deskripsi gambar di sini

Berikut kode uji (python):

from selenium import webdriver
import timeit


if __name__ == '__main__':

    xpath_locator = '//div[@class="button-section col-xs-12 row"]'
    css_locator = 'div.button-section.col-xs-12.row'

    repetitions = 1000

    driver = webdriver.Chrome()
    driver.get('https://www.browserstack.com/')

    css_time = timeit.timeit("driver.find_element_by_css_selector(css_locator)", 
                             number=repetitions, globals=globals())
    xpath_time = timeit.timeit('driver.find_element_by_xpath(xpath_locator)', 
                             number=repetitions, globals=globals())

    driver.quit()

    print("css total time {} repeats: {:.2f}s, per find: {:.2f}ms".
          format(repetitions, css_time, (css_time/repetitions)*1000))
    print("xpath total time for {} repeats: {:.2f}s, per find: {:.2f}ms".
          format(repetitions, xpath_time, (xpath_time/repetitions)*1000))

Bagi mereka yang tidak terbiasa dengan Python - ini membuka halaman, dan menemukan elemennya - pertama dengan pelacak css, kemudian dengan xpath; operasi pencarian diulangi 1.000 kali. Keluarannya adalah total waktu dalam detik untuk 1.000 pengulangan, dan waktu rata-rata untuk satu penemuan dalam milidetik.

Lokasinya adalah:

  • untuk xpath - "elemen div yang memiliki nilai kelas yang tepat ini, di suatu tempat di DOM";
  • cssnya mirip - "elemen div dengan kelas ini, di suatu tempat di DOM".

Dengan sengaja dipilih untuk tidak disetel terlalu jauh; juga, pemilih kelas dikutip untuk css sebagai "tercepat kedua setelah id".

Lingkungan - Chrome v66.0.3359.139, chromedriver v2.38, cpu: ULV Core M-5Y10 biasanya berjalan pada 1.5GHz (ya, "pengolah kata", bahkan bukan binatang i7 biasa) .

Berikut hasilnya:

css total time 1000 repeats: 8.84s, per find: 8.84ms

xpath total time for 1000 repeats: 8.52s, per find: 8.52ms

Jelas waktu per penemuan cukup dekat; perbedaannya 0,32 milidetik . Jangan lompat "xpath lebih cepat" - terkadang ya, terkadang css.


Mari kita coba dengan set pelacak lain, sedikit lebih rumit - atribut yang memiliki substring (pendekatan umum setidaknya bagi saya, mengikuti kelas elemen ketika sebagian darinya memiliki makna fungsional) :

xpath_locator = '//div[contains(@class, "button-section")]'
css_locator = 'div[class~=button-section]'

Kedua pencari lokasi secara semantik sama - "temukan elemen div yang memiliki atribut kelasnya di substring ini".
Berikut hasilnya:

css total time 1000 repeats: 8.60s, per find: 8.60ms

xpath total time for 1000 repeats: 8.75s, per find: 8.75ms

Selisih 0,15ms .


Sebagai latihan - tes yang sama seperti yang dilakukan di blog tertaut di komentar / jawaban lain - halaman tes bersifat publik, begitu juga kode pengujian .

Mereka melakukan beberapa hal dalam kode - mengklik kolom untuk mengurutkannya, lalu mendapatkan nilainya, dan memeriksa apakah urutan UI sudah benar.
Saya akan menghentikannya - cari saja, setelah semua - ini adalah tes root, bukan?

Kode yang sama seperti di atas, dengan perubahan berikut:

  • Url sekarang http://the-internet.herokuapp.com/tables; ada 2 tes.

  • Pelacak lokasi pertama - "Menemukan Elemen Berdasarkan ID dan Kelas" - adalah:

css_locator = '#table2 tbody .dues'
xpath_locator = "//table[@id='table2']//tr/td[contains(@class,'dues')]"

Dan inilah hasilnya:

css total time 1000 repeats: 8.24s, per find: 8.24ms

xpath total time for 1000 repeats: 8.45s, per find: 8.45ms

Selisih 0,2 milidetik.

The "Menemukan Elemen Dengan Melintasi":

css_locator = '#table1 tbody tr td:nth-of-type(4)'
xpath_locator = "//table[@id='table1']//tr/td[4]"

Hasil:

css total time 1000 repeats: 9.29s, per find: 9.29ms

xpath total time for 1000 repeats: 8.79s, per find: 8.79ms

Kali ini 0,5 ms (sebaliknya, xpath menjadi "lebih cepat" di sini).

Jadi 5 tahun kemudian (mesin browser yang lebih baik) dan hanya berfokus pada kinerja pelacak (tidak ada tindakan seperti penyortiran di UI, dll), testbed yang sama - praktis tidak ada perbedaan antara CSS dan XPath.


Jadi, dari xpath dan css, manakah dari keduanya yang harus dipilih untuk performa? Jawabannya sederhana - pilih mencari berdasarkan id .

Singkat cerita, jika id dari sebuah elemen adalah unik (seperti yang seharusnya sesuai dengan spesifikasi), nilainya memainkan peran penting dalam representasi internal browser dari DOM, dan karenanya biasanya yang tercepat.

Namun, id unik dan konstan (mis. Tidak dihasilkan secara otomatis) tidak selalu tersedia, yang membawa kita ke "mengapa XPath jika ada CSS?"


Keuntungan XPath

Dengan performa di luar gambaran, mengapa menurut saya xpath lebih baik? Sederhana - keserbagunaan, dan kekuatan.

Xpath adalah bahasa yang dikembangkan untuk bekerja dengan dokumen XML; dengan demikian, ini memungkinkan konstruksi yang jauh lebih kuat daripada css.
Misalnya, navigasi ke setiap arah di pohon - temukan elemen, lalu pergi ke kakeknya dan telusuri turunannya yang memiliki properti tertentu.
Ini memungkinkan kondisi boolean tertanam - cond1 and not(cond2 or not(cond3 and cond4)); penyeleksi tersemat - "temukan div yang memiliki turunan ini dengan atribut ini, lalu navigasikan sesuai dengannya".
XPath memungkinkan pencarian berdasarkan nilai node (teksnya) - betapapun tidak disukai praktik ini, itu berguna terutama dalam dokumen yang terstruktur dengan buruk (tidak ada atribut yang pasti untuk diinjak, seperti id dan kelas dinamis - temukan elemen dengan teksnya konten) .

Melangkah dalam css jelas lebih mudah - seseorang dapat mulai menulis penyeleksi dalam hitungan menit; tetapi setelah beberapa hari penggunaan, kekuatan dan kemungkinan xpath dengan cepat mengatasi css.
Dan murni subjektif - css yang kompleks jauh lebih sulit untuk dibaca daripada ekspresi xpath yang kompleks.

Outro;)

Akhirnya, sekali lagi sangat subjektif - mana yang harus dipilih?

IMO, tidak ada pilihan yang benar atau salah - mereka adalah solusi berbeda untuk masalah yang sama, dan apa pun yang lebih cocok untuk pekerjaan itu harus dipilih.

Menjadi "penggemar" XPath, saya tidak malu untuk menggunakan campuran keduanya dalam proyek saya - heck, terkadang jauh lebih cepat untuk hanya membuang satu CSS, jika saya tahu itu akan melakukan pekerjaan dengan baik.

Todor Minakov
sumber
Berapa banyak node yang memiliki halaman login? Halaman login biasanya sangat sederhana sehingga Anda mungkin hanya melihat sedikit perbedaan.
pagep
Tes kinerja lain menunjukkan perbedaan yang jauh lebih besar di berbagai browser.
pagep
1
Untuk pertanyaan pertama Anda - tangkapan layar DOM ada di jawaban, dan laman tersebut online dan publik. Untuk yang pertama dan kedua, jika Anda membaca jawabannya dengan cermat, saya telah mengulangi pengujian yang sama dengan elementalselenium, salah satu dari sedikit perbandingan yang tersedia yang cukup sering dikutip, menggunakan target dan pencari lokasi yang sama, tetapi hanya dengan 5 tahun browser yang lebih baru .
Todor Minakov
3
@Todorinakov POSTING HEBAT !!! Saya setuju dengan Anda 100% Saya juga berpikir bahwa sintaks XPath juga lebih alami (setidaknya bagi saya) karena menyerupai sesuatu yang kita semua tahu dengan baik. Dan itu adalah jalur file / folder. Jadi saya pikir seseorang yang tidak memiliki pengetahuan tentang CSS atau XPath, akan belajar XPath lebih mudah. Karena perbedaan kinerja dapat diabaikan, menurut saya kurva pembelajaran perlu dipertimbangkan dengan baik.
hfontanez
1
Terima kasih @hfontanez; analogi yang bagus dengan struktur sistem file, saya belum memikirkannya. Saya harus sedikit tidak setuju untuk kemudahan langkah-dalam - sintaks XPath bisa sedikit mengintimidasi pada awalnya, ditambah itu memiliki beberapa gotcha-s (indeks []setelah //misalnya) . Tapi setelah hari pertama belajar dan menggunakannya, hampir semua orang melewati titik kritis kurva belajar :) (langkah css memang lebih mudah, IMHO) .
Todor Minakov
13

Perdebatan antara cssSelector vs XPath akan tetap menjadi salah satu debat paling subyektif dalam Komunitas Selenium . Apa yang telah kita ketahui sejauh ini dapat diringkas sebagai:

  • Orang-orang yang mendukung cssSelector mengatakan bahwa cssSelector lebih mudah dibaca dan lebih cepat (terutama saat berjalan melawan Internet Explorer).
  • Sementara mereka yang mendukung XPath menggembar-gemborkan kemampuannya untuk melintang halaman (sementara cssSelector tidak bisa).
  • Melintasi DOM di browser lama seperti IE8 tidak bekerja dengan cssSelector tetapi tidak masalah dengan XPath .
  • XPath dapat berjalan di DOM (misalnya dari anak ke orang tua), sedangkan cssSelector hanya dapat melintasi DOM (misalnya dari induk ke anak)
  • Namun, tidak dapat melintasi DOM dengan cssSelector di browser lama tidak selalu merupakan hal yang buruk karena ini lebih merupakan indikator bahwa halaman Anda memiliki desain yang buruk dan dapat memanfaatkan beberapa markup yang membantu.
  • Ben Burton menyebutkan Anda harus menggunakan cssSelector karena begitulah aplikasi dibangun. Ini membuat tes lebih mudah untuk ditulis, dibicarakan, dan meminta bantuan orang lain.
  • Adam Goucher mengatakan untuk mengadopsi pendekatan yang lebih hybrid - dengan fokus pertama pada ID, kemudian cssSelector , dan memanfaatkan XPath hanya saat Anda membutuhkannya (misalnya berjalan di DOM) dan XPath akan selalu lebih kuat untuk pencari lokasi tingkat lanjut.

Dave Haeffner melakukan pengujian pada halaman dengan dua tabel data HTML , satu tabel ditulis tanpa atribut yang membantu ( ID dan Kelas ), dan yang lainnya dengan keduanya. Saya telah menganalisis prosedur pengujian dan hasil dari percobaan ini secara rinci dalam diskusi Mengapa saya harus menggunakan selektor cssSelector sebagai lawan XPath untuk pengujian otomatis? . Meskipun percobaan ini mendemonstrasikan bahwa setiap Strategi Penunjuk Lokasi cukup setara di semua browser, itu tidak cukup menggambarkan keseluruhan gambar untuk kami. Dave Haeffner dalam diskusi lainnya Css Vs. X Path, Di Bawah Mikroskopdisebutkan, dalam pengujian ujung-ke-ujung ada banyak variabel lain saat bermain Saus startup , Browser memulai , dan latensi ke dan dari aplikasi yang diuji. Hal yang tidak menguntungkan dari percobaan itu adalah bahwa satu driver mungkin lebih cepat dari yang lain (misalnya IE vs Firefox ), padahal sebenarnya, itu tidak terjadi sama sekali. Untuk mengetahui secara nyata perbedaan kinerja antara cssSelector dan XPath, kami perlu menggali lebih dalam. Kami melakukannya dengan menjalankan semuanya dari mesin lokal sambil menggunakan utilitas pembandingan kinerja. Kami juga fokus pada tindakan Selenium tertentu daripada keseluruhan uji coba, dan menjalankan banyak hal berkali-kali. Saya telah menganalisis prosedur pengujian spesifik dan hasil dari percobaan ini secara rinci dalam diskusi cssSelector vs XPath untuk selenium . Namun pengujian tersebut masih kehilangan satu aspek yaitu cakupan browser yang lebih banyak (misalnya, Internet Explorer 9 dan 10) dan pengujian terhadap halaman yang lebih besar dan lebih dalam.

Dave Haeffner dalam diskusi lain Css Vs. X Path, Under a Microscope (Bagian 2) menyebutkan, untuk memastikan tolok ukur yang diperlukan tercakup dengan cara terbaik, kita perlu mempertimbangkan contoh yang menunjukkan halaman yang besar dan dalam .


Uji Penyiapan

Untuk mendemonstrasikan contoh rinci ini, mesin virtual Windows XP telah disiapkan dan Ruby (1.9.3) telah diinstal. Semua browser yang tersedia dan driver browser yang setara untuk Selenium juga diinstal. Untuk pembandingan, lib standar Ruby benchmarkdigunakan.


Kode Tes

require_relative 'base'
require 'benchmark'

class LargeDOM < Base

  LOCATORS = {
    nested_sibling_traversal: {
      css: "div#siblings > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(3)",
      xpath: "//div[@id='siblings']/div[1]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]/div[3]"
    },
    nested_sibling_traversal_by_class: {
      css: "div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1 > div.item-1",
      xpath: "//div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]/div[contains(@class, 'item-1')]"
    },
    table_header_id_and_class: {
      css: "table#large-table thead .column-50",
      xpath: "//table[@id='large-table']//thead//*[@class='column-50']"
    },
    table_header_id_class_and_direct_desc: {
      css: "table#large-table > thead .column-50",
      xpath: "//table[@id='large-table']/thead//*[@class='column-50']"
    },
    table_header_traversing: {
      css: "table#large-table thead tr th:nth-of-type(50)",
      xpath: "//table[@id='large-table']//thead//tr//th[50]"
    },
    table_header_traversing_and_direct_desc: {
      css: "table#large-table > thead > tr > th:nth-of-type(50)",
      xpath: "//table[@id='large-table']/thead/tr/th[50]"
    },
    table_cell_id_and_class: {
      css: "table#large-table tbody .column-50",
      xpath: "//table[@id='large-table']//tbody//*[@class='column-50']"
    },
    table_cell_id_class_and_direct_desc: {
      css: "table#large-table > tbody .column-50",
      xpath: "//table[@id='large-table']/tbody//*[@class='column-50']"
    },
    table_cell_traversing: {
      css: "table#large-table tbody tr td:nth-of-type(50)",
      xpath: "//table[@id='large-table']//tbody//tr//td[50]"
    },
    table_cell_traversing_and_direct_desc: {
      css: "table#large-table > tbody > tr > td:nth-of-type(50)",
      xpath: "//table[@id='large-table']/tbody/tr/td[50]"
    }
  }

  attr_reader :driver

  def initialize(driver)
    @driver = driver
    visit '/large'
    is_displayed?(id: 'siblings')
    super
  end

  # The benchmarking approach was borrowed from
  # http://rubylearning.com/blog/2013/06/19/how-do-i-benchmark-ruby-code/
  def benchmark
    Benchmark.bmbm(27) do |bm|
      LOCATORS.each do |example, data|
    data.each do |strategy, locator|
      bm.report(example.to_s + " using " + strategy.to_s) do
        begin
          ENV['iterations'].to_i.times do |count|
         find(strategy => locator)
          end
        rescue Selenium::WebDriver::Error::NoSuchElementError => error
          puts "( 0.0 )"
        end
      end
    end
      end
    end
  end

end

Hasil

CATATAN : Outputnya dalam hitungan detik, dan hasilnya adalah total run time dari 100 eksekusi.

Dalam Bentuk Tabel:

css_xpath_under_microscopev2

Dalam Bentuk Bagan:

  • Chrome :

grafik-chrome

  • Firefox :

grafik-firefox

  • Internet Explorer 8 :

grafik-ie8

  • Internet Explorer 9 :

grafik-ie9

  • Internet Explorer 10 :

chart-ie10

  • Opera :

chart-opera


Menganalisis Hasil

  • Chrome dan Firefox disetel dengan jelas untuk kinerja cssSelector yang lebih cepat .
  • Internet Explorer 8 adalah tas ambil dari cssSelector yang tidak akan bekerja, keluar dari kendali XPath traversal yang mengambil ~ 65 detik, dan 38 detik traversal meja tanpa cssSelector hasil untuk membandingkannya dengan.
  • Di IE 9 dan 10, XPath secara keseluruhan lebih cepat. Di Safari, ini gagal, kecuali untuk beberapa traversal yang berjalan lebih lambat dengan XPath . Dan di hampir semua browser, sibling traversal bersarang dan traversal sel tabel yang dilakukan dengan XPath adalah operasi yang mahal.
  • Ini seharusnya tidak terlalu mengejutkan karena pencari lokasinya rapuh dan tidak efisien dan kita perlu menghindarinya.

Ringkasan

  • Secara keseluruhan ada dua keadaan di mana XPath jauh lebih lambat dari cssSelector . Tapi mereka mudah dihindari.
  • Perbedaan kinerja sedikit mendukung untuk browser non-IE dan sedikit mendukung untuk browser IE.

Trivia

Anda dapat melakukan benchmarking sendiri, menggunakan library ini tempat Dave Haeffner membungkus semua kodenya.

DebanjanB
sumber