มีวิธีในการรับ XPath ใน Google Chrome หรือไม่?

346

ฉันมีหน้าเว็บที่ฉันต้องการใช้กับ YQL แต่ฉันต้องการ XPath ของรายการเฉพาะ ฉันสามารถดูได้ในพื้นที่เครื่องมือแก้ปัญหาสำหรับ Google Chrome แต่ฉันไม่เห็นวิธีคัดลอก XPath นั้น

มีวิธีการคัดลอก XPath แบบเต็มหรือไม่?

google-chrome google-chrome-devtools

— GeoffreyF67
แหล่งที่มา

2

หากคุณยินดีที่จะติดตั้ง Firefox นอกเหนือจาก Chrome คุณสามารถใช้ส่วนขยายxpather

— Adrian Grigore

4

ถ้าเขายินดีที่จะติดตั้ง Firefox มันก็สร้างไว้ใน Firebug แล้ว

— Verhogen

2

@ verhogen: ฉันไม่ได้ตระหนักถึงสิ่งนี้แม้ว่าฉันจะใช้ Firebug เกือบทุกวัน ในกรณีที่คนอื่นสนใจข้อมูลเพิ่มเติมที่นี่ก็คือ: blog.browsermob.com/2009/04/…

— Adrian Grigore

ฉันกำลังอัปเกรดสิ่งนี้อยู่ .... ตัวช่วย Xpath ใน Google Chrome ทำงานได้ไม่ดีทั้งเมื่อกดปุ่มทางลัด [Ctrl + Shift + X] หรือคลิกปุ่ม "X Path" สีดำ (โดยปุ่มประแจ) ใน คอนโซล JS เมื่อมีข้อผิดพลาด JS ในหน้า และฉันไม่พบโปรแกรมเสริมที่ดีอื่น ๆ สำหรับ Chrome ที่นั่น อย่าดาวน์โหลดโปรแกรมเสริม "XPath Checker" สำหรับ Mozilla ฉันพบปัญหาเกี่ยวกับแอดออนนั้นด้วย ตรวจสอบให้แน่ใจว่าได้รับ "XPather" และดาวน์โหลดในขณะที่คุณเปิด Firefox (ไม่ใช่เบราว์เซอร์อื่น) หากต้องการใช้องค์ประกอบ "XPather" ให้คลิกขวาและเลือก "แสดงใน XPather"

— MacGyver

ตอนนี้ Chrome มีส่วนขยาย "XPather" เช่นกัน ฉันรู้สึกว่ามันดีมาก Alt-'x 'เพื่อเปิดใช้งานหน้าต่าง คุณสามารถป้อน xpath และดูผลลัพธ์ที่ตรงกัน การแสดงผลลัพธ์ที่ตรงกันค่อนข้างเรียบร้อย

— gm2008

555

คุณสามารถใช้$xในคอนโซลจาวาสคริปต์ของ Chrome ไม่จำเป็นต้องใช้ส่วนขยาย

อดีต: $x("//img")

นอกจากนี้ช่องค้นหาในตัวตรวจสอบเว็บจะยอมรับ xpath

— Matt Polito
แหล่งที่มา

2

ดี - แม้ว่าฉันไม่แน่ใจว่าสิ่งนี้จะตอบคำถามเดิมได้ คุณทราบเกี่ยวกับเรื่องนี้ได้อย่างไร ฉันสงสัยว่ามีฟังก์ชั่นอื่นที่คล้ายคลึงกันในคอนโซลหรือไม่

— huyz

4

ฉันเดาว่า Chrome คัดลอกคำสั่งบรรทัดคำสั่ง Firebug เกือบทั้งหมด: getfirebug.com/wiki/index.php/Command_Line_API

— huyz

99

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

— Max Williams

3

ที่น่าสนใจวิธีการที่ไม่เปิดเผยCtrl+Space $xหากคุณเพียงพิมพ์$xคุณจะเห็นว่ามันสำเร็จได้อย่างไร OP ควรจะสามารถกำหนดวิธีการบรรลุสิ่งที่พวกเขาต้องการ ตัวอย่างเช่น; document.evaluate('//h1', document, null, XPathResult.STRING_TYPE, null).stringValue

