XPath với Selenium trong WPF

Dẫn nhập

Trong bài trước, Kteam đã giới thiệu đến bạn WEBELEMENT TRONG SELENIUM.

Ở bài này, chúng ta sẽ tìm hiểu khái niệm XPath với Selenium trong WPF.

Nội dung

Để đọc hiểu bài này tốt nhất bạn cần:

• Cài đặt sẵn VISUAL STUDIO 2015 hoặc 2017 community
• Xem qua bài TỔNG QUAN VỀ SELENIUM.
• Có kiến thức về C# CƠ BẢN, LẬP TRÌNH OOP trong C#, và LẬP TRÌNH WPF.
• Có kiến thức HTML cơ bản.
• Có kiến thức cơ bản về JavaScript.

Bạn và Kteam sẽ cùng tìm hiểu những nội dung sau đây

• XPath trong Selenium là gì?
• CssSelector trong Selenium

Xpath trong Selenium là gì?

Ở các bài trước chúng ta đã có thể lấy ra các Element trong Selenium một cách dễ dàng bằng phương thức find. Nhưng vẫn có hạn chế đó là có Element không có Id, classname không lấy được, không có tagname…

Vậy để lấy Element đó chúng ta làm sao? Có một thủ thuật đó là dùng JavaScript. Nhưng ta lại muốn lấy đích thị nó ra để dùng. Lúc này XPath ra tay.

Thật ra XPath cũng không khác gì Id hay classname. Chỉ là XPath có thể giúp ta xác định một Element thông qua trật tự của các thuộc tính.

Chúng ta đều biết các thẻ trong HTML đều có sự liên quan đến nhau như thẻ này bên trong thẻ kia, thẻ này là thẻ con thứ n của thẻ kia. Thẻ này ngay sau thẻ kia….

Lợi dụng tính chất đó ta hoàn toàn có thể xác định chính xác một thẻ dựa vào trật tự duy nhất đó. Đó chính là XPath.

XPath có nhiều kiểu cấu trúc. Nhưng đều theo thứ tự từ lớn đến nhỏ. Mình có 2 đoạn XPath cùng chỉ một đối tượng button Bắt đầu học tại website Howkteam.com như sau:

• XPath copy từ Firefox

/html/body/div[1]/div[2]/div[3]/div[4]/a[1]/input
1

• XPath copy từ Chrome

//*[@id="widthdisplay"]/a[1]/input
1

Hai đoạn này thật ra đều chỉ tới 1 đối tượng, chỉ là hai trường phái khác nhau. Với Firefox thì đúng là thứ tự các Element. Còn Chrome thì tìm thằng gần đó nhất có thể xác định rồi đi tiếp. Cái này mình không cần nói kỹ vì cách để có đoạn XPath này rất dễ.

• F12 tìm đến đoạn HTML bạn muốn hoặc nhấp phải chọn InspectElement hay Kiểm tra phần tử. Sau đó chọn Copy > Copy XPath. Tùy theo bạn dùng Firefox hay Chrome mà có các đoạn XPath ở các trường phái khác nhau.

Nói lan man mãi vậy XPath này sài thế nào? Thật sự rất đơn giản. Chỉ cần thay XPath bằng id hay classname là xong. Nhưng nên nhớ dùng hàm khác. Đó là: 

FindElementByXPath(“Xpath của bạn lấy được”);

Chỉ đơn giản như vậy thôi.

Code mẫu thử nghiệm

var button = firefoxDriver.FindElementByXPath("//*[@id=\"widthdisplay\"]/a[1]/input");

button.Click();
1
2
3

Lưu ý: Chuỗi XPath mình biến nó thành

//*[@id=\"widthdisplay\"]/a[1]/input

• Có dấu \ trước dấu “ vì nằm trong chuỗi.

Cùng xem kết quả nhé!

Trình duyệt tự tìm tới nút Bắt đầu học và nhấn vào nó. Quá tuyệt vời luôn!

Vậy là tới đây có vẻ như ta đã có thể bắt được mọi Element mà ta cần nhỉ?

CssSelector trong Selenium

XPath thì tuyệt vời quá! Nhưng đôi khi có những Element rõ ràng XPath đó nhưng lại không lấy được. Lúc này, có một phương pháp thay thế đó là CssSelector.

Cách thức lấy ra CssSelector như thế nào? Tương tự XPath thôi! Chỉ là thay vì tìm theo cấu trúc trật tự của HTML thì tìm theo các CSS của HTML. Thay vì copy XPath thì copy CssSelector. Còn cách dùng thì dùng hàm 

FindElementByCssPath(“Css Path bạn lấy ra được”);

Với button Bắt đầu học thì CssSelector mình lấy được là:

#widthdisplay > a:nth-child(1) > input:nth-child(1)
1

Code mẫu:

var button = firefoxDriver.FindElementByCssSelector("#widthdisplay > a:nth-child(1) > input:nth-child(1)");

button.Click();
1
2
3

Cùng chạy và xem kết quả nhé!

Quá đơn giản đúng không nào?

Kết luận

Bài viết này đã sơ lược cho các bạn cách dùng XPath và CssSelector trong Selenium rồi. Đánh bay mọi rào cản nhỉ?

Ở bài sau, Kteam sẽ nói về PROFILE TRONG SELENIUM.

Cảm ơn bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó!”

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học XPath với Selenium trong WPF dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK