ตัวเลือก CSS ใน Selenium

CSS Selector คืออะไรใน Selenium?

A ตัวเลือก CSS ใน Selenium ตัวเลือก CSS (CSS Selector) คือรูปแบบสตริงที่ใช้ระบุองค์ประกอบของเว็บโดยใช้การผสมผสานระหว่างแท็ก HTML, ID, คลาส และแอตทริบิวต์ ตัวเลือก CSS นั้นซับซ้อนกว่าการค้นหาด้วย ID หรือชื่อเล็กน้อย แต่เป็นกลยุทธ์ที่ได้รับความนิยมมากที่สุดในหมู่ผู้เชี่ยวชาญ Selenium ผู้ใช้สามารถเข้าถึงองค์ประกอบที่ไม่มีแอตทริบิวต์ ID หรือ Name ได้เลย เนื่องจากพวกเขาสามารถเข้าถึงองค์ประกอบเหล่านั้นได้

ตัวเลือก CSS ใน Selenium มีหลายรูปแบบ แต่คู่มือนี้จะเน้นไปที่ 5 รูปแบบที่ใช้กันบ่อยที่สุด Selenium ไอดี:

• แท็กและรหัส
• แท็กและคลาส
• แท็กและแอตทริบิวต์
• แท็ก คลาส และแอตทริบิวต์
• ข้อความภายใน

เมื่อใช้กลยุทธ์นี้ใน Selenium IDE ให้ใส่คำนำหน้าเสมอ Target กล่องที่มี “css=ดังที่แสดงให้เห็นในทุกตัวอย่างด้านล่างนี้

เหตุใดจึงต้องใช้ตัวเลือก CSS ใน Selenium?

ตัวเลือก CSS เป็นกลยุทธ์การระบุตำแหน่งที่นิยมใช้สำหรับหลายๆ คน Selenium วิศวกรระบบอัตโนมัติเลือกใช้ CSS เพราะ CSS มีความสมดุลระหว่างความเร็ว ความยืดหยุ่น และความอ่านง่าย แอปพลิเคชันเว็บสมัยใหม่มักใช้ ID ที่สร้างขึ้นแบบไดนามิก หรือลบแอตทริบิวต์ชื่อออกไปทั้งหมด ทำให้ CSS Selector เป็นวิธีเดียวที่เชื่อถือได้ในการกำหนดเป้าหมายองค์ประกอบเฉพาะบนหน้าเว็บ

ข้อดีหลักๆ ของการใช้ตัวเลือก CSS ได้แก่:

• ประสิทธิภาพ: ตัวเลือก CSS จะถูกประมวลผลโดยกลไกพื้นฐานของเบราว์เซอร์ ดังนั้นจึงทำงานได้เร็วกว่านิพจน์ XPath ที่เทียบเท่ากัน โดยเฉพาะในเบราว์เซอร์รุ่นเก่า เช่น Internet Explorer
• ความยืดหยุ่น: ระบบนี้ผสานรวมตรรกะของแท็ก คลาส คุณลักษณะ และการจับคู่บางส่วน ทำให้ผู้ทดสอบสามารถกำหนดเป้าหมายไปยังองค์ประกอบที่ไม่มี ID ที่แน่นอนได้
• การอ่าน: รูปแบบไวยากรณ์เลียนแบบวิธีการที่นักพัฒนาเขียนกฎ CSS อยู่แล้ว ซึ่งช่วยลดระยะเวลาการเรียนรู้สำหรับทั้งวิศวกร QA และทีม front-end
• ความเสถียรในการใช้งานบนเบราว์เซอร์ต่างๆ: ตัวเลือก CSS ทำงานได้อย่างสม่ำเสมอในเบราว์เซอร์ Chrome Firefoxรวมถึง Edge และ Safari ซึ่งช่วยลดความล้มเหลวในการทดสอบที่ไม่เสถียร

แท็กและ ID – ตัวเลือก CSS

ตัวอย่างนี้ใช้ช่องข้อความอีเมลในหน้าเข้าสู่ระบบของ Facebook โดยองค์ประกอบนี้มี ID เป็น “อีเมลและได้เข้าถึงไปแล้วในส่วน “การค้นหาด้วย ID” ตอนนี้กำลังกำหนดเป้าหมายองค์ประกอบเดียวกันโดยใช้ Selenium ตัวเลือก CSS ที่มีแอตทริบิวต์ ID

วากยสัมพันธ์

css=tag#id

• tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
• # = เครื่องหมายแฮช ซึ่งต้องมีอยู่เสมอเมื่อใช้ Selenium ตัวเลือก CSS พร้อม ID
• id = ID ขององค์ประกอบที่กำลังเข้าถึง

