ตัวเลือก 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]