วิธีจัดการตารางเว็บใน Selenium ไดรเวอร์เว็บ

การอ่านตารางเว็บ HTML

มีหลายครั้งที่เราจำเป็นต้องเข้าถึงองค์ประกอบ (โดยปกติจะเป็นข้อความ) ที่อยู่ในตาราง HTML อย่างไรก็ตาม เป็นเรื่องยากมากที่นักออกแบบเว็บไซต์จะระบุแอตทริบิวต์ id หรือชื่อให้กับเซลล์บางเซลล์ในตาราง ดังนั้นเราจึงไม่สามารถใช้วิธีปกติ เช่น “By.id()”, “By.name()” หรือ “By.cssSelector()” ในกรณีนี้ ตัวเลือกที่น่าเชื่อถือที่สุดคือการเข้าถึงโดยใช้วิธี “By.xpath()”

วิธีจัดการตารางเว็บใน Selenium

พิจารณาโค้ด HTML ด้านล่างสำหรับจัดการตารางเว็บ Selenium.

เราจะใช้ XPath เพื่อรับข้อความภายในของเซลล์ที่มีข้อความ "เซลล์ที่สี่"

ขั้นตอนที่ 1 – ตั้งค่าองค์ประกอบหลัก (ตาราง)

ตัวระบุตำแหน่ง XPath ใน WebDriver มักจะเริ่มต้นด้วยเครื่องหมายทับสองอัน “//” จากนั้นตามด้วยองค์ประกอบหลัก- เนื่องจากเรากำลังติดต่อกับตารางเว็บค่ะ Seleniumองค์ประกอบหลักควรเป็น the เสมอ แท็ก ส่วนแรกของเรา Selenium ดังนั้นตัวระบุตาราง XPath ควรเริ่มต้นด้วย “//table”

ขั้นตอนที่ 2 - เพิ่มองค์ประกอบลูก

องค์ประกอบที่อยู่ด้านล่างทันที เป็น เราก็เลยพูดแบบนั้นได้ คือ “ลูก” ของ - และนอกจากนี้ยังมี, คือ “ผู้ปกครอง” ของ - องค์ประกอบย่อยทั้งหมดใน XPath จะถูกวางไว้ทางด้านขวาขององค์ประกอบหลัก โดยคั่นด้วยเครื่องหมายทับ “/” หนึ่งอันเหมือนโค้ดที่แสดงด้านล่าง

ขั้นตอนที่ 3 - เพิ่มภาคแสดง

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

อีกสิ่งหนึ่งที่เราสามารถสรุปได้ก็คือทั้งสอง องค์ประกอบเป็นพี่น้องกัน พี่น้องหมายถึงองค์ประกอบลูกที่มีผู้ปกครองคนเดียวกัน.

เพื่อไปถึง เราต้องการเข้าถึง (อันที่มีข้อความ "เซลล์ที่สี่") เราต้องเข้าถึงก่อน ที่สอง และไม่ใช่คนแรก ถ้าเราเขียนว่า “//table/tbody/tr” เราก็จะเข้าถึงอันแรก แท็ก

แล้วเราจะเข้าถึงอันที่สองได้อย่างไร แล้ว? คำตอบคือการใช้ ภาคแสดง.

เพรดิเคตคือตัวเลขหรือแอตทริบิวต์ HTML ที่อยู่ภายในวงเล็บเหลี่ยมคู่หนึ่ง “[ ]” ซึ่งใช้แยกแยะองค์ประกอบย่อยจากองค์ประกอบที่เกี่ยวข้อง- ตั้งแต่วันที่ เราต้องเข้าถึงอันที่สอง เราจะใช้ "[2]" เป็นภาคแสดง

หากเราจะไม่ใช้ภาคแสดงใด ๆ XPath จะเข้าถึงพี่น้องคนแรก ดังนั้นเราจึงสามารถเข้าไปก่อนได้ โดยใช้รหัส XPath อันใดอันหนึ่งเหล่านี้

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

องค์ประกอบถัดไปที่เราต้องเข้าถึงคือองค์ประกอบที่สอง - เมื่อใช้หลักการที่เราได้เรียนรู้จากขั้นตอนที่ 2 และ 3 เราจะสรุปโค้ด XPath ของเราให้เหมือนกับที่แสดงด้านล่าง

ตอนนี้เรามีตัวระบุตำแหน่ง XPath ที่ถูกต้องแล้ว เราก็สามารถเข้าถึงเซลล์ที่เราต้องการและรับข้อความภายในโดยใช้โค้ดด้านล่าง จะถือว่าคุณได้บันทึกโค้ด HTML ด้านบนเป็น "newhtml.html" ภายในไดรฟ์ C ของคุณ

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/write-xpath-table.html";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(
		By.xpath("//table/tbody/tr[2]/td[2]")).getText(); 	
        System.out.println(innerText); 
	driver.quit();
	}
}

