XPath ประกอบด้วย: ข้อความ การติดตามพี่น้องและบรรพบุรุษใน Selenium

🚀 สรุปอย่างชาญฉลาด

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

  • ใช้ contains() เพื่อค้นหาองค์ประกอบไดนามิกที่มีข้อความบางส่วน ช่วยเพิ่มความทนทานต่อการเปลี่ยนแปลงข้อความ
  • สมัครสมาชิก following-sibling และ ancestor เพื่อข้ามลำดับชั้นขององค์ประกอบอย่างมีประสิทธิภาพและแยกโหนดที่เกี่ยวข้อง
  • รวมฟังก์ชันกับตัวดำเนินการเชิงตรรกะ (AND, OR) เพื่อการกำหนดเป้าหมายองค์ประกอบที่ละเอียดและแม่นยำ
  • ใช้ประโยชน์จากแกน XPath (ก่อนหน้า, สืบเนื่อง) เพื่อนำทางต้นไม้ DOM ที่ซับซ้อนอย่างเป็นระบบ
  • รวมนิพจน์เหล่านี้ใน Selenium สคริปต์สำหรับการทดสอบเว็บอัตโนมัติที่สามารถบำรุงรักษาได้ ไดนามิก และยืดหยุ่น

XPath ประกอบด้วย

XPath ประกอบด้วยอะไร?

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

ตัวอย่าง – มีข้อความ

ที่นี่เรากำลังค้นหาจุดยึดที่มีข้อความว่า 'SAP เอ็ม'

"//h4/a[contains(text(),'SAP M')]"

XPath ประกอบด้วย

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

ถ้าจะเรียบง่าย XPath หากไม่สามารถค้นหาองค์ประกอบเว็บที่ซับซ้อนสำหรับสคริปต์ทดสอบของเราได้ เราจำเป็นต้องใช้ฟังก์ชันจากไลบรารี XPath 1.0 ด้วยการผสมผสานฟังก์ชันเหล่านี้ เราสามารถสร้าง XPath ที่เฉพาะเจาะจงยิ่งขึ้นได้

👉 สมัครเรียนสดฟรี Selenium โครงการทดสอบ

ติดตามพี่น้องใน XPath

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

พี่น้องในตัวอย่าง XPath:
ที่นี่ บนพื้นฐานขององค์ประกอบพี่น้องของ 'a' เราพบ 'h4'

"//div[@class='canvas- graph']//a[@href='/accounting.html'][i[@class='icon-usd']]/following-sibling::h4"

ติดตามพี่น้องใน XPath

บรรพบุรุษ:ในการค้นหาองค์ประกอบตามองค์ประกอบหลัก เราสามารถใช้แอตทริบิวต์บรรพบุรุษของ XPath ได้

ติดตามพี่น้องใน XPath

มาทำความเข้าใจฟังก์ชันทั้ง 3 นี้โดยใช้ตัวอย่างกัน

ขั้นตอนการทดสอบ:

หมายเหตุ นับตั้งแต่วันที่สร้างบทช่วยสอน หน้าแรกของ Guru99 ได้รับการอัปเดต ดังนั้นให้ใช้เว็บไซต์สาธิตแทนเพื่อทำการทดสอบ

  1. ไปที่ https://demo.guru99.com/test/guru99home/
  2. ในส่วน 'หลักสูตรยอดนิยมบางส่วนของเรา' ให้ค้นหาองค์ประกอบเว็บทั้งหมดที่เป็นพี่น้องขององค์ประกอบเว็บที่มีข้อความว่า 'SELENIUM'
  3. เราจะค้นหาองค์ประกอบโดยใช้ฟังก์ชัน XPath text contains, ancestor และ sibling

ติดตามพี่น้องใน XPath

การใช้ประกอบด้วยข้อความและ XPath Sibling

import java.time.Duration;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.testng.annotations.Test;

// If you prefer WebDriverManager (optional):
// import io.github.bonigarcia.wdm.WebDriverManager;

public class SiblingAndParentInXpath_Chrome {
    @Test
    public void testSiblingAndParentInXpath() {

        // === Option A: Use local ChromeDriver binary path ===
        // Update this path to your chromedriver location:
        System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");

        // === Option B: Use WebDriverManager (uncomment next line and remove Option A lines) ===
        // WebDriverManager.chromedriver().setup();

        ChromeOptions options = new ChromeOptions();
        // Add any flags you need, e.g. headless:
        // options.addArguments("--headless=new");

        WebDriver driver = new ChromeDriver(options);
        try {

            driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
            driver.manage().window().maximize();
            driver.get("https://demo.guru99.com/test/guru99home/");

            // Find all siblings (divs) next to the 'SELENIUM' tile within
            // the "A few of our most popular courses" section.
            // Steps encoded in XPath:
            // 1) Locate the H2 that contains the section title
            // 2) Move to its parent DIV
            // 3) Inside it, locate the link with text 'SELENIUM'
            // 4) From the SELENIUM tile's parent DIV, get following sibling tiles

            List<WebElement> dateBox = driver.findElements(By.xpath(
                "//h2[contains(., 'A few of our most popular courses')]/parent::div" +
                "//a[normalize-space(.)='SELENIUM']/parent::div" +
                "/following-sibling::div[contains(@class,'rt-grid-2')]"
            ));

            // Print the text of each sibling element
            for (WebElement el : dateBox) {
                System.out.println(el.getText());
            }

        } finally {
            driver.quit();
        }
    }
}

