ตัวระบุตำแหน่งใน Selenium

ตัวระบุตำแหน่งคืออะไรใน Selenium?

ตัวระบุตำแหน่งคือคำสั่งที่สั่งการ Selenium IDE หรือ Selenium WebDriver จะชี้ไปยังองค์ประกอบ GUI ที่ถูกต้อง เช่น กล่องข้อความ ปุ่ม ลิงก์ หรือช่องทำเครื่องหมาย ซึ่งต้องดำเนินการบางอย่าง การระบุองค์ประกอบ GUI ที่ถูกต้องเป็นสิ่งจำเป็นสำหรับการสร้างสคริปต์อัตโนมัติที่เชื่อถือได้ อย่างไรก็ตาม การระบุที่ถูกต้องนั้นยากกว่าที่คิด บางครั้งคุณอาจโต้ตอบกับองค์ประกอบที่ไม่ถูกต้อง หรือไม่มีองค์ประกอบใดเลย เพื่อแก้ไขปัญหานี้ Selenium มีกลยุทธ์การระบุตำแหน่งที่หลากหลาย ซึ่งช่วยให้สามารถกำหนดเป้าหมายองค์ประกอบ GUI ได้อย่างแม่นยำ

แม้ว่าคำสั่งบางคำสั่ง เช่น คำสั่ง “เปิด” จะไม่ต้องการตัวระบุตำแหน่ง แต่คำสั่งส่วนใหญ่ต้องการตัวระบุตำแหน่ง Selenium คำสั่งต่างๆ ขึ้นอยู่กับตัวระบุตำแหน่งขององค์ประกอบ การเลือกตัวระบุตำแหน่งนั้นขึ้นอยู่กับแอปพลิเคชันที่กำลังทดสอบ (AUT) เป็นหลัก ในบทเรียนนี้ เราจะสลับใช้งานระหว่าง Facebook และ Mercury เว็บไซต์สาธิตทัวร์ (newtours.demoaut) จะแสดงข้อมูลตามตัวระบุตำแหน่งที่แต่ละแอปพลิเคชันรองรับ เช่นเดียวกับในเว็บไซต์ของคุณเอง การทดสอบ ในโปรเจ็กต์ คุณจะต้องเลือกตัวระบุตำแหน่งองค์ประกอบ Selenium WebDriver ทำงานโดยอิงตามโครงสร้างของแอปพลิเคชันของคุณ

ค้นหาด้วย ID

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

Target รูปแบบ: id=id ขององค์ประกอบ

ในตัวอย่างนี้ เราจะใช้เพจสาธิตของ Facebook เพราะว่า Mercury เว็บไซต์ของ Tours ไม่ได้ใช้แอตทริบิวต์ ID สำหรับช่องข้อมูลหลักในแบบฟอร์ม

ขั้นตอน 1) ใช้หน้าสาธิตนี้ https://demo.guru99.com/test/facebook.html สำหรับการทดสอบ ตรวจสอบช่องข้อความ “อีเมลหรือเบอร์โทรศัพท์” โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์ของคุณ (กด F12 ใน Chrome, Edge หรือ Google Play) Firefox) และจดบันทึกรหัสประจำตัว ในกรณีนี้ รหัสประจำตัวคือ “อีเมล”

ขั้นตอน 2) ยิง Selenium IDE และป้อน “id=email” ใน Target คลิกปุ่มค้นหา แล้วสังเกตว่าช่องข้อความ “อีเมลหรือหมายเลขโทรศัพท์” ถูกไฮไลต์เป็นสีเหลืองพร้อมขอบสีเขียว ซึ่งแสดงว่า Selenium IDE ระบุตำแหน่งขององค์ประกอบได้อย่างถูกต้องแล้ว

ค้นหาตามชื่อ

การค้นหาองค์ประกอบโดยใช้ชื่อนั้นคล้ายกับการค้นหาโดยใช้ ID ยกเว้นว่าเราใช้ “ชื่อ=” ใช้คำนำหน้าแทน วิธีนี้มีประโยชน์เมื่อองค์ประกอบไม่มี ID แต่มีแอตทริบิวต์ชื่อที่กำหนดไว้แล้ว