โปรดทราบว่า ID จะต้องนำหน้าด้วยเครื่องหมายแฮช (#) เสมอ

ขั้นตอน 1) นำทางไปยัง www.facebook.comใช้เครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของคุณ (หรือเครื่องมือรุ่นเก่าอย่าง Firebug) ตรวจสอบช่องข้อความ "อีเมลหรือหมายเลขโทรศัพท์"

โปรดสังเกตว่าแท็ก HTML คือ “อินพุตและรหัสประจำตัวคือ “อีเมลดังนั้น ตัวเลือก CSS ที่สมบูรณ์จึงกลายเป็น “css=อินพุต#อีเมล"

ขั้นตอน 2) ใส่“css=อินพุต#อีเมล” เข้าไปใน 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 และตรวจสอบช่องข้อความ “อีเมลหรือเบอร์โทรศัพท์” สังเกตว่าแท็ก HTML คือ “อินพุตและคลาสของมันคือ “ข้อความป้อนเข้า"

ขั้นตอน 2) In Selenium IDE ให้ป้อน “css=input.inputtext"ใน Target กล่องและคลิกค้นหา Selenium IDE สามารถจดจำช่องข้อความอีเมลหรือหมายเลขโทรศัพท์ได้

โปรดทราบว่า เมื่อมีองค์ประกอบหลายรายการที่มีแท็ก HTML และคลาสเดียวกัน ระบบจะจดจำเฉพาะองค์ประกอบแรกที่ตรงกันในโค้ดต้นฉบับเท่านั้น ลองตรวจสอบช่องป้อนรหัสผ่านในหน้าเดียวกัน แล้วจะเห็นว่าช่องดังกล่าวใช้คลาสเดียวกันกับช่องป้อนอีเมลหรือหมายเลขโทรศัพท์

ในภาพประกอบก่อนหน้านี้ มีเพียงช่องข้อความอีเมลหรือหมายเลขโทรศัพท์เท่านั้นที่ถูกไฮไลต์ เนื่องจากช่องดังกล่าวปรากฏเป็นอันดับแรกในซอร์สโค้ดของหน้าเว็บ

แท็กและแอตทริบิวต์ – ตัวเลือก CSS

กลยุทธ์นี้เป็นการผสานแท็ก HTML เข้ากับแอตทริบิวต์เฉพาะขององค์ประกอบที่คุณต้องการเข้าถึง

วากยสัมพันธ์

css=tag[attribute=value]

• tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
• [ และ ] = วงเล็บเหลี่ยมที่ครอบแอตทริบิวต์และค่าที่เกี่ยวข้อง
• แอตทริบิวต์ = แอตทริบิวต์ที่จะใช้ เลือกแอตทริบิวต์ที่ไม่ซ้ำกันสำหรับองค์ประกอบนั้น เช่น ชื่อหรือรหัส
• value = ค่าที่สอดคล้องกันของแอตทริบิวต์ที่เลือก

ขั้นตอน 1) ไปที่ Mercury หน้าลงทะเบียนทัวร์ https://demo.guru99.com/test/newtours/register.php และตรวจสอบช่องข้อความ "นามสกุล" สังเกตแท็ก HTML ("input") และแอตทริบิวต์ name ("lastName")

ขั้นตอน 2) In Selenium IDE ให้ป้อน “css=input[ชื่อ=นามสกุล]"ใน Target กล่องและคลิกค้นหา Selenium IDE ค้นหาช่องนามสกุลได้สำเร็จ

เมื่อองค์ประกอบหลายรายการใช้แท็ก HTML และแอตทริบิวต์เดียวกัน ระบบจะรู้จักเฉพาะองค์ประกอบแรกเท่านั้น พฤติกรรมนี้เหมือนกับการค้นหาองค์ประกอบที่มีแท็กและคลาสเดียวกันทุกประการ

แท็ก คลาส และแอตทริบิวต์ – ตัวเลือก CSS

วากยสัมพันธ์

css=tag.class[attribute=value]

• tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
• . = เครื่องหมายจุด ซึ่งต้องมีอยู่เสมอเมื่อใช้ตัวเลือก CSS ที่มีคลาส
• class = คลาสขององค์ประกอบที่กำลังเข้าถึง
• [ และ ] = วงเล็บเหลี่ยมที่ครอบคุณลักษณะเฉพาะและค่าที่เกี่ยวข้อง
• แอตทริบิวต์ = แอตทริบิวต์ที่จะใช้ เลือกแอตทริบิวต์ที่ไม่ซ้ำกันสำหรับองค์ประกอบนั้น เช่น ชื่อหรือรหัส
• value = ค่าที่สอดคล้องกันของแอตทริบิวต์ที่เลือก