การเข้าถึงตารางที่ซ้อนกัน

หลักการเดียวกันที่กล่าวถึงข้างต้นนำไปใช้กับตารางที่ซ้อนกัน ตารางที่ซ้อนกันคือตารางที่อยู่ภายในตารางอื่น- ตัวอย่างแสดงไว้ด้านล่าง

หากต้องการเข้าถึงเซลล์ที่มีข้อความ "4-5-6" โดยใช้ "//parent/child" และแนวคิดของคำทำนายจากหัวข้อก่อนหน้า เราควรสามารถสร้างโค้ด XPath ด้านล่างนี้ได้

รหัส WebDriver ด้านล่างควรจะสามารถดึงข้อความภายในของเซลล์ที่เรากำลังเข้าถึงได้

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/accessing-nested-table.html";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(
		By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText(); 		
        System.out.println(innerText); 
	driver.quit();
}

ผลลัพธ์ด้านล่างยืนยันว่าเข้าถึงตารางด้านในได้สำเร็จ

การใช้แอตทริบิวต์เป็นภาคแสดง

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

ในตัวอย่างด้านล่าง เซลล์ “นิวยอร์กถึงชิคาโก” จะอยู่ลึกเข้าไป Mercury โค้ด HTML ของหน้าแรกของทัวร์

ในกรณีนี้ เราสามารถใช้แอตทริบิวต์เฉพาะของตาราง (width=”270″) เป็นเพรดิเคตได้ แอ็ตทริบิวต์ถูกใช้เป็นเพรดิเคตโดยนำหน้าด้วยสัญลักษณ์ @- ในตัวอย่างข้างต้น เซลล์ "นิวยอร์กไปชิคาโก" จะอยู่ในเซลล์แรก ของที่สี่ ดังนั้น XPath ของเราจึงควรเป็นดังที่แสดงด้านล่าง

โปรดจำไว้ว่าเมื่อเราใส่รหัส XPath เข้าไป Javaเราควรใช้เครื่องหมาย escape เครื่องหมายทับย้อนกลับ “\” สำหรับเครื่องหมายคำพูดคู่ทั้งสองด้านของ “270” เพื่อให้อาร์กิวเมนต์ของสตริงของ By.xpath() จะไม่สิ้นสุดก่อนเวลาอันควร

ตอนนี้เราพร้อมที่จะเข้าถึงเซลล์นั้นโดยใช้โค้ดด้านล่างแล้ว

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/newtours/";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(By
		.xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
		.getText(); 		
	System.out.println(innerText); 
	driver.quit();
}

ทางลัด: ใช้ Inspect Element เพื่อเข้าถึงตาราง Selenium

หากหมายเลขหรือคุณลักษณะขององค์ประกอบนั้นยากมากหรือเป็นไปไม่ได้ วิธีที่เร็วที่สุดในการสร้างโค้ด XPath คือการใช้ Inspect Element

ลองพิจารณาตัวอย่างด้านล่างจาก Mercury หน้าแรกของทัวร์

ขั้นตอนที่ 1

ใช้ Firebug เพื่อรับรหัส XPath

ขั้นตอนที่ 2

มองหาองค์ประกอบหลักของ "ตาราง" แรกและลบทุกอย่างทางด้านซ้ายของมัน

ขั้นตอนที่ 3

ใส่คำนำหน้าส่วนที่เหลือของโค้ดด้วยเครื่องหมายทับสองอัน “//” และคัดลอกไปยังโค้ด WebDriver ของคุณ

รหัส WebDriver ด้านล่างจะสามารถดึงข้อความภายในขององค์ประกอบที่เรากำลังเข้าถึงได้สำเร็จ

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/newtours/";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(By
		.xpath("//table/tbody/tr/td[2]"
		+ "//table/tbody/tr[4]/td/"
		+ "table/tbody/tr/td[2]/"
		+ "table/tbody/tr[2]/td[1]/"
		+ "table[2]/tbody/tr[3]/td[2]/font"))
		.getText(); 		
	System.out.println(innerText); 
	driver.quit();
}

สรุป

• By.xpath() มักใช้เพื่อเข้าถึงองค์ประกอบของ WebTable Selenium.
• หากองค์ประกอบถูกเขียนลึกลงไปในโค้ด HTML จนทำให้ตัวเลขที่ใช้สำหรับเพรดิเคตระบุได้ยากมาก เราสามารถใช้คุณลักษณะเฉพาะขององค์ประกอบนั้นแทนได้ Selenium รับองค์ประกอบตาราง
• แอ็ตทริบิวต์ถูกใช้เป็นเพรดิเคตโดยนำหน้าด้วยสัญลักษณ์ @
• ใช้ Inspect Element เพื่อเข้าถึง WebTable Selenium