เมื่อต้องไปสอนนักศึกษาเขียน Robot framework — Day 3 How to Web Element Locator (Part 2/2)

TaRa Wongsansee
Nextzy
Published in
4 min readApr 22, 2020

หลังจากที่เรารู้จัก Element Locator กันแล้วใน Past 1 ในส่วนของ Past 2 นั้นเรามาทำความรู้จักกับโครงสร้างของ XML document ที่ควรรู้ในการเขียน Xpath กันว่าเขียนได้กี่แบบบ้าง

ไปเริ่มกันเล้ยยยยยยยยยยยยย

บทความในชุดเดียวกัน

โครงสร้างของ XML document ที่ควรรู้ในการเขียน Xpath

ในงานของ automate test นั้นการเขียน Locator สามารถเขียนได้หลายรูปแบบ ซึ่งวันนี้เราจะมาแนะนำการเขียนแบบ Xpath โดยการค้นหา Locator แบบ Xpath นั้นเราจะหาตามโครงสร้างของ XML document ค่ะ และนอกจากนั้นเรายังสามารถเขียน Operators เข้าไปใน Xpath ได้อีกด้วย

Xpath แบ่งออกเป็น 2 แบบ คือ Absolute XPath และ Relative XPath โดยที่แต่ละแบบจะมีความแตกต่างกันดังนี้

Absolute Xpath

คือการเขียนแบบค้นหาตาม tag name ตรงๆ เช่น

html/body/div/div[2]/div/div/div/div/div[2]/form/table/tbody/tr[2]/td[1]/input[1]

Relative Xpath

สามารถเริ่มต้นค้นหา element ได้จากระบุ tag name, attribute name หรือ value ได้เลย โดยไม่ต้องเริ่มจาก tag แรกของ XML document เหมือนกับ Absolute XPath ซึ่งจะทำให้มีความแม่นยำมากกว่าและเข้าใจได้ง่ายกว่าอีกด้วย

ตัวอย่าง Syntax สำหรับ XPath

//tagname[@attribute='value']
  • // คือ เริ่มต้นค้นหาจาก tag name
  • @ คือ attribute name
  • / คือ ค้นหา child tag จาก current tag
  • * คือ ค้นหาจากทุก tag หรือ attribute
  • ..คือ ค้นหา parents tag of current tag

โดย Relative Xpath แบ่งย่อยได้อีก 6 แบบคือ

  • Basic Xpath
  • XPath แบบ Contains() function
  • XPath แบบ Start-with function
  • XPath by Text()
  • Select Last Xpath
  • Use And, Or in Xpath

Relative XPath — 1. Basic XPath

ตัวอย่าง Syntax สำหรับ XPath

//input[@name="email"]
  • // คือ เริ่มต้นค้นหา tag name ที่มีชื่อว่า input
  • @ คือ ค้นหา attribute name ชื่อ name และมี value = email

ตัวอย่างที่ 1

//*[@id="search-input"]/input[@id="search"]
  • * คือ ค้นหาทุก tag
  • / คือ ค้นหา child tag ที่มีชื่อว่า input

ตัวอย่างที่ 2

//*[@*="search-input"]/input[@id="search"]
  • * คือ ค้นหาทุก tag และ attribute ที่มี value = search-input

Relative XPath — 2. XPath แบบ Contains() function

สามารถเขียนให้ xpath ค้นหาด้วย partial value

ตัวอย่าง Syntax สำหรับ XPath

//tagename[contains(@attribute,'partial value')]

เวลานำไปใช้งานจริง

//*[contains(@value,"ค้นแล้วเจอ")]

Relative XPath — 3. XPath แบบ Start-with function

ตามชื่อเลย ค้นหา XPath ที่มี value เริ่มต้นด้วยค่าที่เราใส่เข้าไป

ตัวอย่าง Syntax สำหรับ XPath

//tagename[starts-with(@attribute,'start-with value')]

เวลานำไปใช้งานจริง

//*[starts-with(@name,"q")]

สามารถนำไปใช้ เมื่อเราต้องการ match หลาย element

Relative XPath — 4. Xpath by Text()

เป็นการค้นหา Element โดยค้นหาจาก Text

ตัวอย่าง Syntax สำหรับ XPath

//tagename[text()='Text Value']

เวลานำไปใช้งานจริง

//*[text()="อีเมลหรือโทรศัพท์"]

Relative XPath — 5.Select Last Xpath

เป็น Last() function จะค้นหา Element สุดท้ายที่ Match ได้จาก Xpath ที่เราระบุ

ตัวอย่าง Syntax สำหรับ XPath

//tagename[starts-with(@attribute,'value')][last()]

เวลานำไปใช้งานจริง

//input[starts-with(@id,'email')][last()]

มันจะ Match กับ Xpath ตัวสุดท้ายที่ซ้ำกัน

Relative XPath — 6. Use And, Or in Xpath

ตัวอย่าง Syntax สำหรับ XPath ในการใช้ Or

//tagename[@attribute1='value1' or @attribute2='value2']

เวลานำไปใช้งานจริง

//*[@id="email" or type="email"]

ตัวอย่าง Syntax สำหรับ XPath ในการใช้ And

//tagename[@attribute1='value1' and @attribute2='value2']

เวลานำไปใช้งานจริง

//*[@name="search_query" and @ placeholder="ค้นหา"]

ตัวอย่าง Syntax สำหรับ XPath ในการใช้ And และ Or ร่วมกัน

//tagename[@attribute1='value1' and (@attribute1='value1' or @attribute2='value2')]

เวลานำไปใช้งานจริง

//*[@ id="search" and (@ placeholder="ค้นหา" or @ name="search")]

เมื่อเรารู้เพียงเท่านี้ก็สามารถเอาไปประยุกต์ใช้ในการเขียน Automated test และเราสามารถเริ่มที่จะเขียน Test script โดยการใช้ Locator เพื่อทดสอบ Web site กันได้เลยจ้าาาาาาาาา และสำหรับการสอนวันที่ 3 นี้มีการสอนใช้ เจ้า robot framework กันด้วยแต่เราจบเพียงเท่านี้ก่อน เราจะไปสอนใช้ในบทความต่อไปกันนะคะ ฝากติดตามกันด้วยน้าาาาาาาาาาา ><

Reference

--

--