ขั้นตอน 1) เปิดหน้าสาธิต https://demo.guru99.com/test/facebook.html และตรวจสอบช่องป้อนข้อมูล “อีเมลหรือหมายเลขโทรศัพท์” และ “รหัสผ่าน” สังเกตแท็ก HTML คลาส และแอตทริบิวต์ของช่องเหล่านั้น ตัวอย่างนี้ใช้ “ดัชนีแท็บ" คุณลักษณะ.

ขั้นตอน 2) เข้าถึงช่องข้อความ “อีเมลหรือเบอร์โทรศัพท์” ก่อน โดยใช้ค่า tabindex เป็น 1 จากนั้นป้อน “css=input.inputtext[tabindex=1]” เข้าไป Selenium IDE ของ Target กรอกแบบฟอร์มแล้วคลิกค้นหา ช่องอีเมลหรือหมายเลขโทรศัพท์จะถูกไฮไลต์

ขั้นตอน 3) หากต้องการกำหนดเป้าหมายไปที่ช่องป้อนรหัสผ่าน เพียงแค่แทนที่ค่า tabindex ป้อน “css=input.inputtext[tabindex=2]"ใน Target กล่องและคลิกค้นหา Selenium IDE ตรวจพบช่องป้อนรหัสผ่านเรียบร้อยแล้ว

ข้อความภายใน – ตัวเลือก CSS

โดยปกติแล้วป้ายกำกับ HTML มักไม่ได้รับแอตทริบิวต์ id, name หรือ class ดังนั้นเราจะเข้าถึงป้ายกำกับเหล่านั้นได้อย่างไร Seleniumคำตอบอยู่ที่เนื้อหาภายในของพวกเขา ข้อความภายในคือรูปแบบสตริงจริงที่ป้ายกำกับ HTML แสดงบนหน้าเว็บ

วากยสัมพันธ์

css=tag:contains("inner text")

• tag = แท็ก HTML ขององค์ประกอบที่กำลังเข้าถึง
• ข้อความภายใน = เนื้อหาข้อความที่มองเห็นได้ขององค์ประกอบนั้น

ขั้นตอน 1) ไปที่ Mercury หน้าแรกของทัวร์ https://demo.guru99.com/test/newtours/ และตรวจสอบป้ายกำกับ “รหัสผ่าน” สังเกตแท็ก HTML (“ฟอนต์” ในกรณีนี้) และสังเกตว่าองค์ประกอบนั้นไม่มีแอตทริบิวต์ class, id หรือ name

ขั้นตอน 2) ประเภท css=font:contains("รหัสผ่าน:") เข้าไป Selenium IDE ของ Target กล่องและคลิกค้นหา Selenium IDE จะค้นหาป้ายกำกับรหัสผ่านดังที่แสดงด้านล่าง

ขั้นตอน 3) คราวนี้ ให้แทนที่ข้อความด้านในด้วยคำว่า “บอสตัน” เพื่อให้ Target กลายเป็น “css=font:contains(“Boston”)“คลิกค้นหา ป้ายกำกับ “บอสตันถึงซานฟรานซิสโก” จะถูกไฮไลต์ แสดงให้เห็นว่า Selenium IDE สามารถค้นหาป้ายกำกับที่ยาวได้ แม้ว่าจะระบุเพียงคำแรกของข้อความภายในเท่านั้น

ตัวเลือก CSS เทียบกับ XPath ใน Selenium

ทั้ง CSS Selectors และ XPath ถูกใช้เพื่อระบุองค์ประกอบบนเว็บ Seleniumแต่ทั้งสองแบบมีจุดแข็งที่แตกต่างกัน ตารางด้านล่างนี้เปรียบเทียบกลยุทธ์การระบุตำแหน่งทั้งสองแบบในมิติสำคัญต่างๆ:

หลักเกณฑ์	ตัวเลือก CSS	XPath
ความเร็ว	เร็วกว่า เพราะทำงานบนเอนจิ้นดั้งเดิมของเบราว์เซอร์	ทำงานช้าลง โดยเฉพาะในเบราว์เซอร์รุ่นเก่า
ทิศทาง	ส่งต่อเท่านั้น (จากผู้ปกครองไปยังบุตรหลาน)	ส่งต่อและย้อนกลับ (จากเด็กไปยังผู้ปกครอง)
วากยสัมพันธ์	สั้นกว่าและคล้ายกับกฎ CSS	นิพจน์เส้นทางแบบลำดับชั้นที่ยาวขึ้น
การจับคู่ข้อความ	จำกัดเฉพาะคลาสเสมือน :contains() เท่านั้น	ฟังก์ชันข้อความที่แข็งแกร่ง () และประกอบด้วย ()
เหมาะสำหรับ	เลย์เอาต์แบบคงที่และเว็บแอปสมัยใหม่	การสำรวจ DOM ที่ซับซ้อนและตัวระบุตำแหน่งตามข้อความ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียนตัวเลือก CSS ใน Selenium