Target รูปแบบ: ชื่อ=ชื่อขององค์ประกอบ

สำหรับการสาธิตต่อไปนี้ เราจะใช้ Mercury ทัวร์ชมเว็บไซต์ เนื่องจากองค์ประกอบรูปแบบที่สำคัญทั้งหมดบนเว็บไซต์มีแอตทริบิวต์ชื่อกำกับอยู่

ขั้นตอน 1) นำทางไปยัง https://demo.guru99.com/test/newtours/ และใช้เครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์เพื่อตรวจสอบช่องข้อความ "ชื่อผู้ใช้" สังเกตแอตทริบิวต์ name ของช่องนั้น

ในที่นี้ ชื่อขององค์ประกอบคือ “userName”

ขั้นตอน 2) In Selenium IDE ให้ป้อน “name=userName” ในไฟล์ Target กล่องและคลิกปุ่มค้นหา Selenium IDE ควรค้นหาช่องข้อความชื่อผู้ใช้โดยการไฮไลต์ช่องนั้น

วิธีค้นหาองค์ประกอบตามชื่อโดยใช้ตัวกรอง

ตัวกรองมีประโยชน์เมื่อองค์ประกอบหลายอย่างมีแอตทริบิวต์ชื่อเดียวกัน ตัวกรองเป็นคุณลักษณะเพิ่มเติมที่ใช้เพื่อแยกแยะองค์ประกอบที่มีชื่อเดียวกัน หากไม่มีตัวกรอง Selenium โดยค่าเริ่มต้นจะเลือกเฉพาะองค์ประกอบที่ตรงกันตัวแรกเท่านั้น

Target รูปแบบ: name=name_of_the_element filter=value_of_filter

เรามาลองยกตัวอย่างกันดู

ขั้นตอน 1) เข้าสู่ระบบ Mercury ทัวร์.

ลงชื่อเข้าใช้ Mercury ทัวร์ที่ใช้คำว่า “tutorial” เป็นทั้งชื่อผู้ใช้และรหัสผ่าน หน้าค้นหาเที่ยวบินควรปรากฏขึ้นดังที่แสดงด้านล่าง

ขั้นตอน 2) ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบแอตทริบิวต์ VALUE

โปรดสังเกตว่าปุ่มตัวเลือกแบบไป-กลับ (Round Trip) และแบบเที่ยวเดียว (One Way) มีชื่อเดียวกันคือ “tripType” อย่างไรก็ตาม มีค่าแอตทริบิวต์ VALUE ที่แตกต่างกัน ดังนั้นเราจึงสามารถใช้ค่าแต่ละค่าเป็นตัวกรองได้

ขั้นตอน 3) คลิกที่แถวแรกในโปรแกรมแก้ไข

• เราจะเลือกปุ่มวิทยุแบบทางเดียว (One Way) ก่อน คลิกบรรทัดแรกใน Selenium โปรแกรมแก้ไข IDE
• ในช่องคำสั่ง ให้ป้อนคำสั่ง “click”
• ตัว Vortex Indicator ได้ถูกนำเสนอลงในนิตยสาร Target ในช่องป้อน “name=tripType value=oneway” ส่วน “value=oneway” จะทำหน้าที่เป็นตัวกรองของเรา

ขั้นตอน 4) คลิกปุ่มค้นหา

สังเกตว่า Selenium IDE จะไฮไลต์ปุ่มตัวเลือก "ทางเดียว" เป็นสีเขียว เพื่อยืนยันว่าได้เข้าถึงองค์ประกอบนั้นสำเร็จแล้วผ่านทางแอตทริบิวต์ VALUE

ขั้นตอน 5) เลือกตัวเลือกวิทยุ "ทางเดียว"

กดปุ่ม “X” บนแป้นพิมพ์เพื่อดำเนินการคำสั่งคลิก ตอนนี้ปุ่มตัวเลือก “ทางเดียว” (One Way) ถูกเลือกแล้ว

คุณสามารถดำเนินการแบบเดียวกันกับปุ่มตัวเลือก Round Trip ได้ โดยครั้งนี้ให้ใช้ “name=tripType value=roundtrip” เป็นเป้าหมาย

