วิธีการตรวจสอบนิพจน์ XPath ในเครื่องมือนักพัฒนา Chrome หรือ Firefox ของ Firebug

179

ฉันจะตรวจสอบ XPath ของฉันได้อย่างไร

ฉันใช้เครื่องมือ Chrome Developers เพื่อตรวจสอบองค์ประกอบและสร้าง XPath ของฉัน ฉันตรวจสอบโดยใช้ปลั๊กอินตัวตรวจสอบ XPath ของ Chrome แต่ไม่ได้ให้ผลลัพธ์เสมอ เป็นวิธีที่ดีกว่าในการตรวจสอบ XPath ของฉัน

ฉันได้ลองใช้ Firebug เพื่อตรวจสอบข้อผิดพลาดและใช้ FirePath เพื่อตรวจสอบ แต่ Firepath จะตรวจสอบ XPath ด้วยหรือไม่

ตัวเลือกสุดท้ายของฉันคือใช้ซีลีเนียม WebDriver เพื่อยืนยัน XPath ของฉัน

google-chrome  firefox  selenium  xpath  selenium-webdriver 
— user3448242
แหล่งที่มา

คำตอบ:

367

โครเมียม

สามารถทำได้โดยสามวิธีที่แตกต่างกัน (ดูบทความบล็อกของฉันที่นี่สำหรับรายละเอียดเพิ่มเติม):

  • ค้นหาในElementsแผงด้านล่าง
  • ดำเนินการ$x()และ$$()ในConsoleแผงควบคุมตามที่แสดงในคำตอบของ Lawrence
  • ส่วนขยายของบุคคลที่สาม (ไม่จำเป็นจริงๆในกรณีส่วนใหญ่อาจเป็น overkill)

นี่คือวิธีที่คุณค้นหา XPath ในElementsแผงควบคุม:

  1. กดF12เพื่อเปิดเครื่องมือนักพัฒนาซอฟต์แวร์ Chrome
  2. ในแผง "องค์ประกอบ" กดCtrl+F
  3. ในช่องค้นหาพิมพ์ใน XPath หรือ CSS Selector หากพบองค์ประกอบพวกเขาจะถูกเน้นด้วยสีเหลือง

ป้อนคำอธิบายรูปภาพที่นี่

Firefox (ตั้งแต่รุ่น 75)

เนื่องจาก FF 75 เป็นไปได้ที่จะใช้เคียวรี xpath แบบดิบโดยไม่มีการประเมิน xpath นิพจน์ดูเอกสารประกอบสำหรับข้อมูลเพิ่มเติม

Firefox (เวอร์ชั่นก่อนหน้า 75)

  1. ทั้งเลือก "Web Console" จากเมนูย่อย Web Developer ในเมนูของ Firefox (หรือเมนู Tools ถ้าคุณแสดงแถบเมนูหรือบน Mac OS X)
    หรือกดCtrl+ Shift+ K( Command+ Option+ Kบน OS X) แป้นพิมพ์ลัด

  2. ในบรรทัดคำสั่งที่ด้านล่างใช้สิ่งต่อไปนี้:

    • $(): ส่งคืนองค์ประกอบแรกที่ตรงกัน เทียบเท่าdocument.querySelector()หรือเรียกใช้$ฟังก์ชันในหน้าหากมีอยู่

    • $$(): ส่งคืนอาร์เรย์ของโหนด DOM ที่ตรงกัน นี้เป็นเหมือนแต่ผลตอบแทนที่ได้อาร์เรย์แทนdocument.querySelectorAll()NodeList

    • $x(): ประเมินค่านิพจน์ XPath และส่งกลับอาร์เรย์ของโหนดที่ตรงกัน

Firefox (รุ่นก่อนหน้า 49)

  1. ติดตั้งFirebug
  2. ติดตั้งFirepath
  3. กดF12เพื่อเปิด Firebug
  4. สลับไปที่FirePathแผง
  5. ในเมนูแบบเลื่อนลงเลือก XPathor CSS
  6. พิมพ์เพื่อค้นหา

ป้อนคำอธิบายรูปภาพที่นี่

— ยี่เซง
แหล่งที่มา
2
เพียงหนึ่งคำเตือนเกี่ยวกับ XPath และเบราว์เซอร์เนื่องจากสิ่งนี้นำไปสู่ความสับสนมากมาย: stackoverflow.com/questions/18241029/…
— Jens Erat
@ JensErat: จุดดีจริงๆ สำหรับคนอื่นที่อ่านความคิดเห็นนี้ดังที่ได้กล่าวไปแล้วในคำถามนั้นซีลีเนียมจะไม่ได้รับผลกระทบเพราะมันขับเคลื่อนเบราว์เซอร์และใช้เทคโนโลยีการประเมิน JavaScript พื้นฐานพร้อมกับเครื่องมือ dev
— Yi Zeng
1
@ user1177636: ซอฟต์แวร์ใดที่คุณใช้ในการสร้าง GIF เหล่านี้
— JacekM
หากคุณต้องการเครื่องมือแยกวิเคราะห์ในพื้นที่สำหรับ XQuery ด้วยฉันได้พบ BaseX: basex.org/products
— tuxErrante
4
คำตอบต้องการการอัปเดตสำหรับ Firefox น่าเสียดายที่ Firebug ล้าสมัยและรวมเข้ากับเครื่องมือสำหรับนักพัฒนา ขณะนี้คุณสามารถทดสอบนิพจน์ xpath ในคอนโซลได้เช่น$("//div")
— derloopkat
53

