ตัวเลือก CSS ใน Selenium
ตัวเลือก CSS คืออะไร?
ตัวเลือก CSS ใน Selenium เป็นรูปแบบสตริงที่ใช้ในการระบุองค์ประกอบตามการรวมกันของแท็ก HTML, id, คลาสและแอตทริบิวต์ ค้นหาโดยตัวเลือก CSS ใน Selenium มีความซับซ้อนกว่าวิธีการก่อนหน้านี้ แต่เป็นกลยุทธ์การค้นหาขั้นสูงที่พบบ่อยที่สุด Selenium ผู้ใช้เพราะสามารถเข้าถึงองค์ประกอบที่ไม่มี ID หรือชื่อได้
ตัวเลือก CSS ใน Selenium มีหลายรูปแบบ แต่เราจะเน้นเฉพาะรูปแบบที่พบบ่อยที่สุดเท่านั้น CSS Locator ประเภทต่างๆ ใน Selenium IDE
- แท็กและรหัส
- แท็กและคลาส
- แท็กและแอตทริบิวต์
- แท็ก คลาส และแอตทริบิวต์
- ข้อความภายใน
เมื่อใช้กลยุทธ์นี้ เราจะนำหน้าเสมอ Target กล่องที่มี “css=” ดังแสดงในตัวอย่างต่อไปนี้
แท็กและรหัส – ตัวเลือก CSS
ในตัวอย่างนี้ เราจะใช้กล่องข้อความอีเมลของ Facebook อีกครั้ง ดังที่คุณจำได้ กล่องข้อความนี้มี ID ว่า “อีเมล” และเราได้เข้าถึงกล่องข้อความนี้แล้วในส่วน “การค้นหาด้วย ID” ครั้งนี้ เราจะใช้ Selenium ตัวเลือก CSS พร้อม ID ในการเข้าถึงองค์ประกอบเดียวกันนั้น
วากยสัมพันธ์
css=tag#id
- tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
- # = เครื่องหมายแฮช สิ่งนี้ควรปรากฏเสมอเมื่อใช้ Selenium ตัวเลือก CSS พร้อม ID
- id = ID ขององค์ประกอบที่กำลังเข้าถึง
โปรดทราบว่า ID จะต้องนำหน้าด้วยเครื่องหมายแฮช (#) เสมอ
ขั้นตอน 1) นำทางไปยัง www.facebook.comให้ใช้ Firebug ตรวจสอบช่องข้อความ “อีเมลหรือโทรศัพท์”
ในขั้นตอนนี้ โปรดทราบว่าแท็ก HTML คือ “input” และ ID คือ “email” ดังนั้นรูปแบบของเราจะเป็น “css=input#email”
ขั้นตอน 2) ป้อน “css=input#email” ลงใน Target กล่องของ Selenium IDE แล้วคลิกปุ่มค้นหา Selenium IDE ควรจะสามารถเน้นองค์ประกอบนั้นได้
แท็กและคลาส – ตัวเลือก CSS
ตัวเลือก CSS ใน Selenium การใช้แท็ก HTML และชื่อคลาสจะคล้ายกับการใช้แท็กและ ID แต่ในกรณีนี้ จะใช้จุด (.) แทนเครื่องหมายแฮช
วากยสัมพันธ์
css=tag.class
- tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
- - = เครื่องหมายจุด สิ่งนี้ควรปรากฏเสมอเมื่อใช้ตัวเลือก CSS กับคลาส
- class = คลาสขององค์ประกอบที่กำลังเข้าถึง
ขั้นตอน 1) ไปที่หน้าสาธิต https://demo.guru99.com/test/facebook.html และใช้ Firebug เพื่อตรวจสอบกล่องข้อความ “อีเมลหรือโทรศัพท์” สังเกตว่าแท็ก HTML คือ “input” และคลาสคือ “inputtext”
ขั้นตอน 2) In Selenium IDE ป้อน “css=input.inputtext” ใน Target กล่องและคลิกค้นหา Selenium IDE ควรสามารถจดจำกล่องข้อความอีเมลหรือโทรศัพท์ได้
โปรดทราบว่าเมื่อหลายองค์ประกอบมีแท็ก HTML และชื่อเหมือนกัน ระบบจะจดจำเฉพาะองค์ประกอบแรกในซอร์สโค้ดเท่านั้นให้ใช้ Firebug ตรวจสอบช่องข้อความรหัสผ่านใน Facebook และสังเกตว่ามีชื่อเดียวกันกับช่องข้อความอีเมลหรือโทรศัพท์
เหตุผลที่เน้นเฉพาะช่องข้อความอีเมลหรือโทรศัพท์ในภาพประกอบก่อนหน้านี้ก็เพราะว่าช่องข้อความนี้ปรากฏเป็นอันดับแรกในแหล่งที่มาของหน้า Facebook
แท็กและแอตทริบิวต์ – ตัวเลือก CSS
กลยุทธ์นี้ใช้แท็ก HTML และแอตทริบิวต์เฉพาะขององค์ประกอบที่จะเข้าถึง
วากยสัมพันธ์
css=tag[attribute=value]
- tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
- [ และ ] = วงเล็บเหลี่ยมซึ่งจะใส่แอตทริบิวต์เฉพาะและค่าที่สอดคล้องกันไว้
- คุณลักษณะ = คุณลักษณะที่จะใช้ ขอแนะนำให้ใช้แอตทริบิวต์ที่ไม่ซ้ำกับองค์ประกอบ เช่น ชื่อหรือรหัส
- value = ค่าที่สอดคล้องกันของแอตทริบิวต์ที่เลือก
ขั้นตอน 1) นำทางไปยัง Mercury หน้าลงทะเบียนทัวร์ https://demo.guru99.com/test/newtours/register.php และตรวจสอบกล่องข้อความ “นามสกุล” จดบันทึกแท็ก HTML (“input” ในกรณีนี้) และชื่อ (“lastName”)
ขั้นตอน 2) In Selenium IDE ให้ป้อน “css=input[name=lastName]” ในไฟล์ Target กล่องและคลิกค้นหา Selenium IDE ควรสามารถเข้าถึงช่องนามสกุลได้สำเร็จ
เมื่อองค์ประกอบหลายรายการมีแท็ก HTML และแอตทริบิวต์เหมือนกัน ระบบจะจดจำเฉพาะองค์ประกอบแรกเท่านั้น- ลักษณะการทำงานนี้คล้ายกับการค้นหาองค์ประกอบโดยใช้ตัวเลือก CSS ที่มีแท็กและคลาสเดียวกัน
แท็ก คลาส และแอตทริบิวต์ – ตัวเลือก CSS
วากยสัมพันธ์
css=tag.class[attribute=value]
- tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
- - = เครื่องหมายจุด สิ่งนี้ควรปรากฏเสมอเมื่อใช้ตัวเลือก CSS กับคลาส
- class = คลาสขององค์ประกอบที่กำลังเข้าถึง
- [ และ ] = วงเล็บเหลี่ยมซึ่งจะใส่แอตทริบิวต์เฉพาะและค่าที่สอดคล้องกันไว้
- คุณลักษณะ = คุณลักษณะที่จะใช้ ขอแนะนำให้ใช้แอตทริบิวต์ที่ไม่ซ้ำกับองค์ประกอบ เช่น ชื่อหรือรหัส
- value = ค่าที่สอดคล้องกันของแอตทริบิวต์ที่เลือก
ขั้นตอน 1) ไปที่หน้าสาธิต https://demo.guru99.com/test/facebook.html และใช้ Firebug เพื่อตรวจสอบช่องป้อนข้อมูล 'อีเมลหรือโทรศัพท์' และ 'รหัสผ่าน' จดบันทึกแท็ก HTML คลาส และแอตทริบิวต์ของช่องเหล่านี้ สำหรับตัวอย่างนี้ เราจะเลือกแอตทริบิวต์ 'tabindex'
ขั้นตอน 2) เราจะเข้าถึงกล่องข้อความ 'อีเมลหรือโทรศัพท์' ก่อน ดังนั้นเราจะใช้ค่า tabindex เท่ากับ 1 ป้อน “css=input.inputtext[tabindex=1]” ใน Selenium IDE ของ Target กล่องและคลิกค้นหา ช่องป้อนข้อมูล 'อีเมลหรือโทรศัพท์' ควรได้รับการเน้น
ขั้นตอน 3) หากต้องการเข้าถึงช่องป้อนรหัสผ่าน เพียงแค่แทนที่ค่าของแอตทริบิวต์ tabindex ป้อน “css=input.inputtext[tabindex=2]” ในส่วน Target กล่องและคลิกปุ่มค้นหา Selenium IDE จะต้องสามารถระบุกล่องข้อความรหัสผ่านได้สำเร็จ
ข้อความภายใน – ตัวเลือก CSS
ดังที่คุณอาจสังเกตเห็นแล้วว่า ป้ายกำกับ HTML ไม่ค่อยได้รับการระบุ id ชื่อ หรือแอตทริบิวต์คลาส แล้วเราจะเข้าถึงมันได้อย่างไร? คำตอบคือผ่านการใช้ข้อความภายในของพวกเขา ข้อความภายในคือรูปแบบสตริงจริงที่ป้ายกำกับ HTML แสดงบนหน้า
วากยสัมพันธ์
css=tag:contains("inner text")
- tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
- ข้อความภายใน = ข้อความภายในขององค์ประกอบ
ขั้นตอน 1) นำทางไปยัง Mercury หน้าแรกของทัวร์ https://demo.guru99.com/test/newtours/ และใช้ Firebug เพื่อตรวจสอบป้ายกำกับ "รหัสผ่าน" จดแท็ก HTML ของมัน (ซึ่งในกรณีนี้คือ "แบบอักษร") และสังเกตว่าแท็กไม่มีแอตทริบิวต์คลาส รหัส หรือชื่อ
ขั้นตอน 2) ประเภท css=font:contains("รหัสผ่าน:") เข้าไป Selenium IDE ของ Target กล่องและคลิกค้นหา Selenium IDE ควรสามารถเข้าถึงป้ายกำกับรหัสผ่านได้ดังที่แสดงในภาพด้านล่าง
ขั้นตอน 3) คราวนี้แทนที่ข้อความด้านในด้วย "Boston" เพื่อให้เป็นของคุณ Target ตอนนี้จะกลายเป็น “css=font:contains(“Boston”)” คลิกค้นหา คุณควรสังเกตเห็นว่าป้ายกำกับ “Boston to San Francisco” จะถูกเน้น ซึ่งแสดงว่า Selenium IDE สามารถเข้าถึงป้ายกำกับแบบยาวได้แม้ว่าคุณจะระบุคำแรกของข้อความภายในก็ตาม
สรุป
ไวยากรณ์สำหรับการค้นหาโดยใช้ตัวเลือก CSS
วิธี | Target วากยสัมพันธ์ | ตัวอย่าง |
---|---|---|
แท็กและรหัส | css=tag#id | css=อินพุต#อีเมล |
แท็กและคลาส | css=tag.คลาส | css=input.inputtext |
แท็กและแอตทริบิวต์ | CSS=แท็ก[แอตทริบิวต์=ค่า] | css=input[ชื่อ=นามสกุล] |
แท็ก คลาส และแอตทริบิวต์ | css=tag.class[แอตทริบิวต์=ค่า] | css=input.inputtext[tabindex=1] |