ค้นหาด้วยข้อความลิงก์

กลยุทธ์การระบุตำแหน่งนี้ใช้ได้เฉพาะกับข้อความไฮเปอร์ลิงก์เท่านั้น เราเข้าถึงลิงก์โดยการใส่ “link=" นำหน้าเป้าหมาย ตามด้วยข้อความไฮเปอร์ลิงก์ที่มองเห็นได้ วิธีนี้อ่านง่ายและใช้งานได้ดีสำหรับการทดสอบการนำทาง

Target รูปแบบ: ลิงค์=link_text

ในตัวอย่างต่อไปนี้ เราจะเข้าถึงลิงก์ “ลงทะเบียน” ที่พบได้บนหน้าจอ Mercury หน้าแรกของทัวร์

ขั้นตอน 1)

• ขั้นแรก โปรดตรวจสอบให้แน่ใจว่าคุณได้ออกจากระบบแล้ว Mercury ทัวร์.
• ไปที่ Mercury หน้าแรกของทัวร์

ขั้นตอน 2)

• ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบลิงก์ “ลงทะเบียน” ข้อความของลิงก์จะปรากฏอยู่ระหว่างแท็กแองเคอร์เปิดและปิด
• ในกรณีนี้ ข้อความลิงก์คือ “ลงทะเบียน” คัดลอกข้อความลิงก์นี้

ขั้นตอน 3) คัดลอกข้อความลิงก์แล้ววางลงในช่อง Selenium IDE Target กล่อง ให้ใส่คำนำหน้าด้วย “link="

ขั้นตอน 4) คลิกปุ่มค้นหา Selenium IDE จะไฮไลต์ลิงก์ REGISTER อย่างถูกต้อง

ขั้นตอน 5) หากต้องการตรวจสอบเพิ่มเติม ให้ป้อน “clickAndWait” ในกล่องคำสั่งและดำเนินการ Selenium IDE จะคลิกลิงก์ REGISTER สำเร็จ และจะนำคุณไปยังหน้าลงทะเบียนดังที่แสดงด้านล่าง

การค้นหาโดย DOM (Document Object Model)

การขอ โมเดลวัตถุเอกสาร (DOM)กล่าวโดยง่ายคือ เป็นการอธิบายโครงสร้างขององค์ประกอบ HTML ในรูปแบบของต้นไม้ที่ประกอบด้วยโหนดต่างๆ Selenium IDE สามารถนำทางโครงสร้างต้นไม้นี้เพื่อเข้าถึงองค์ประกอบหน้าเว็บได้ เมื่อใช้วิธีนี้ Target กล่องข้อความมักเริ่มต้นด้วย “dom=document…” โดยปกติแล้วจะละเว้นคำนำหน้า “dom=” เนื่องจาก Selenium IDE จะตีความค่าใดๆ ที่ขึ้นต้นด้วย “document” โดยอัตโนมัติว่าเป็นเส้นทาง DOM

มีสี่วิธีพื้นฐานในการค้นหาองค์ประกอบผ่าน DOM Selenium:

• รับ ElementById
• getElementsByName
• dom:name (ใช้กับองค์ประกอบภายในแบบฟอร์มที่มีชื่อเท่านั้น)
• ดอม:ดัชนี

ค้นหาโดย DOM – getElementById

ก่อนอื่นเรามาสำรวจเมธอด getElementById ของ DOM กันก่อน Seleniumเมธอดนี้จะส่งคืนองค์ประกอบเดียวโดยการจับคู่แอตริบิวต์ ID ขององค์ประกอบนั้น

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

document.getElementById("id of the element")

• รหัสขององค์ประกอบ = ค่าของแอตทริบิวต์ ID ขององค์ประกอบที่จะเข้าถึง ค่านี้ต้องอยู่ภายในเครื่องหมายอัญประกาศคู่เสมอ

ขั้นตอน 1) ใช้หน้าสาธิตนี้ https://demo.guru99.com/test/facebook.htmlไปที่หน้าต่างนั้นแล้วใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบช่องทำเครื่องหมาย “เข้าสู่ระบบค้างไว้” จดหมายเลขประจำตัวของช่องทำเครื่องหมายนั้นไว้