คุณสามารถเปิด DevTools ใน Chrome ด้วยCTRL+Iบน Windows (หรือCMD+IMac) และ Firefox ด้วยF12จากนั้นเลือกConsoleแท็บ) และตรวจสอบ XPath $x("your_xpath_here")โดยการพิมพ์
นี่จะส่งคืนอาร์เรย์ของค่าที่ตรงกัน ถ้ามันว่างเปล่าคุณจะรู้ว่าไม่มีหน้าตรงกัน

Firefox v66 (เมษายน 2019):

xpath คอนโซลของ Firefox v66

Chrome v69 (เมษายน 2019):

xpath คอนโซลของ Chrome v69

— bosnjak
แหล่งที่มา
1
วิธีนี้ไม่เหมาะ แต่เป็นการดีที่จะรู้เพราะนิพจน์ xpath ที่คุณเขียนในคอนโซลนั้นสามารถเรียกใช้โดย JavascriptExecutor ใน Selenium บางครั้งคุณสามารถใช้วิธีนี้เป็นวิธีแก้ปัญหาบางทีเมื่อเกิดเหตุการณ์พื้นเมือง Firefox ถูกปิดการใช้งาน?
— djangofan
1
@dangangan คุณหมายถึงอะไร? ด้วยเหตุผลนั้นทั้งสองคำตอบเหล่านี้แม้ว่าจะถูกต้องแล้วก็ตามก็ไม่จำเป็นโดยตรรกะของคุณ
— Arran
1
@bosnjak เมื่อลองใช้คอนโซล$x("//input[@name='q']")ฉันได้รับVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
— YasserKhalil
@YasserKhalil คุณใช้เบราว์เซอร์รุ่นใดอยู่ คุณทำอะไรกับเว็บไซต์นี้
— bosnjak
16

โดยใช้ chrome หรือ Opera

ไม่มีปลั๊กอินใด ๆ โดยไม่ต้องเขียนอักขระไวยากรณ์ XPath ใด ๆ

  1. คลิกขวาที่องค์ประกอบที่ต้องการจากนั้น "ตรวจสอบ"
  2. คลิกขวาที่แท็กองค์ประกอบที่ไฮไลต์เลือกคัดลอก> คัดลอก Xpath

;)

ป้อนคำอธิบายรูปภาพที่นี่

— เอ็ง Samer T
แหล่งที่มา
2
สำหรับ Chrome นี่เป็นทางออกที่ดีที่สุดที่ฉันเคยเห็น ขอบคุณสำหรับการแบ่งปัน. ทำให้การยืนยันใน Chrome ง่ายขึ้นเมื่อฉันไม่ต้องการใช้ Firefox
— Automationtested
ฉันใช้สิ่งนี้เพื่อประโยชน์ที่ดีมาก แต่ปัญหาใหญ่อย่างหนึ่งคือบางครั้งเมนูบริบทถูกปิดใช้งานหรือเขียนทับ จากนั้นคุณต้องพึ่งพาวิธีการอื่น
— ouflak
1
นี่ไม่ได้ตอบคำถามจริงๆ มันไม่ได้ตรวจสอบ xpath ที่มีอยู่ แต่กำลังสร้างมันขึ้นมา Chrome ที่สร้างมักจะน่าเกลียดและบอบบางมากเมื่อมีวิธีแก้ปัญหาที่ดีกว่าอยู่แล้ว
— Major Major
6

นี่คือส่วนขยาย ChroPath สำหรับ Chrome ซึ่งมีคุณสมบัติขั้นสูงมากมายเมื่อเปรียบเทียบกับ FirePath- โปรดทำตามขั้นตอนด้านล่าง:

  1. เปิดพาเนล devtools
  2. คลิกขวาที่ใดก็ได้บนหน้าเว็บ
  3. คลิกตรวจสอบ
  4. ที่ด้านขวาของแท็บองค์ประกอบคลิกที่แท็บ ChroPath

ที่นี่คุณจะได้รับ XPath / CSS และคุณสามารถแก้ไขและประเมินได้

ดาวน์โหลด addon

— SanjayKumar I ChroPath Creator
แหล่งที่มา
1
ส่วนขยาย ChroPath ยังคงใช้งานได้ในปี 2020 ขอบคุณ ช่วยได้มาก
— Bubbles
1

อีกทางเลือกหนึ่งในการตรวจสอบ xpath ของคุณคือใช้ซีลีเนียม IDE

  1. ติดตั้ง Firefox Selenium IDE
  2. เปิดแอปพลิเคชันของคุณใน FireFox และเปิด IDE
  3. ใน IDE บนบรรทัดใหม่วาง xpath ของคุณไปยังเป้าหมายและคลิกค้นหา องค์ประกอบที่เกี่ยวข้องจะถูกเน้นในใบสมัครของคุณ

ซีลีเนียม IDE

— AJC
แหล่งที่มา
0

ผมตรวจสอบ XPath และ CSS เตอร์โดยใช้ส่วนขยาย WebSync Chrome

มันมีความเป็นไปได้ในการตรวจสอบตัวเลือกและเพื่อสร้าง / แก้ไขตัวเลือกโดยคลิกที่องค์ประกอบขององค์ประกอบ

https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac

ป้อนคำอธิบายรูปภาพที่นี่

— wsbaser
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.