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

Locators คืออะไร?

Locator เป็นคำสั่งที่บอก Selenium IDE ซึ่งองค์ประกอบ GUI (พูด Text Box, ปุ่ม, ตรวจสอบ Boxes เป็นต้น) ความต้องการในการดำเนินการ การระบุองค์ประกอบ GUI ที่ถูกต้องเป็นข้อกำหนดเบื้องต้นในการสร้างสคริปต์อัตโนมัติ แต่การระบุองค์ประกอบ GUI ที่ถูกต้องนั้นยากกว่าที่คิด บางครั้ง คุณอาจทำงานด้วยองค์ประกอบ GUI ที่ไม่ถูกต้องหรือไม่มีองค์ประกอบเลย! ดังนั้น Selenium จัดเตรียมตัวระบุจำนวนหนึ่งเพื่อค้นหาองค์ประกอบ GUI ได้อย่างแม่นยำ

มีคำสั่งต่างๆ ที่ไม่จำเป็นต้องมีตัวระบุตำแหน่ง (เช่น คำสั่ง “open”) อย่างไรก็ตาม ส่วนใหญ่จำเป็นต้องมีตัวระบุตำแหน่งองค์ประกอบอยู่ Selenium เว็บไดรเวอร์

ทางเลือกของตัวระบุตำแหน่งขึ้นอยู่กับแอปพลิเคชันของคุณที่อยู่ระหว่างการทดสอบเป็นส่วนใหญ่ในบทช่วยสอนนี้ เราจะสลับไปมาระหว่าง Facebook, new tours.demoaut ตามตัวระบุตำแหน่งที่แอปพลิเคชันเหล่านี้รองรับ ในทำนองเดียวกัน การทดสอบ โครงการ คุณจะต้องเลือกตัวระบุตำแหน่งองค์ประกอบที่ระบุไว้ข้างต้น Selenium webdriver ขึ้นอยู่กับการสนับสนุนแอปพลิเคชันของคุณ

ค้นหาด้วย ID

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

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

สำหรับตัวอย่างนี้ เราจะใช้ Facebook เป็นแอปทดสอบของเราเนื่องจาก Mercury ทัวร์ไม่ได้ใช้คุณลักษณะ ID

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

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

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

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

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

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

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

ที่นี่เราจะเห็นว่าชื่อขององค์ประกอบคือ “ชื่อผู้ใช้”

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

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

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

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

มาดูตัวอย่างกัน -

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

เข้าสู่ระบบ Mercury ทัวร์ที่ใช้ "บทช่วยสอน" เป็นชื่อผู้ใช้และรหัสผ่าน ควรนำคุณไปที่หน้าตัวค้นหาเที่ยวบินที่แสดงด้านล่าง

ขั้นตอน 2) การใช้ firebug ให้ใช้แอตทริบิวต์ VALUE

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

ขั้นตอน 3) คลิกที่บรรทัดแรก

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

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

สังเกตว่า Selenium IDE สามารถไฮไลต์ปุ่มตัวเลือก One Way ด้วยสีเขียว ซึ่งหมายความว่าเราสามารถเข้าถึงองค์ประกอบได้สำเร็จโดยใช้แอตทริบิวต์ VALUE

ขั้นตอน 5) เลือกปุ่มตัวเลือกเที่ยวเดียว

กดปุ่ม "X" บนแป้นพิมพ์เพื่อดำเนินการคำสั่งคลิกนี้ โปรดสังเกตว่ามีการเลือกปุ่มตัวเลือกเที่ยวเดียว

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

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

ตัวระบุตำแหน่ง CSS ประเภทนี้ใน Selenium ใช้กับข้อความไฮเปอร์ลิงก์เท่านั้น เราเข้าถึงลิงก์โดยนำหน้าเป้าหมายของเราด้วย “link=” แล้วตามด้วยข้อความไฮเปอร์ลิงก์

Target รูปแบบ: link=link_text

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

ขั้นตอน 1)

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

ขั้นตอน 2)

• ใช้ Firebug ตรวจสอบลิงก์ "ลงทะเบียน" ข้อความลิงก์จะพบระหว่างและแท็ก
• ในกรณีนี้ ข้อความลิงก์ของเราคือ "ลงทะเบียน" คัดลอกข้อความลิงก์

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

ขั้นตอน 4) คลิกที่ปุ่มค้นหาและสังเกตว่า Selenium IDE สามารถเน้นลิงก์ REGISTER ได้อย่างถูกต้อง

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

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

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

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

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

ค้นหาโดย DOM – getElementById

ให้เรามุ่งเน้นไปที่วิธีแรก - โดยใช้วิธี getElementById ของ DOM Selenium- ไวยากรณ์จะเป็น:

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

document.getElementById("id of the element")

• id ขององค์ประกอบ = นี่คือค่าของแอตทริบิวต์ ID ขององค์ประกอบที่จะเข้าถึง ค่านี้ควรอยู่ในวงเล็บ (“”) เสมอ

ขั้นตอน 1) ใช้หน้าสาธิตนี้ https://demo.guru99.com/test/facebook.html ไปที่เว็บไซต์ดังกล่าวแล้วใช้ Firebug เพื่อตรวจสอบช่องกาเครื่องหมาย “Keep me logged in” จดบันทึก ID ของเว็บไซต์ดังกล่าวไว้

เราจะเห็นได้ว่า ID ที่เราควรใช้คือ “persist_box”

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

ค้นหาโดย DOM – getElementsByName

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

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

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

document.getElementsByName(“name“)[index]

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

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

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

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

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

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

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

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

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

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

ขั้นตอน 1) นำทางไปยัง Mercury หน้าแรกของทัวร์ https://demo.guru99.com/test/newtours/ และใช้ Firebug เพื่อตรวจสอบกล่องข้อความชื่อผู้ใช้ สังเกตว่ากล่องข้อความนี้อยู่ในฟอร์มที่มีชื่อว่า “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 หน้าลงทะเบียนทัวร์ แบบฟอร์มในหน้านี้ไม่มีแอตทริบิวต์ชื่อและ ID ดังนั้นนี่จะเป็นตัวอย่างที่ดี

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

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

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

ค้นหาโดย XPath

XPath คือภาษาที่ใช้ในการค้นหาโหนด XML (Extensible Markup Language) เนื่องจาก HTML สามารถถือเป็นการนำ XML มาใช้ เราจึงสามารถใช้ได้เช่นกัน XPath ในการค้นหาองค์ประกอบ HTML

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

โชคดีที่ Firebug สามารถสร้าง XPath ได้โดยอัตโนมัติ Selenium ตัวระบุตำแหน่ง ในตัวอย่างต่อไปนี้ เราจะเข้าถึงรูปภาพที่ไม่สามารถเข้าถึงได้ผ่านวิธีการที่เราได้กล่าวถึงก่อนหน้านี้

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

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

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

ขั้นตอน 4) คลิกที่ปุ่มค้นหา Selenium IDE ควรสามารถไฮไลท์กล่องสีส้มได้ดังแสดงด้านล่างนี้