รหัสที่เราควรใช้คือ “persist_box”

ขั้นตอน 2) จุดเปิด Selenium IDE และใน Target ใส่คำสั่ง `document.getElementById(“persist_box”)` ในช่อง จากนั้นคลิก "ค้นหา" Selenium IDE จะค้นหาช่องทำเครื่องหมาย “เข้าสู่ระบบค้างไว้” แม้ว่าจะไม่สามารถไฮไลต์ส่วนภายในของช่องทำเครื่องหมายได้ แต่จะล้อมรอบองค์ประกอบนั้นด้วยเส้นขอบสีเขียวสดใส ดังแสดงในภาพด้านล่าง

ค้นหาโดย DOM – getElementsByName

เมธอด getElementById เข้าถึงองค์ประกอบได้ครั้งละหนึ่งรายการเท่านั้น คือองค์ประกอบที่มี ID ที่ระบุไว้ ส่วนเมธอด getElementsByName นั้นทำงานแตกต่างออกไป โดยจะส่งคืนอาร์เรย์ขององค์ประกอบที่มีชื่อเดียวกัน การเข้าถึงองค์ประกอบแต่ละรายการจะใช้ดัชนีตัวเลขที่เริ่มต้นจาก 0

	รับ ElementById ฟังก์ชันนี้จะส่งคืนองค์ประกอบเพียงหนึ่งรายการ โดยองค์ประกอบนั้นจะมี ID ที่ระบุไว้ภายในวงเล็บของ getElementById()
	getElementsByName ฟังก์ชันนี้จะส่งคืนชุดขององค์ประกอบที่มีชื่อเหมือนกัน โดยแต่ละองค์ประกอบจะมีดัชนีเป็นตัวเลขเริ่มต้นจาก 0 เหมือนกับอาร์เรย์ คุณสามารถเลือกองค์ประกอบเฉพาะได้โดยการวางดัชนีขององค์ประกอบนั้นไว้ภายในวงเล็บเหลี่ยมตามไวยากรณ์ด้านล่าง

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

document.getElementsByName("name")[index]

• name = ชื่อขององค์ประกอบตามที่กำหนดโดยแอตทริบิวต์ 'name'
• index = จำนวนเต็มที่ระบุองค์ประกอบภายในอาร์เรย์ของ getElementsByName ที่จะถูกนำมาใช้

ขั้นตอน 1) ไปที่ Mercury เข้าไปที่หน้าแรกของทัวร์และล็อกอินโดยใช้คำว่า “tutorial” เป็นชื่อผู้ใช้และรหัสผ่าน เบราว์เซอร์จะแสดงหน้าจอค้นหาเที่ยวบิน

ขั้นตอน 2) ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบปุ่มตัวเลือกสามปุ่มที่ด้านล่างของหน้า (ชั้นประหยัด ชั้นธุรกิจ และชั้นเฟิร์สคลาส) สังเกตว่าพวกมันมีชื่อเดียวกันคือ “servClass”

ขั้นตอน 3) ขั้นแรก ให้เราเข้าถึงปุ่มตัวเลือก “ชั้นประหยัด” จากปุ่มตัวเลือกทั้งสาม ปุ่มนี้ปรากฏเป็นอันดับแรก ดังนั้นดัชนีของมันจึงเป็น 0 Selenium ใน IDE ให้พิมพ์ document.getElementsByName(“servClass”)[0] แล้วคลิกปุ่มค้นหา Selenium IDE จะระบุตัวเลือกวิทยุสำหรับชั้นประหยัดได้อย่างถูกต้อง

ขั้นตอน 4) เปลี่ยนหมายเลขดัชนีเป็น 1 ดังนั้นของคุณ Target กลายเป็น document.getElementsByName(“servClass”)[1] คลิกปุ่มค้นหา และ Selenium IDE จะไฮไลต์ปุ่มตัวเลือก “Business class” ดังที่แสดงด้านล่าง

ค้นหาโดย DOM – dom:name

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

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

document.forms["name of the form"].elements["name of the element"]