— Alasdair

5

@huyz - มีฟังก์ชั่นที่คล้ายกัน ดูdevelopers.google.com/chrome-developer-tools/docs/console $ 0 มีประโยชน์อย่างยิ่ง: องค์ประกอบสุดท้ายที่คุณเลือกในเครื่องมือ DOM $ ($ 0) ทำให้เป็นวัตถุ jQuery (ถ้ามี jQuery) นอกจากนี้บทความไม่ได้กล่าวถึงการคัดลอก ($ 0) ซึ่งคัดลอกไปยังคลิปบอร์ด (บังเอิญฉันเพิ่งค้นพบ $ x และพบกระทู้นี้เพราะฉันพยายามที่จะใช้ตัวแปรนั้นสำหรับสิ่งอื่นในคอนโซล)

— นาธานลอง

245

คลิกขวาที่โหนด => "คัดลอก XPath"

— zavidovych
แหล่งที่มา

19

นี่เป็นวิธีที่เปราะบางที่สุดในการรับ xpath มีแนวโน้มที่จะแตกหักเมื่อการเปลี่ยนแปลงเนื้อหา

— Juan Mendes

8

@JuanMendes เป็นทางเลือกอะไร

— เนท

9

@Nate ไม่มีทางเลือกอื่นถ้าคุณต้องการให้ XPath ของคุณยังคงทำงานตามการเปลี่ยนแปลงของเอกสาร คุณแค่คิดและอย่าเพิ่มข้อมูลที่ไม่จำเป็นลงใน XPath ของคุณ กฏเกณฑ์ง่ายๆก็คือยิ่ง XPath ของคุณใช้งานได้นานเท่าใดโอกาสในการทำงานกับบริบทอื่น ๆ ก็จะน้อยลงเท่านั้น

— Juan Mendes

สิ่งนี้ไม่ได้ให้ XPath จริงสำหรับองค์ประกอบที่ไม่ซ้ำในหน้า นั่นคงเป็นเรื่องยาก

— CJ7

1

ใน Google Chrome รุ่นใหม่คุณต้องคลิกขวาที่โหนดและเลือกคัดลอกรายการ XPath ที่ย้ายไปที่ตัวเลือกการคัดลอก

— Omid Nasri

92

คำตอบข้างต้นทั้งหมดถูกต้องที่นี่เป็นอีกวิธีหนึ่งที่มีภาพหน้าจอ

จาก Chrome:

คลิกขวาที่ "ตรวจสอบ" ในรายการที่คุณพยายามค้นหา xpath
คลิกขวาที่บริเวณที่ถูกเน้นบนคอนโซล
ไปที่การคัดลอก xpath

— grepit
แหล่งที่มา

24

ส่วนขยาย XPath Helper ทำในสิ่งที่คุณต้องการ: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

— asadovsky
แหล่งที่มา

ไม่มีใครรู้ว่าคำสั่งแป้นพิมพ์สำหรับสิ่งนี้บน Ubuntu หรือไม่? crtl-shift-x และ command-shift-x ดูเหมือนจะไม่ทำอะไรเลย

— xiatica

1

@xiatica คุณลองใช้แท็บใหม่ / รีเฟรชแล้วหรือยัง โปรดทราบว่าส่วนขยายจะไม่ทำงานในแท็บที่เปิดก่อนการติดตั้ง แท็บดังกล่าวจะต้องรีเฟรช

— asadovsky

13

ไม่จำเป็นต้องใช้ส่วนขยายใน Chrome ในตอนนี้ คลิกขวาที่องค์ประกอบใด ๆ ที่คุณต้องการ xpath และคลิกที่ "ตรวจสอบองค์ประกอบ" จากนั้นอีกครั้งภายในตัวตรวจสอบคลิกขวาที่องค์ประกอบแล้วคลิกที่ "คัดลอก Xpath"

— deepdive
แหล่งที่มา

11

