XPath ใน Selenium: บทช่วยสอน

XPath คืออะไร Selenium?

XPath ใน Selenium เป็นเส้นทาง XML ที่ใช้สำหรับการนำทางผ่านโครงสร้าง HTML ของหน้า เป็นไวยากรณ์หรือภาษาสำหรับการค้นหาองค์ประกอบใดๆ บนหน้าเว็บโดยใช้นิพจน์เส้นทาง XML XPath สามารถใช้กับทั้งเอกสาร HTML และ XML เพื่อค้นหาตำแหน่งขององค์ประกอบใด ๆ บนเว็บเพจโดยใช้โครงสร้าง HTML DOM

In Selenium ระบบอัตโนมัติ หากไม่พบองค์ประกอบโดยตัวระบุตำแหน่งทั่วไป เช่น id, class, name เป็นต้น จะใช้ XPath เพื่อค้นหาองค์ประกอบบนเว็บเพจ

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

ไวยากรณ์ XPath

XPath มีเส้นทางขององค์ประกอบที่ตั้งอยู่บนหน้าเว็บ ไวยากรณ์ XPath มาตรฐานสำหรับการสร้าง XPath คือ

Xpath=//tagname[@attribute='value']

รูปแบบพื้นฐานของ XPath ใน Selenium ได้รับการอธิบายไว้ด้านล่างพร้อมด้วยภาพหน้าจอ

• - เลือกโหนดปัจจุบัน
• ชื่อแท็ก: ชื่อแท็กของโหนดเฉพาะ
• @: เลือกแอตทริบิวต์
• แอตทริบิวต์: ชื่อแอตทริบิวต์ของโหนด
• ราคา: ค่าของแอตทริบิวต์

หากต้องการค้นหาองค์ประกอบบนหน้าเว็บอย่างถูกต้อง มีตัวระบุตำแหน่งหลายประเภท:

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

ประเภทของเส้นทาง X

XPath มีสองประเภท:

1) XPath สัมบูรณ์

2) XPath แบบสัมพัทธ์

XPath แบบสัมบูรณ์

มันเป็นวิธีโดยตรงในการค้นหาองค์ประกอบ แต่ข้อเสียของ XPath สัมบูรณ์ก็คือ หากมีการเปลี่ยนแปลงใดๆ ในเส้นทางขององค์ประกอบ XPath จะล้มเหลว

ลักษณะสำคัญของ XPath คือเริ่มต้นด้วยเครื่องหมายทับ (/) ซึ่งหมายความว่าคุณสามารถเลือกองค์ประกอบจากโหนดรากได้

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

หมายเหตุ: คุณสามารถฝึกฝนแบบฝึกหัด XPath ต่อไปนี้ได้ https://demo.guru99.com/test/selenium-xpath.html

คลิก Good Farm Animal Welfare Awards หากไม่สามารถเข้าถึงวิดีโอได้

XPath สัมบูรณ์:

/html/body/div[2]/div[1]/div/h4[1]/b/html[1]/body[1]/div[2]/div[1]/div[1]/h4[1]/b[1]

Xpath สัมพัทธ์

