ตัวเลือก CSS (id ประกอบด้วยส่วนหนึ่งของข้อความ)

92

ผมมีคำถาม. ฉันมีองค์ประกอบดังนี้:

<a> องค์ประกอบที่มี id = someGenerated บาง: เหมือนกัน: 0: name

<a> องค์ประกอบที่มี id = someGenerated บาง: เหมือนกัน: 0: นามสกุล

<a> องค์ประกอบที่มี id = someGenerated บาง: เดียวกัน: 1: ชื่อ

<a> องค์ประกอบที่มี id = someGenerated บาง: เดียวกัน: 1: นามสกุล

ฉันต้องการตัวเลือก CSS เพื่อรับชื่อ ปัญหาคือไม่รู้จะเอายังไง ฉันลองแล้วa[id*='Some:Same']- มันส่งคืน<a>องค์ประกอบทั้งหมด หลังจากที่ฉันสามารถรับองค์ประกอบที่ id ลงท้ายด้วยชื่อ แต่ฉันไม่ชอบความคิดนี้ ฉันคิดว่ามันสามารถทำได้ด้วยตัวเลือกอื่น ๆ

css css-selectors webdriver

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

คุณช่วยเพิ่มตัวอย่างจริงของ<a>แท็กที่คุณต้องการเลือกและแท็กที่คุณไม่ต้องการได้ไหม จะช่วยให้เห็นโค้ดจริงได้ง่ายขึ้น

— andyb

ฉันไม่สามารถเพิ่มตัวอย่างจริงได้เนื่องจากนโยบายที่เป็นความลับ :(

— TarasLviv

แต่ฉันสามารถอธิบายได้อีกทางหนึ่ง แอตทริบิวต์ Id ประกอบด้วยถัดไป: อักขระที่สร้างขึ้นบางตัว + อักขระคงที่บางตัว +: elementIndexInTable: + ชื่อคอลัมน์ในตาราง

— TarasLviv

และอะไรคือเกณฑ์สำหรับผู้ที่คุณต้องการ?

— Tarken

144

ลองสิ่งนี้:

a[id*='Some:Same'][id$='name']

สิ่งนี้จะทำให้คุณได้รับaองค์ประกอบทั้งหมดที่มี id ประกอบด้วย

บางคน: เหมือนกัน

และมี id ที่ลงท้ายด้วย

ชื่อ

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

id * ใช้ไม่ได้สำหรับฉันและบอกว่าไม่สามารถประเมินเป็นองค์ประกอบของเว็บได้ ฉันใช้มันเพื่อค้นหา iframe ที่มี id เหมือน<constant><variable><constant>ชื่อ //driver.findElements(By.xpath("//iframe[contains(@id*,'FrameID')]")).size();โดยที่ FrameID เป็นส่วนเริ่มต้น ยังไงก็ตาม//a[contains(@id,'Some:Same') and contains(@id,'name')]เคล็ดลับสำหรับฉัน +1 ให้คุณเพื่อน

— anujin

2

คุณควรลบตัวเลือก XPath ออกจากคำตอบนี้มันไม่ได้เพิ่มอะไรเลยและทำให้น้ำขุ่นเท่านั้น

— Liam

1

@CosminO คุณต้องการที่*อยู่ข้างๆidหรือไม่?

— cokedude

@cokedude ตัวดำเนินการ * = หมายความว่าต้องมีค่าอย่างน้อยหลังตัวดำเนินการ ทำงานร่วมกับเงื่อนไขที่สองว่าต้องลงท้ายด้วยอย่างอื่นโดยใช้ตัวดำเนินการ $ = ดูคำอธิบายเชิงลึกw3schools.com/css/css_attribute_selectors.asp คำตอบสั้น ๆ * ไม่อยู่ถัดจาก id มันอยู่ถัดจาก = และสร้างตัวดำเนินการที่มีความหมายพิเศษ

— CosminO

22

<div id='element_123_wrapper_text'>My sample DIV</div>

Operator ^ - จับคู่องค์ประกอบที่ขึ้นต้นด้วยค่าที่กำหนด

div[id^="element_123"] {

}

Operator $ - จับคู่องค์ประกอบที่ลงท้ายด้วยค่าที่กำหนด

div[id$="wrapper_text"] {

}

ตัวดำเนินการ * - จับคู่องค์ประกอบที่มีแอตทริบิวต์ที่มีค่าที่กำหนด

div[id*="wrapper_text"] {

}

— เอดิคาร์ลอสโลเปส
แหล่งที่มา

8

ตัวเลือกเดียวที่ฉันเห็นคือa[id$="name"](ลิงก์ทั้งหมดที่มี id จบด้วย "name") แต่ก็ไม่ได้ จำกัด เท่าที่ควร

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