วิธีการนี้ได้กล่าวถึงแล้วในคำตอบก่อนหน้าโพสต์เมื่อปีที่แล้ว: stackoverflow.com/a/11087358/938089

— Rob W

12

Google Chrome มีเครื่องมือตรวจแก้จุดบกพร่องในตัวที่เรียกว่า " Chrome DevTools " ซึ่งมีคุณสมบัติที่ใช้งานง่ายที่สามารถประเมินหรือตรวจสอบตัวเลือก XPath / CSS ได้โดยไม่ต้องมีส่วนขยายใด ๆ ของบุคคลที่สาม

สามารถทำได้สองวิธี:

ใช้ฟังก์ชันการค้นหาภายในแผงองค์ประกอบเพื่อประเมินตัวเลือก XPath / CSS และไฮไลต์โหนดที่ตรงกันใน DOM เรียกใช้โทเค็น $ x ("some_xpath") หรือ $$ ("css-selectors") ในแผงควบคุมคอนโซลซึ่งทั้งคู่จะประเมินและตรวจสอบความถูกต้อง

จากแผงองค์ประกอบ

กด F12 เพื่อเปิด Chrome DevTools
แผงองค์ประกอบควรจะเปิดตามค่าเริ่มต้น
กด Ctrl + F เพื่อเปิดใช้งานการค้นหา DOM ในแผงควบคุม
พิมพ์ในตัวเลือก XPath หรือ CSS เพื่อประเมิน
หากมีองค์ประกอบที่ตรงกันองค์ประกอบเหล่านั้นจะถูกเน้นใน DOM อย่างไรก็ตามหากมีสตริงที่ตรงกันภายใน DOM พวกเขาจะถูกพิจารณาว่าเป็นผลลัพธ์ที่ถูกต้องเช่นกัน ตัวอย่างเช่นส่วนหัวตัวเลือก CSS ควรตรงกับทุกอย่าง (อินไลน์ CSS, สคริปต์ ฯลฯ ) ที่มีส่วนหัวของคำแทนการจับคู่องค์ประกอบเท่านั้น

จากแผงคอนโซล

กด F12 เพื่อเปิด Chrome DevTools
สลับไปที่แผงคอนโซล
พิมพ์ XPath ต้องการ$x(".//header")ประเมินและตรวจสอบความถูกต้อง
พิมพ์ตัวเลือก CSS $$("header")เพื่อประเมินและตรวจสอบความถูกต้อง
ตรวจสอบผลลัพธ์ที่ส่งคืนจากการดำเนินการของคอนโซล

หากองค์ประกอบถูกจับคู่พวกเขาจะถูกส่งกลับในรายการ มิฉะนั้นรายการว่าง [] จะปรากฏขึ้น

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

หากตัวเลือก XPath หรือ CSS ไม่ถูกต้องข้อยกเว้นจะปรากฏเป็นข้อความสีแดง ตัวอย่างเช่น:

$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.

$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.

— Shubham Jain
แหล่งที่มา

10

บอกสูตรง่ายๆให้คุณค้นหา xpath ขององค์ประกอบใด ๆ

1- เปิดเว็บไซต์ในเบราว์เซอร์

2- เลือกองค์ประกอบและคลิกขวาที่มัน

3- คลิกตรวจสอบตัวเลือกองค์ประกอบ

4- คลิกขวาที่ html ที่เลือก

5- เลือกตัวเลือกเพื่อคัดลอก xpath ใช้ในที่ที่คุณต้องการ

ลิงค์วิดีโอนี้จะเป็นประโยชน์สำหรับคุณ http://screencast.com/t/afXsaQXru

หมายเหตุ: สำหรับตัวเลือกขั้นสูงของ xpath คุณต้องรู้จัก regex หรือรูปแบบของ html ของคุณ

— Abdul Majeed
แหล่งที่มา

3