Xpath สัมพัทธ์ เริ่มต้นจากตรงกลางโครงสร้าง DOM ของ HTML โดยเริ่มต้นด้วยเครื่องหมายทับสองอัน (//) สามารถค้นหาองค์ประกอบต่างๆ ได้จากทุกที่บนเว็บเพจ หมายความว่าไม่จำเป็นต้องเขียน xpath ยาวๆ และคุณสามารถเริ่มต้นจากตรงกลางโครงสร้าง DOM ของ HTML ได้ ควรใช้ xpath ที่เกี่ยวข้องเสมอ เนื่องจากไม่ใช่เส้นทางที่สมบูรณ์จากองค์ประกอบราก

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

คลิก Good Farm Animal Welfare Awards หากไม่สามารถเข้าถึงวิดีโอได้

Relative XPath: //div[@class='featured-box cloumnsize1']//h4[1]//b[1]

แกน XPath คืออะไร?

XPath Axes ค้นหาโหนดต่างๆ ในเอกสาร XML จากโหนดบริบทปัจจุบัน XPath Axes เป็นวิธีการที่ใช้ค้นหาองค์ประกอบแบบไดนามิก ซึ่งไม่สามารถทำได้ด้วยวิธี XPath ปกติที่ไม่มี ID ชื่อคลาส ชื่อ ฯลฯ XPath ใน Selenium มีวิธีการหลายวิธี เช่น Contains, AND, Absolute XPath และ Relative XPath เพื่อระบุและค้นหาองค์ประกอบไดนามิกตามคุณลักษณะและเงื่อนไขต่างๆ

วิธีการใช้แกนใช้ในการค้นหาองค์ประกอบที่เปลี่ยนแปลงแบบไดนามิกเมื่อรีเฟรชหรือดำเนินการอื่น ๆ มีวิธีการใช้แกนไม่กี่วิธีที่ใช้กันทั่วไป Selenium ไดรเวอร์เว็บ เช่น ลูก พ่อแม่ บรรพบุรุษ พี่น้อง ก่อนหน้า ตนเอง ฯลฯ

วิธีเขียน XPath แบบไดนามิกใน Selenium ไดรเวอร์เว็บ

1) XPath พื้นฐาน

นิพจน์ XPath เลือกโหนดหรือรายการโหนดตามคุณลักษณะเช่น ID, ชื่อ, ชื่อคลาสฯลฯ จากเอกสาร XML ตามที่แสดงด้านล่าง

Xpath=//input[@name='uid']

นี่คือลิงค์เพื่อเข้าสู่หน้า https://demo.guru99.com/test/selenium-xpath.html

นิพจน์ xpath พื้นฐานเพิ่มเติมบางส่วน:

Xpath=//input[@type='text']
Xpath=//label[@id='message23']
Xpath=//input[@value='RESET']
Xpath=//*[@class='barone']
Xpath=//a[@href='https://demo.guru99.com/']
Xpath=//img[@src='//guru99.com/images/home/java.png']

2) ประกอบด้วย()

ประกอบด้วย() เป็นวิธีการที่ใช้ในนิพจน์ XPath ใช้เมื่อค่าของแอตทริบิวต์ใดๆ เปลี่ยนแปลงแบบไดนามิก เช่น ข้อมูลการเข้าสู่ระบบ

คุณลักษณะบรรจุมีความสามารถในการค้นหาองค์ประกอบที่มีข้อความบางส่วนดังแสดงในตัวอย่าง XPath ด้านล่าง

ในตัวอย่างนี้ เราพยายามระบุองค์ประกอบโดยใช้ค่าข้อความบางส่วนของแอตทริบิวต์ ในนิพจน์ XPath ด้านล่างมีการใช้ค่าบางส่วน 'sub' แทนปุ่มส่ง สังเกตได้ว่าพบธาตุสำเร็จแล้ว

ค่าที่สมบูรณ์ของ 'ประเภท' คือ 'ส่ง' แต่ใช้เพียงค่าบางส่วน 'ย่อย'

Xpath=//*[contains(@type,'sub')]

ค่าที่สมบูรณ์ของ 'ชื่อ' คือ 'btnLogin' แต่ใช้เพียงค่าบางส่วน 'btn'

Xpath=//*[contains(@name,'btn')]

ในนิพจน์ข้างต้น เราได้ใช้ 'ชื่อ' เป็นแอตทริบิวต์และ 'btn' เป็นค่าบางส่วนดังที่แสดงในภาพหน้าจอด้านล่าง ซึ่งจะพบ 2 องค์ประกอบ (เข้าสู่ระบบและรีเซ็ต) เนื่องจากแอตทริบิวต์ 'name' ขึ้นต้นด้วย 'btn'