• ชื่อของฟอร์ม = ค่าของแอตทริบิวต์ name ของแท็กฟอร์มที่ประกอบด้วยองค์ประกอบที่คุณต้องการเข้าถึง
• name of the element = ค่าของแอตทริบิวต์ name ขององค์ประกอบที่คุณต้องการเข้าถึง

ขั้นตอน 1) นำทางไปยัง Mercury หน้าแรกของทัวร์ https://demo.guru99.com/test/newtours/ และใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบช่องข้อความชื่อผู้ใช้ สังเกตว่าช่องข้อความนั้นอยู่ในฟอร์มที่มีชื่อว่า “home”

ขั้นตอน 2) In Selenium ใน IDE ให้พิมพ์ document.forms[“home”].elements[“userName”] แล้วคลิกปุ่มค้นหา Selenium IDE จะสามารถเข้าถึงองค์ประกอบนั้นได้สำเร็จ

ค้นหาโดย DOM – dom:index

วิธีการนี้ใช้ได้แม้ว่าองค์ประกอบนั้นจะไม่ได้อยู่ในฟอร์มที่มีชื่อ เพราะมันใช้ดัชนีของฟอร์มแทนชื่อของฟอร์ม ซึ่งมีประโยชน์สำหรับหน้าเว็บแบบเก่าหรือฟอร์มที่สร้างขึ้นโดยอัตโนมัติซึ่งไม่สามารถตั้งชื่อได้

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

document.forms[index of the form].elements[index of the element]

• ดัชนีของแบบฟอร์ม = หมายเลขดัชนี (เริ่มต้นที่ 0) ของแบบฟอร์มเมื่อเทียบกับหน้าทั้งหมด
• ดัชนีขององค์ประกอบ = หมายเลขดัชนี (เริ่มต้นที่ 0) ขององค์ประกอบนั้นเมื่อเทียบกับแบบฟอร์มที่บรรจุองค์ประกอบนั้นอยู่

เราจะเข้าถึงช่องข้อความ “หมายเลขโทรศัพท์” บน Mercury หน้าลงทะเบียนทัวร์ แบบฟอร์มในหน้านี้ไม่มีทั้งชื่อและรหัสประจำตัว จึงถือเป็นตัวอย่างที่ดี

ขั้นตอน 1) ไปที่ Mercury ไปที่หน้าลงทะเบียนทัวร์และตรวจสอบช่องข้อความหมายเลขโทรศัพท์ สังเกตว่าแบบฟอร์มโดยรอบไม่มีคุณลักษณะ ID หรือชื่อ

ขั้นตอน 2) ป้อน document.forms[0].elements[3] ใน Selenium IDE Target กล่องและคลิกปุ่มค้นหา Selenium IDE จะเข้าถึงช่องข้อความหมายเลขโทรศัพท์ได้อย่างถูกต้อง

ขั้นตอน 3) อีกทางเลือกหนึ่ง คุณสามารถใช้ชื่อขององค์ประกอบแทนดัชนีเพื่อให้ได้ผลลัพธ์เดียวกัน ป้อน document.forms[0].elements[“phone”] ใน Target ช่องข้อความหมายเลขโทรศัพท์จะยังคงถูกไฮไลต์อยู่

ค้นหาโดย XPath

XPath คือภาษาค้นหาที่ใช้ในการนำทางโหนด XML (Extensible Markup Language) เนื่องจาก HTML สามารถถือได้ว่าเป็นการนำ XML มาใช้ในรูปแบบหนึ่ง XPath นอกจากนี้ยังสามารถระบุตำแหน่งขององค์ประกอบ HTML ได้อีกด้วย นับเป็นหนึ่งในกลยุทธ์การระบุตำแหน่งที่มีประสิทธิภาพมากที่สุด Selenium.

• ความได้เปรียบ: มันสามารถเข้าถึงองค์ประกอบเกือบทุกชนิด รวมถึงองค์ประกอบที่ไม่มีแอตทริบิวต์คลาส ชื่อ หรือ ID ด้วย
• ข้อเสีย: เนื่องจากมีกฎและรูปแบบไวยากรณ์ที่หลากหลาย จึงเป็นกลยุทธ์การระบุตำแหน่งที่ซับซ้อนที่สุด

เครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์สมัยใหม่สามารถสร้างนิพจน์ XPath ได้โดยอัตโนมัติ ใน Chrome, Edge หรือ Firefoxคลิกขวาที่องค์ประกอบในแผง Elements แล้วเลือก Copy > Copy XPath ในตัวอย่างต่อไปนี้ เราจะเข้าถึงรูปภาพที่ไม่สามารถค้นหาได้โดยใช้วิธีการที่กล่าวถึงก่อนหน้านี้

ขั้นตอน 1) ไปที่ Mercury ไปที่หน้าแรกของเว็บไซต์และใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบสี่เหลี่ยมสีส้มทางด้านขวาของกล่อง "ลิงก์" สีเหลือง ดังแสดงในภาพด้านล่าง

ขั้นตอน 2) คลิกขวาที่โค้ด HTML ขององค์ประกอบนั้น แล้วเลือกตัวเลือก “คัดลอก XPath”

ขั้นตอน 3) In Selenium IDEพิมพ์เครื่องหมายทับเดี่ยว “/” ในช่อง Target ในช่องดังกล่าว ให้วาง XPath ที่คัดลอกไว้ในขั้นตอนก่อนหน้าลงไป รายการใน Target ตอนนี้กล่องควรเริ่มต้นด้วยเครื่องหมายทับสองอัน “//”

ขั้นตอน 4) คลิกปุ่มค้นหา Selenium IDE จะไฮไลต์กรอบสีส้ม ดังแสดงในภาพด้านล่าง

เหตุใดการเลือกผู้ให้บริการระบุตำแหน่งที่เหมาะสมจึงมีความสำคัญ

การเลือกกลยุทธ์การระบุตำแหน่งที่ถูกต้องเป็นหนึ่งในการตัดสินใจที่มีอิทธิพลมากที่สุด Selenium การใช้ระบบอัตโนมัติมีความสำคัญ เนื่องจากส่งผลโดยตรงต่อความเสถียรของสคริปต์ ความเร็วในการทำงาน และต้นทุนการบำรุงรักษาในระยะยาว ตัวระบุตำแหน่งที่เลือกไม่เหมาะสมอาจทำให้การทดสอบไม่เสถียร เกิดความล้มเหลวที่ผิดพลาด และต้องทำงานซ้ำบ่อยครั้งทุกครั้งที่ UI ของแอปพลิเคชันเปลี่ยนแปลง ลำดับความสำคัญที่วิศวกรระบบอัตโนมัติที่มีประสบการณ์แนะนำคือ ID เป็นอันดับแรก ตามด้วยชื่อ ตัวเลือก CSS ข้อความลิงก์ และสุดท้ายคือ XPath

ตัวระบุตำแหน่งแบบใช้ ID นั้นเร็วที่สุด เพราะการค้นหาของเบราว์เซอร์ได้รับการปรับให้เหมาะสมสำหรับตัวระบุที่ไม่ซ้ำกัน ตัวระบุตำแหน่งแบบใช้ชื่อก็มีประสิทธิภาพเกือบเท่ากันเมื่อชื่อนั้นไม่ซ้ำกัน ตัวเลือก CSS และ XPath ให้ความยืดหยุ่น แต่มีแนวโน้มที่จะช้ากว่าและเปราะบางกว่าเมื่อนักพัฒนาปรับโครงสร้าง DOM ใหม่ ข้อความลิงก์นั้นยอดเยี่ยมสำหรับลิงก์นำทาง แต่มีข้อจำกัดในการนำกลับมาใช้ใหม่

ระบบอัตโนมัติที่เสถียรยังขึ้นอยู่กับการทำงานร่วมกับนักพัฒนาด้วย เมื่อผู้ทดสอบร้องขอ ID หรือแอตทริบิวต์ข้อมูลที่สอดคล้องกันและมีความหมายระหว่างการตรวจสอบโค้ด ความทนทานของตัวระบุตำแหน่งก็จะดีขึ้นอย่างมาก หลีกเลี่ยงการใช้ ID ที่สร้างขึ้นโดยอัตโนมัติ (เช่นที่สร้างโดยเฟรมเวิร์ก) เพราะอาจเปลี่ยนแปลงได้ระหว่างการสร้างแต่ละครั้ง การให้ความสำคัญกับตัวระบุตำแหน่งที่อ่านง่ายและขับเคลื่อนด้วยเจตนา จะช่วยให้ทีมสามารถรักษาชุดทดสอบให้สามารถบำรุงรักษาได้และลดภาระทางเทคนิคเมื่อแอปพลิเคชันพัฒนาขึ้น

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

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