การเขียน CSS Selector ที่เชื่อถือได้นั้นไม่ใช่แค่การรู้ไวยากรณ์เท่านั้น แนวทางปฏิบัติต่อไปนี้จะช่วยให้ผู้ทดสอบสร้าง Selector ที่เสถียรและบำรุงรักษาได้ง่าย Selenium สคริปต์ที่ยังคงทำงานได้แม้มีการเปลี่ยนแปลง UI:

1. ชอบคุณลักษณะที่ไม่เหมือนใคร: ควรเลือกแอตทริบิวต์ id, data-test-id หรือ name ที่เพิ่มเข้ามาเพื่อใช้ในการทำงานอัตโนมัติโดยเฉพาะเสมอ แอตทริบิวต์เหล่านี้จะคงที่แม้ว่ารูปแบบการแสดงผลจะเปลี่ยนแปลงไปก็ตาม
2. หลีกเลี่ยงการใช้ตัวเลือกที่มีการซ้อนกันมากเกินไป: โซ่ยาว เช่น div > div > ul > li > a โค้ดจะเสียหายได้ง่ายเมื่อนักพัฒนาปรับโครงสร้างมาร์กอัปใหม่ ดังนั้นควรใช้ตัวเลือก (selector) ที่สั้นที่สุดเท่าที่จะเป็นไปได้
3. ควรใช้การจับคู่แบบบางส่วนอย่างชาญฉลาด: รูปแบบเช่น [class*="btn-primary"] ยอมให้มีการเปลี่ยนแปลงชื่อคลาสเล็กน้อยได้ แต่ก็อาจไปตรงกับองค์ประกอบที่ไม่ต้องการได้เช่นกัน
4. หลีกเลี่ยงการใช้ตัวระบุตำแหน่งแบบอิงตามดัชนี: ตัวเลือกเช่น nth-child(3) มีความเปราะบางเนื่องจากการเพิ่มองค์ประกอบพี่น้องจะทำให้ตำแหน่งทุกอย่างเปลี่ยนแปลงไป
5. ตรวจสอบความถูกต้องของตัวเลือกใน DevTools: ก่อนเรียกใช้ก Selenium ในสคริปต์ ให้วางตัวเลือก (selector) ลงในคอนโซล Chrome DevTools โดยใช้ document.querySelector() เพื่อยืนยันว่าได้ส่งคืนองค์ประกอบเพียงหนึ่งเดียวเท่านั้น
6. ผสมผสานคุณลักษณะต่างๆ เพื่อสร้างเอกลักษณ์เฉพาะตัว: เมื่อคลาสถูกใช้งานร่วมกันโดยองค์ประกอบหลายตัว ให้เพิ่มตัวกรองแอตทริบิวต์ เช่น input.form-control[name="email"] เพื่อระบุเป้าหมายให้ชัดเจน
7. บันทึกและนำกลับมาใช้ใหม่: รวมศูนย์ตัวเลือก (selectors) ไว้ในคลาส Page Object เพื่อให้การอัปเดตเพียงครั้งเดียวแก้ไขปัญหาการทดสอบทั้งหมดที่อ้างอิงถึงองค์ประกอบเดียวกัน

การปฏิบัติตามแนวทางเหล่านี้จะช่วยลดความไม่เสถียร ปรับปรุงความเร็วในการดำเนินการทดสอบ และทำให้ Selenium ห้องสวีทดูแลรักษาง่ายกว่าในระยะยาว

สรุป: คู่มืออ้างอิงฉบับย่อเกี่ยวกับไวยากรณ์ตัวเลือก CSS

ตารางด้านล่างนี้รวบรวมข้อมูลทั้งหมด Selenium รูปแบบตัวเลือก CSS ที่กล่าวถึงในคู่มือนี้:

วิธี	Target วากยสัมพันธ์	ตัวอย่าง
แท็กและรหัส	css=tag#id	css=อินพุต#อีเมล
แท็กและคลาส	css=tag.คลาส	css=input.inputtext
แท็กและแอตทริบิวต์	CSS=แท็ก[แอตทริบิวต์=ค่า]	css=input[ชื่อ=นามสกุล]
แท็ก คลาส และแอตทริบิวต์	css=tag.class[แอตทริบิวต์=ค่า]	css=input.inputtext[tabindex=1]
ข้อความภายใน	css=tag:contains(“text”)	css=font:contains("รหัสผ่าน:")

คำถามที่พบบ่อย