ในทำนองเดียวกัน ในนิพจน์ด้านล่าง เราได้ถือว่า 'id' เป็นแอตทริบิวต์และ 'ข้อความ' เป็นค่าบางส่วน ซึ่งจะพบองค์ประกอบ 2 รายการ ('รหัสผู้ใช้ต้องไม่เว้นว่าง' และ 'รหัสผ่านต้องไม่เว้นว่าง') เนื่องจากแอตทริบิวต์ 'id' ขึ้นต้นด้วย 'ข้อความ'

Xpath=//*[contains(@id,'message')]

ในนิพจน์ด้านล่างนี้ เราได้ถือว่า "ข้อความ" ของลิงก์เป็นแอตทริบิวต์และ 'ที่นี่' เป็นค่าบางส่วนดังที่แสดงในภาพหน้าจอด้านล่าง ซึ่งจะพบลิงก์ ('ที่นี่') ขณะที่แสดงข้อความ 'ที่นี่'

Xpath=//*[contains(text(),'here')]
Xpath=//*[contains(@href,'guru99.com')]

3) การใช้หรือ & และ

ในนิพจน์ OR จะใช้เงื่อนไข 1 ประการ ไม่ว่าเงื่อนไขที่ 2 หรือเงื่อนไขที่ XNUMX ควรเป็นจริง นอกจากนี้ยังใช้ได้หากเงื่อนไขข้อใดข้อหนึ่งเป็นจริงหรืออาจทั้งสองอย่าง หมายความว่าเงื่อนไขใดเงื่อนไขหนึ่งควรเป็นจริงในการค้นหาองค์ประกอบ

ในนิพจน์ XPath ด้านล่าง จะระบุองค์ประกอบที่มีเงื่อนไขเดียวหรือทั้งสองเงื่อนไขเป็นจริง

Xpath=//*[@type='submit' or @name='btnReset']

เน้นทั้งองค์ประกอบเป็นองค์ประกอบ “LOGIN” ที่มีแอตทริบิวต์ 'type' และองค์ประกอบ “RESET” ที่มีแอตทริบิวต์ 'name'

ในนิพจน์ AND จะใช้สองเงื่อนไข ทั้งสองเงื่อนไขควรเป็นจริงเพื่อค้นหาองค์ประกอบ ไม่สามารถค้นหาองค์ประกอบได้หากมีเงื่อนไขข้อใดข้อหนึ่งเป็นเท็จ

Xpath=//input[@type='submit' and @name='btnLogin']

ในนิพจน์ด้านล่าง ให้เน้นองค์ประกอบ 'เข้าสู่ระบบ' เนื่องจากมีทั้งแอตทริบิวต์ 'ประเภท' และ 'ชื่อ'

4) Xpath เริ่มต้นด้วย

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

ตัวอย่างเช่น -: สมมติว่า ID ขององค์ประกอบเฉพาะเปลี่ยนแปลงแบบไดนามิกเช่น:

รหัส =” message12″

รหัส =” message345″

รหัส =” message8769″

และอื่นๆ..แต่ข้อความเริ่มต้นยังเหมือนเดิม ในกรณีนี้ เราใช้เริ่มต้นด้วยนิพจน์

ในนิพจน์ด้านล่าง มีสององค์ประกอบที่มี id เริ่มต้น "ข้อความ" (เช่น 'ID ผู้ใช้ต้องไม่เว้นว่าง' และ 'รหัสผ่านต้องไม่เว้นว่าง') ในตัวอย่างด้านล่าง XPath จะค้นหาองค์ประกอบที่มี 'ID' ขึ้นต้นด้วย 'ข้อความ'

Xpath=//label[starts-with(@id,'message')]

5) ฟังก์ชันข้อความ XPath ()