1. ควรใช้รหัสที่ไม่ซ้ำกัน: ควรตรวจสอบแอตทริบิวต์ ID ก่อนเสมอ ID มีไว้เพื่อให้ค่าไม่ซ้ำกันภายในหน้าเว็บ และเป็นตัวเลือกที่มีประสิทธิภาพสูงสุด
2. ใช้แอตทริบิวต์ชื่อเชิงความหมายและแอตทริบิวต์ข้อมูล-*: สนับสนุนให้นักพัฒนาเพิ่มแอตทริบิวต์การทดสอบที่เสถียร เช่น data-testid หรือ data-qa แอตทริบิวต์เหล่านี้จะคงที่แม้ว่าคลาส CSS จะเปลี่ยนแปลงไปก็ตาม
3. หลีกเลี่ยงการใช้ XPath แบบสัมบูรณ์: เส้นทางสัมบูรณ์ เช่น /html/body/div[2]/div[3]/span มักจะพังได้ง่าย ควรใช้ XPath expression แบบสัมพัทธ์ที่มีแอตทริบิวต์ เช่น //input[@name='userName']
4. ผสานคุณสมบัติต่างๆ เพื่อเพิ่มความแม่นยำ: เมื่อแอตทริบิวต์เดียวไม่ซ้ำกัน ให้รวมแอตทริบิวต์หลายรายการเข้าด้วยกัน (ตัวอย่างเช่น //button[@type='submit' และ @name='login']) เพื่อกำหนดเป้าหมายไปยังองค์ประกอบที่ถูกต้อง
5. ใช้ข้อความอย่างชาญฉลาด: ตัวระบุตำแหน่งที่อาศัยข้อความที่มองเห็นได้อาจใช้งานไม่ได้เมื่อมีการแปลภาษาต่างๆ ควรใช้ตัวระบุตำแหน่งที่อาศัยข้อความเฉพาะเมื่อเนื้อหาคงที่และเป็นภาษาเดียวเท่านั้น
6. รวมศูนย์ระบุตำแหน่ง: จัดเก็บตัวระบุตำแหน่งไว้ในคลาส Page Object Model (POM) เพื่อให้สามารถอัปเดตได้ในที่เดียว แทนที่จะต้องกระจายไปในสคริปต์ทดสอบหลายๆ ตัว
7. ตรวจสอบความถูกต้องในเครื่องมือสำหรับนักพัฒนา: ก่อนเพิ่มตัวระบุตำแหน่งลงในสคริปต์ ให้ทดสอบในคอนโซลของเบราว์เซอร์โดยใช้ $x(“//xpath”) สำหรับ XPath หรือ document.querySelector สำหรับ CSS เพื่อยืนยันว่าส่งคืนองค์ประกอบเพียงหนึ่งรายการเท่านั้น
8. ควรหลีกเลี่ยงการใช้ตัวระบุตำแหน่งแบบอิงดัชนีหากเป็นไปได้: ตำแหน่งดัชนีเช่น [3] ขึ้นอยู่กับลำดับองค์ประกอบ แม้แต่การเปลี่ยนแปลงเค้าโครงเล็กน้อยก็อาจทำให้ดัชนีเลื่อนและทำให้สคริปต์เสียหายได้

ด้วยการนำแนวทางปฏิบัติเหล่านี้ไปใช้อย่างสม่ำเสมอ วิศวกรระบบอัตโนมัติจะสร้างชุดทดสอบที่ปรับขนาดได้สำหรับทีมต่างๆ และรองรับการอัปเดต UI บ่อยครั้งโดยต้องการการบำรุงรักษาเพียงเล็กน้อย

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