ฉันจะหาองค์ประกอบโดยคลาส CSS ด้วย XPath ได้อย่างไร

ในหน้าเว็บของฉันมีความdivพร้อมกับการตั้งชื่อclassTest

ฉันจะหามันเจอได้XPathอย่างไร?

ตัวเลือกนี้ควรใช้งานได้ แต่จะมีประสิทธิภาพมากกว่าหากคุณแทนที่ด้วยมาร์คอัปที่เหมาะสม:

//*[contains(@class, 'Test')]

หรือเนื่องจากเรารู้ว่าองค์ประกอบที่ต้องการคือ div :

//div[contains(@class, 'Test')]

แต่เนื่องจากจะตรงกับกรณีเช่นclass="Testvalue"หรือclass="newTest"รุ่นของ @ Tomalak ที่ให้ไว้ในความคิดเห็นนั้นดีกว่า :

//div[contains(concat(' ', @class, ' '), ' Test ')]

หากคุณต้องการแน่ใจว่ามันจะจับคู่อย่างถูกต้องคุณสามารถใช้ฟังก์ชั่นการเว้นวรรคเพื่อล้างอักขระช่องว่างว่างรอบชื่อคลาส (ดังที่ @Terry) พูดถึง:

//div[contains(concat(' ', normalize-space(@class), ' '), ' Test ')]

โปรดทราบว่าในทุกเวอร์ชันเหล่านี้ควรแทนที่ * ด้วยชื่อองค์ประกอบใด ๆ ที่คุณต้องการจับคู่จริงๆยกเว้นว่าคุณต้องการค้นหาแต่ละองค์ประกอบในเอกสารสำหรับเงื่อนไขที่กำหนด

วิธีที่ง่ายที่สุด ..

//div[@class="Test"]

สมมติว่าคุณต้องการค้นหา<div class="Test">ตามที่อธิบายไว้

เฉพาะวิธีการที่เหมาะสมที่จะทำกับ XPath:

//div[contains(concat(" ", normalize-space(@class), " "), " Test ")]

ฟังก์ชั่นตัดnormalize-spaceช่องว่างนำหน้าและต่อท้ายช่องว่างและยังแทนที่ลำดับของอักขระช่องว่างด้วยช่องว่างเดียว

บันทึก

หากไม่ต้องการแบบสอบถาม Xpath เหล่านี้จำนวนมากคุณอาจต้องการใช้ไลบรารีที่แปลงตัวเลือก CSS เป็น XPath เนื่องจากตัวเลือก CSS มักจะง่ายกว่าทั้งในการอ่านและเขียนมากกว่าแบบสอบถาม XPath ตัวอย่างเช่นในกรณีนี้คุณสามารถใช้ทั้งสองdiv[class~="Test"]และdiv.Testเพื่อให้ได้ผลลัพธ์เดียวกัน

ห้องสมุดบางแห่งที่ฉันสามารถหาได้:

• สำหรับJavaScript : css2xpath & css-to-xpath
• สำหรับPHP : องค์ประกอบ CssSelector
• สำหรับงูหลาม : cssselect
• สำหรับC # : css2xpath Reloaded
• สำหรับGO : css2xpath

ฉันแค่ให้คำตอบนี้เป็นคำตอบที่ Tomalak ให้ไว้เพื่อแสดงความคิดเห็นต่อคำตอบของคนกลางเมื่อนานมาแล้ว

//div[contains(concat(' ', @class, ' '), ' Test ')]

ฟังก์ชั่นที่เป็นประโยชน์สามารถทำจากคำตอบก่อนหน้านี้:

function matchClass($className) {
    return "[contains(concat(' ', normalize-space(@class), ' '), ' $className ')]";
}

จากนั้นเพียงแค่เชื่อมการเรียกใช้ฟังก์ชันลงในคิวรีของคุณ

การแข่งขันกับหนึ่งในชั้นเรียนที่มีช่องว่าง

<div class="hello "></div>

//div[normalize-space(@class)="hello"]

คุณสามารถค้นหาองค์ประกอบเช่นตัวอย่างนี้ (องค์ประกอบ CSS ทั้งหมด)

private By 
allElementsCss = By.xpath(".//div[@class]");