การขอ ฟังก์ชันข้อความ XPath() เป็นฟังก์ชันในตัวของ selenium webdriver ซึ่งใช้ค้นหาองค์ประกอบตามข้อความขององค์ประกอบบนเว็บ ฟังก์ชันนี้ช่วยค้นหาองค์ประกอบข้อความที่แน่นอนและค้นหาองค์ประกอบภายในชุดของโหนดข้อความ องค์ประกอบที่จะค้นหาควรอยู่ในรูปแบบสตริง

ในนิพจน์นี้ ด้วยฟังก์ชันข้อความ เราจะพบองค์ประกอบที่มีข้อความตรงกันทุกประการดังที่แสดงด้านล่าง ในกรณีของเรา เราจะพบองค์ประกอบที่มีข้อความ "UserID"

Xpath=//td[text()='UserID']

วิธีการแกน XPath

วิธีแกน XPath เหล่านี้ใช้เพื่อค้นหาองค์ประกอบที่ซับซ้อนหรือแบบไดนามิก ด้านล่างนี้เราจะดูวิธีการบางส่วนเหล่านี้

เพื่ออธิบายวิธี XPath axes เหล่านี้ เราจะใช้ไซต์สาธิตธนาคาร Guru99

1) การติดตาม

เลือกองค์ประกอบทั้งหมดในเอกสารของโหนดปัจจุบัน( ) [ช่องป้อน UserID เป็นโหนดปัจจุบัน] ตามที่แสดงในหน้าจอด้านล่าง

Xpath=//*[@type='text']//following::input

มีโหนด "อินพุต" 3 โหนดที่จับคู่โดยใช้แกน "ต่อไปนี้" - รหัสผ่าน ล็อกอิน และปุ่มรีเซ็ต หากคุณต้องการเน้นที่องค์ประกอบใดองค์ประกอบหนึ่งโดยเฉพาะ คุณสามารถใช้เมธอด XPath ด้านล่างนี้:

Xpath=//*[@type='text']//following::input[1]

คุณสามารถเปลี่ยน XPath ได้ตามความต้องการโดยใส่ [1],[2]…………และอื่นๆ

โดยใช้อินพุตเป็น '1' ภาพหน้าจอด้านล่างนี้จะค้นหาโหนดเฉพาะที่เป็นองค์ประกอบช่องป้อน 'รหัสผ่าน'

2) บรรพบุรุษ

แกนบรรพบุรุษจะเลือกองค์ประกอบบรรพบุรุษทั้งหมด (ปู่ย่าตายาย แม่ ฯลฯ) ของโหนดปัจจุบัน ดังที่แสดงในหน้าจอด้านล่าง

ในนิพจน์ด้านล่างนี้ เรากำลังค้นหาองค์ประกอบบรรพบุรุษของโหนดปัจจุบัน (“การทดสอบองค์กร” โหนด)

Xpath=//*[text()='Enterprise Testing']//ancestor::div

มีโหนด "div" 13 รายการที่ตรงกันโดยใช้แกน "บรรพบุรุษ" หากคุณต้องการมุ่งเน้นไปที่องค์ประกอบเฉพาะใดๆ คุณสามารถใช้ XPath ด้านล่าง โดยที่คุณเปลี่ยนหมายเลข 1, 2 ตามความต้องการของคุณ:

Xpath=//*[text()='Enterprise Testing']//ancestor::div[1]

คุณสามารถเปลี่ยน XPath ได้ตามความต้องการโดยใส่ [1], [2]…………และอื่นๆ

3) เด็ก

เลือกองค์ประกอบลูกทั้งหมดของโหนดปัจจุบัน (Java) ดังแสดงในหน้าจอด้านล่าง

Xpath=//*[@id='java_technologies']//child::li

มีโหนด "li" จำนวน 71 โหนดที่จับคู่โดยใช้แกน "ลูก" หากคุณต้องการเน้นไปที่องค์ประกอบใดองค์ประกอบหนึ่ง คุณสามารถใช้ xpath ด้านล่าง:

