Bagaimana cara memverifikasi ekspresi XPath di alat Pengembang Chrome atau Firebug Firefox?

179

Bagaimana saya bisa memverifikasi XPath saya?

Saya menggunakan alat Pengembang Chrome untuk memeriksa elemen dan membentuk XPath saya. Saya memverifikasinya menggunakan plugin Chrome XPath Checker, namun tidak selalu memberi saya hasilnya. Apa cara yang lebih baik untuk memverifikasi XPath saya.

Saya juga telah mencoba menggunakan Firebug untuk memeriksa bug dan juga menggunakan FirePath untuk memverifikasi. Tetapi apakah Firepath juga memverifikasi XPath.

Opsi terakhir saya adalah menggunakan Selenium WebDriver untuk mengonfirmasi XPath saya.

google-chrome firefox selenium xpath selenium-webdriver pengguna3448242
sumber

Jawaban:

367

Chrome

Ini dapat dicapai dengan tiga pendekatan berbeda (lihat artikel blog saya di sini untuk lebih jelasnya):

  • Cari di Elementspanel seperti di bawah ini
  • Jalankan $x()dan $$()di Consolepanel, seperti yang ditunjukkan dalam jawaban Lawrence
  • Ekstensi pihak ketiga (tidak benar-benar diperlukan dalam sebagian besar kasus, bisa jadi berlebihan)

Inilah cara Anda mencari XPath di Elementspanel:

  1. Tekan F12untuk membuka Alat Pengembang Chrome
  2. Di panel "Elemen", tekan Ctrl+F
  3. Di kotak pencarian, ketik XPath atau CSS Selector, jika elemen ditemukan, mereka akan disorot dengan warna kuning.

masukkan deskripsi gambar di sini

Firefox (sejak versi 75)

Karena FF 75 dimungkinkan untuk menggunakan kueri xpath mentah tanpa evaluasi ekspresi xpath, lihat dokumentasi untuk info lebih lanjut.

Firefox (versi sebelumnya 75)

  1. Pilih "Konsol Web" dari submenu Pengembang Web di Menu Firefox (atau menu Alat jika Anda menampilkan bilah menu atau berada di Mac OS X)
    atau tekan pintasan keyboard Ctrl+ Shift+ K( Command+ Option+ Kpada OS X).

  2. Di baris perintah di bagian bawah gunakan yang berikut ini:

    • $(): Mengembalikan elemen pertama yang cocok. Setara dengan document.querySelector()atau memanggil $fungsi di halaman, jika ada.

    • $$(): Mengembalikan array node DOM yang cocok. Ini seperti untuk document.querySelectorAll(), tetapi mengembalikan array bukan NodeList.

    • $x(): Mengevaluasi ekspresi XPath dan mengembalikan array node yang cocok.

Firefox (versi sebelumnya 49)

  1. Instal Firebug
  2. Instal Firepath
  3. Tekan F12untuk membuka Firebug
  4. Beralih ke FirePathpanel
  5. Dalam dropdown, pilih XPathor CSS
  6. Ketik untuk menemukan

masukkan deskripsi gambar di sini

Yi Zeng
sumber
2
Hanya satu peringatan pada XPath dan peramban, karena ini menyebabkan banyak kebingungan: stackoverflow.com/questions/18241029/…
Jens Erat
@JensErat: Poin yang sangat bagus. Bagi yang lain yang membaca komentar ini, seperti yang telah disebutkan dalam pertanyaan itu, Selenium tidak terpengaruh karena ia mendorong browser dan menggunakan teknologi evaluasi JavaScript yang mendasari yang sama dengan alat dev.
Yi Zeng
1
@ user1177636: Perangkat lunak apa yang Anda gunakan untuk membuat GIF ini?
JacekM
Jika Anda memerlukan parser lokal untuk XQuery juga, saya telah menemukan BaseX
tuxErrante
4
Jawaban perlu pembaruan untuk Firefox. Sayangnya Firebug sudah usang dan telah digabungkan ke dalam Alat Pengembang. Saat ini Anda dapat menguji ekspresi xpath di Konsol, mis.$("//div")
derloopkat
53

Anda dapat membuka DevTools di Chrome dengan CTRL+Idi Windows (atau CMD+IMac), dan Firefox dengan F12, lalu pilih Consoletab), dan periksa XPath dengan mengetik $x("your_xpath_here").
Ini akan mengembalikan array nilai yang cocok. Jika kosong, Anda tahu tidak ada kecocokan di halaman.

Firefox v66 (April 2019):

Firefox v66 konsol xpath

Chrome v69 (April 2019):

Chrome v69 konsol xpath

bosnjak
sumber
1
Metode ini tidak ideal tetapi baik untuk diketahui karena ekspresi xpath apa pun yang Anda tulis di konsol itu dapat dieksekusi oleh JavascriptExecutor di Selenium. Terkadang Anda dapat menggunakannya sebagai solusi, mungkin saat acara bawaan Firefox dinonaktifkan?
djangofan
1
@ Djangofan, bagaimana maksudmu? Dengan logika itu kedua jawaban ini, meskipun benar, tidak perlu oleh logika Anda.
Arran
1
@ bosnjak ketika mencoba ini di konsol $x("//input[@name='q']")saya dapatkanVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
YasserKhalil
@YasserKhalil browser mana yang Anda gunakan, versi apa? Di situs apa Anda melakukan ini?
bosnjak
16

Dengan menggunakan chrome atau Opera

tanpa plugin, tanpa menulis karakter sintaks XPath tunggal

  1. klik kanan elemen yang diperlukan, lalu "periksa"
  2. klik kanan pada tag elemen yang disorot, pilih salin> Salin Xpath.

;)

masukkan deskripsi gambar di sini

Eng Samer T
sumber
2
Untuk Chrome, ini adalah solusi TERBAIK yang pernah saya lihat. Terima kasih telah berbagi. Memudahkan konfirmasi di Chrome ketika saya tidak ingin menggunakan Firefox.
Automationtested
Saya menggunakan ini untuk keuntungan besar. Tetapi satu masalah besar adalah bahwa kadang-kadang menu konteks dinonaktifkan atau ditimpa. Maka Anda harus mengandalkan pendekatan lain.
ouflak
1
Ini tidak benar-benar menjawab pertanyaan. Itu tidak memverifikasi xpath yang ada, itu menghasilkan xpath Salah satu yang dihasilkan Chrome seringkali jelek dan sangat rapuh ketika ada solusi yang jauh lebih baik.
Mayor Mayor
6

Berikut ini adalah ekstensi ChroPath untuk Chrome yang memiliki banyak fitur canggih dibandingkan dengan FirePath- Harap ikuti langkah-langkah di bawah ini:

  1. Buka panel devtools.
  2. Klik kanan di mana saja di halaman web.
  3. Klik Periksa.
  4. Di sisi kanan tab Elemen, klik pada tab ChroPath.

Di sini Anda akan mendapatkan XPath / CSS dan Anda juga dapat mengedit dan mengevaluasinya.

Unduh addon

SanjayKumar I Pencipta ChroPath
sumber
1
Ekstensi ChroPath masih berfungsi pada tahun 2020. Terima kasih. Bantuan besar.
Bubbles
1

Pilihan lain untuk memeriksa xpath Anda adalah menggunakan selenium IDE.

  1. Instal Firefox Selenium IDE
  2. Buka aplikasi Anda di FireFox dan buka IDE
  3. Di IDE, pada baris baru, rekatkan xpath Anda ke target dan klik Temukan. Elemen yang sesuai akan disorot dalam aplikasi Anda

IDE selenium

AJC
sumber