ผลลัพธ์จะเป็นดังนี้:

การใช้ประกอบด้วยข้อความและ XPath Sibling

บรรพบุรุษ XPath ใน Selenium

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

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

ที่นี่แบบสอบถาม xpath ของเราจะเป็นเช่นนั้น

"//div[.//a[text()='SELENIUM']]/ancestor::div[@class='rt-grid-2 rt-omega']/following-sibling::div"

กรอกรหัส

import java.time.Duration;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.testng.annotations.Test;

public class AncestorInXpath_Chrome {

@Test

    public void testAncestorInXpath() {

        // Set path to your ChromeDriver executable
        System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");

        ChromeOptions options = new ChromeOptions();
        WebDriver driver = new ChromeDriver(options);

        try {

            driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
            driver.manage().window().maximize();
            driver.get("https://demo.guru99.com/test/guru99home/");

            // Search all elements in 'Popular course' section 
            // using the ancestor of the 'SELENIUM' link

            List <WebElement> dateBox = driver.findElements(
                By.xpath("//div[.//a[text()='SELENIUM']]/ancestor::div[@class='rt-grid-2 rt-omega']/following-sibling::div")
            );

            // Print all sibling elements of the 'SELENIUM' tile

            for (WebElement element : dateBox) {
                System.out.println(element.getText());
            }

        } finally {
            driver.quit();
        }
    }
}

ผลลัพธ์จะมีลักษณะดังนี้-

กรอกรหัส

การใช้ AND และ OR

โดยการใช้ AND และ OR คุณสามารถกำหนดเงื่อนไข 2 ประการในนิพจน์ XPath ของเราได้

  • ในกรณีของ AND เงื่อนไขทั้ง 2 จะต้องเป็นจริง จากนั้นจึงจะค้นหาองค์ประกอบได้
  • ในกรณีของ OR เงื่อนไขใดเงื่อนไขหนึ่งจาก 2 เงื่อนไขจะต้องเป็นจริง จากนั้นจึงจะค้นหาองค์ประกอบได้

ที่นี่แบบสอบถาม XPath ของเราจะเป็นแบบนี้

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

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

การใช้ AND และ OR

ขั้นตอนการทดสอบ:

  1. ไปที่ https://demo.guru99.com/v1/
  2. ในส่วนนี้เราจะใช้ไซต์สาธิตข้างต้นเพื่อค้นหาองค์ประกอบที่มีฟังก์ชันต่างๆ ของ XPath

คุณจะพบองค์ประกอบที่ใช้ AND และ OR พาเรนต์ เริ่มต้นด้วย และแกน XPath

และหรือตัวอย่าง

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class AND_OR {
	public static void main(String[] args) {
		WebDriver driver;
		WebElement w,x;
		System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");
		 driver= new ChromeDriver();
 		 
         // Launch the application
     	 driver.get("https://www.guru99.com/");
     	 
     	//Search element using OR in the xpath
     	 w=driver.findElement(By.xpath("//*[@type='submit' OR @name='btnReset']"));
      	
     	 //Print the text of the element
			System.out.println(w.getText());
			
		//Search element using AND in the xpath
			x=driver.findElement(By.xpath("//input[@type='submit' and @name='btnLogin']"));	
			 
		//Print the text of the searched element
			System.out.println(x.getText());
			 
	//Close the browser
     driver.quit();
	}

}

XPath ผู้ปกครองใน Selenium

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

ที่นี่แบบสอบถาม XPath ของเราจะเป็นแบบนี้

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

XPath ผู้ปกครองใน Selenium

XPath โดยใช้ผู้ปกครอง

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;


public class Parent {
	public static void main(String[] args) {
		WebDriver driver;
		WebElement w;
		
		System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");
		 driver= new ChromeDriver();
 		 
         // Launch the application
     	 driver.get("https://www.guru99.com/");
     	 
     	 //Search the element by using PARENT
     	 w=driver.findElement(By.xpath("//*[@id='rt-feature']//parent::div"));
      	
		//Print the text of the searched element
     	 System.out.println(w.getText());
	 
	//Close the browser
     driver.quit();
	}
}

เริ่มต้นด้วย

เมื่อใช้ฟังก์ชัน Starts-with คุณสามารถค้นหาองค์ประกอบที่มีแอตทริบิวต์ที่เปลี่ยนแปลงแบบไดนามิกเมื่อรีเฟรชหรือการดำเนินการอื่นๆ เช่น คลิก ส่ง ฯลฯ