Xpath=//*[@id='java_technologies']//child::li[1]

คุณสามารถเปลี่ยน xpath ได้ตามความต้องการโดยใส่ [1],[2]…………และอื่นๆ

4) ก่อนหน้า

เลือกโหนดทั้งหมดที่มาก่อนโหนดปัจจุบันดังแสดงในหน้าจอด้านล่าง

ในนิพจน์ด้านล่าง จะระบุองค์ประกอบอินพุตทั้งหมดก่อนปุ่ม "เข้าสู่ระบบ" รหัสผู้ใช้ และ รหัสผ่าน องค์ประกอบอินพุต

Xpath=//*[@type='submit']//preceding::input

มี 2 ​​โหนด "อินพุต" ที่ตรงกันโดยใช้แกน "ก่อนหน้า" หากคุณต้องการเน้นไปที่องค์ประกอบใดองค์ประกอบหนึ่ง คุณสามารถใช้ XPath ด้านล่างได้:

Xpath=//*[@type='submit']//preceding::input[1]

คุณสามารถเปลี่ยน xpath ได้ตามความต้องการโดยใส่ [1],[2]…………และอื่นๆ

5) พี่น้องที่ตามหลัง

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

xpath=//*[@type='submit']//following-sibling::input

โหนดอินพุตหนึ่งที่จับคู่โดยใช้แกน “ติดตามพี่น้อง”

6) ผู้ปกครอง

เลือกพาเรนต์ของโหนดปัจจุบันตามที่แสดงในหน้าจอด้านล่าง

Xpath=//*[@id='rt-feature']//parent::div

มีโหนด "div" 65 รายการที่ตรงกันโดยใช้แกน "พาเรนต์" หากคุณต้องการเน้นไปที่องค์ประกอบใดองค์ประกอบหนึ่ง คุณสามารถใช้ XPath ด้านล่างได้:

Xpath=//*[@id='rt-feature']//parent::div[1]

คุณสามารถเปลี่ยน XPath ได้ตามความต้องการโดยใส่ [1],[2]…………และอื่นๆ

7) ตนเอง

เลือกโหนดปัจจุบันหรือ 'ตัวเอง' หมายความว่าจะระบุโหนดนั้นเองดังที่แสดงในหน้าจอด้านล่าง

การจับคู่โหนดเดียวโดยใช้แกน "ตนเอง" มันจะค้นหาเพียงโหนดเดียวเสมอเนื่องจากแสดงถึงองค์ประกอบของตนเอง

Xpath =//*[@type='password']//self::input

8) ลูกหลาน

เลือกลูกหลานของโหนดปัจจุบันตามที่แสดงในหน้าจอด้านล่าง

ในนิพจน์ด้านล่างนี้ จะระบุองค์ประกอบทั้งหมดที่สืบทอดมาจากองค์ประกอบปัจจุบัน (องค์ประกอบเฟรม 'Main bodyล้อมรอบ') ซึ่งหมายถึงอยู่ใต้โหนด (โหนดย่อย โหนดหลาน ฯลฯ)

Xpath=//*[@id='rt-feature']//descendant::a

มีโหนด "ลิงก์" 12 โหนดที่จับคู่โดยใช้แกน "ลูกหลาน" หากคุณต้องการเน้นไปที่องค์ประกอบใดองค์ประกอบหนึ่ง คุณสามารถใช้ XPath ด้านล่างได้:

Xpath=//*[@id='rt-feature']//descendant::a[1]

คุณสามารถเปลี่ยน XPath ได้ตามความต้องการโดยใส่ [1],[2]…………และอื่นๆ

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

สรุป

ตรวจสอบด้วย: - Selenium บทช่วยสอนสำหรับผู้เริ่มต้น: เรียนรู้ WebDriver ใน 7 วัน