ใช้คอนโซล Chrome เพื่อทดสอบและทำสิ่งนี้เพื่อ$x('//*[@id="answer-33492958"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].click();

— อัปโหลด

8

xpathOnClick มีสิ่งที่คุณกำลังมองหา: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

อ่านความคิดเห็นว่าจริง ๆ แล้วมันใช้เวลาสามคลิกเพื่อรับ xpath

— เบิร์ท
แหล่งที่มา

ดูเหมือนจะไม่ทำงานบน ubuntu 10.04 ด้วย chrome 12.0.742.124 ติดตั้ง แต่เมื่อคลิกที่ไอคอน xpath จากนั้นคลิกที่หน้า (ครั้งแรกที่จะปิดป๊อปอัพ xpath) จากนั้นคลิกองค์ประกอบหน้า (เพื่อแสดง xpath ใน js console ) .... ไม่มีอะไรปรากฏขึ้นในคอนโซล ทดสอบบนไซต์ปลั๊กอิน

— xiatica

8

จากการอัปเดตล่าสุดสำหรับ Chrome คุณสามารถคลิกองค์ประกอบใด ๆ ในตัวตรวจสอบองค์ประกอบและคัดลอก XPath ไปยังคลิปบอร์ด

— เขี้ยวลากดิน
แหล่งที่มา

5

สำหรับ Chrome เช่น:

คลิกขวาที่ "ตรวจสอบ" ในรายการที่คุณพยายามค้นหา XPath
คลิกขวาที่บริเวณที่ถูกเน้นบน DOM HTML
ไปที่การคัดลอก> เลือก 'คัดลอก XPath'
หลังจากขั้นตอนข้างต้นคุณจะได้รับ XPath แน่นอนขององค์ประกอบจาก DOM
คุณสามารถทำการเปลี่ยนแปลงเพื่อให้สัมพันธ์กับ XPath (เพราะถ้า DOM เปลี่ยนไป XPath ของคุณจะยังสามารถค้นหาองค์ประกอบได้)

โดยเปิดแผง 'องค์ประกอบ' ของเบราว์เซอร์กด CTRL + F วาง XPath

ข ทำการเปลี่ยนแปลงตามที่อธิบายไว้ในตัวอย่างต่อไปนี้

xpath สัมบูรณ์ = // * [@ id = "แอป"] / div [1] / ส่วนหัว / nav / div [2] / ul / li [2] / div / ปุ่ม

xpath ที่เกี่ยวข้อง = // div // nav / div [2] / ul / li [2] / div / ปุ่ม

เมื่อคุณทำการเปลี่ยนแปลง:

ตรวจสอบว่า XPath ไม่ซ้ำกันภายใน DOM
ยังคงมีการเลือกองค์ประกอบของเว็บใน DOM และบนหน้าเว็บ

— Hossain Mahmood Tuhin
แหล่งที่มา

3

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

— RAAAAAAAANDY
แหล่งที่มา

2

ใน Firebug ใน Firefox คุณสามารถคลิกขวาที่องค์ประกอบหลังจากตรวจสอบแล้วเลือกคัดลอก XPath ฉันไม่สามารถรับ Chromyql ให้ทำงานได้อย่างราบรื่น

— อีวาน
แหล่งที่มา

1

คุณสามารถลองใช้ Chrome Web Extension TruePathซึ่งสร้าง XPath แบบสัมพัทธ์แบบไดนามิกเมื่อคลิกขวาบนหน้าเว็บและแสดง XPath ทั้งหมดเป็นรายการเมนู

— dasunse
แหล่งที่มา

0

OT เล็กน้อย แต่อาจมีประโยชน์: บน Mac Chrome แม้ว่าคุณจะไม่สามารถคัดลอก xpath ออกจากช่องค้นหาในแผงเครื่องมือ Dev (แทนคัดลอกคว้าโหนดเป็น HTML) คุณสามารถลากและวางข้อความลงในโปรแกรมแก้ไขภายนอก

— Ben Weiner
แหล่งที่มา

0

ฉันลองส่วนขยายที่มีอยู่เกือบทั้งหมดและพบว่าด้านล่างเป็นส่วนที่ดีที่สุด

ลิงก์ส่วนขยาย ChroPath

เช่นเดียวกับ FirePath ส่วนขยายนี้ให้ Xpath โดยตรงเมื่อคุณคลิกที่ตรวจสอบ