ที่นี่แบบสอบถาม XPath ของเราจะเป็นเช่นนั้น

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

เริ่มต้นด้วย

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;


public class StartsWith {
	public static void main(String[] args) {
		WebDriver driver;
		WebElement w;
		
		System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");
		 driver= new ChromeDriver();
 		 
         // Launch the application
     	 driver.get("https://www.guru99.com/");
     	 
     	 //Search the element by using starts-with
     	 w=driver.findElement(By.xpath("//label[starts-with(@id,'message')]"));
     	
     	 //Print the text of the searched element
     	System.out.println(w.getText());
     	 
     	//Close the browser
	        driver.quit();
	}
}

ขวาน Xpath

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

ดังต่อไปนี้: ฟังก์ชั่นนี้จะส่งคืนองค์ประกอบทันทีขององค์ประกอบนั้น ๆ

ที่นี่แบบสอบถาม XPath ของเราจะเป็นเช่นนั้น

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

XPath ใช้สิ่งต่อไปนี้
XPath ใช้สิ่งต่อไปนี้
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;


public class Following {
	public static void main(String[] args) {
		WebDriver driver;
		WebElement w;
		
		System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");
		 driver= new ChromeDriver();
 		 
         // Launch the application
     	 driver.get("https://www.guru99.com/");
     	 
     	 //Search the element by using Following method
     	 w=driver.findElement(By.xpath("//*[@type='text']//following::input"));
      	
		//Print the text of the searched element
     	 System.out.println(w.getText());
	 
	//Close the browser
     driver.quit();
	}
}

ก่อนหน้า: ฟังก์ชันนี้จะส่งคืนองค์ประกอบก่อนหน้าขององค์ประกอบนั้น ๆ

ที่นี่แบบสอบถาม XPath ของเราจะเป็นเช่นนั้น

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

XPath โดยใช้ก่อนหน้า

XPath โดยใช้ก่อนหน้า
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;


public class Preceding {
	public static void main(String[] args) {
		
		WebDriver driver;
		WebElement w;
		
		System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");
		 driver= new ChromeDriver();
 		 
         // Launch the application
     	 driver.get("https://www.guru99.com/");
     	 
     	 //Search the element by using preceding method
     	 w=driver.findElement(By.xpath("//*[@type='submit']//preceding::input"));
      	
		//Print the searched element
     	 System.out.println(w.getText());
	 
	//Close the browser
     driver.quit();

	}
}

d) ลูกหลาน: ฟังก์ชันนี้จะส่งคืนองค์ประกอบสืบทอดขององค์ประกอบนั้น ๆ

ที่นี่แบบสอบถาม XPath ของเราจะเป็นเช่นนั้น

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

XPath โดยใช้ Descendant

XPath โดยใช้ Descendant
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;


public class Descendant {
	public static void main(String[] args) {
		WebDriver driver;
		WebElement w;
		System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromedriver.exe");
		 driver= new ChromeDriver();
 		 
         // Launch the application
     	 driver.get("https://www.guru99.com/");
     	 
     	 //Search the element by using descendant method
     	 w=driver.findElement(By.xpath("//*[@id='rt-feature']//descendant::a"));
      	
		//Print the searched element
     	 System.out.println(w.getText());
	 
	//Close the browser
     driver.quit();
	}
}

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

ใน XPath คำสั่ง /* จะเลือกองค์ประกอบระดับรากทั้งหมดของเอกสาร XML หรือ HTML หมายความว่า "เลือกองค์ประกอบใดๆ ที่อยู่ใต้โหนดรากโดยตรง" ตัวอย่างเช่น ในเอกสาร HTML คำสั่ง /* จะจับคู่ เนื่องจากมันเป็นองค์ประกอบระดับบนสุดที่อยู่ใต้ราก

ฟังก์ชัน contains() ใน XPath ช่วยค้นหาองค์ประกอบที่มีแอตทริบิวต์หรือข้อความตรงกับค่าที่กำหนดเพียงบางส่วน ฟังก์ชันนี้มีประโยชน์อย่างยิ่งเมื่อสตริงที่แน่นอนนั้นไม่สามารถคาดเดาได้หรือเป็นแบบไดนามิก ตัวอย่างเช่น //div[contains(@class,'menu')] ตรงกับใด ๆ ซึ่งมีคำว่า “เมนู” รวมอยู่ด้วย

ในการค้นหาองค์ประกอบโดยอิงจากการจับคู่บางส่วนภายในแอตทริบิวต์คลาส ให้ใช้ฟังก์ชัน contains() ตัวอย่างเช่น //button[contains(@class,'submit')] กำหนดเป้าหมายไปที่คลาสใดก็ได้ ที่มีชื่อคลาสที่มีคำว่า "submit" เช่น "submit-btn" หรือ "form-submit" เป็นวิธีที่ยืดหยุ่นในการจัดการชื่อคลาสแบบไดนามิก

สรุปโพสต์นี้ด้วย: