XPath (Ngôn ngữ đường dẫn XML) là một ngôn ngữ truy vấn mạnh mẽ được sử dụng để điều hướng qua Mô hình Đối tượng Tài liệu (DOM) của các tài liệu HTML và XML. Đối với các nhà phát triển web, kiểm thử viên và kỹ sư tự động hóa, việc nắm vững XPath là rất cần thiết để xác định và tương tác chính xác với các phần tử trên các trang web. Cho dù bạn đang phát triển các bài kiểm tra tự động với Selenium, Playwright hay các khung kiểm thử khác, hoặc trích xuất dữ liệu từ các trang web, XPath cung cấp sự linh hoạt và độ chính xác cần thiết để điều hướng ngay cả những cấu trúc DOM phức tạp nhất.
Hướng dẫn toàn diện này sẽ đưa bạn qua mọi điều bạn cần biết về XPath, từ cú pháp cơ bản đến các kỹ thuật nâng cao, giúp bạn trở nên thành thạo trong việc tạo ra các biểu thức XPath mạnh mẽ và hiệu quả.
Trước khi đi sâu hơn vào XPath, hãy dành một chút thời gian để giới thiệu Apidog, lựa chọn thay thế tốt nhất cho Postman hiện có. Apidog kết hợp tài liệu API, thiết kế, gỡ lỗi, kiểm thử và giả lập trên một nền tảng thống nhất.
Không giống như Postman, Apidog cung cấp một giao diện trực quan hơn, các tính năng cộng tác nhóm tốt hơn và tích hợp liền mạch giữa thiết kế API và kiểm thử. Với khả năng kiểm thử mạnh mẽ của mình, Apidog giúp việc xác thực API trở nên dễ dàng hơn.
Nếu bạn đang làm việc với API và kiểm thử web, bộ công cụ toàn diện của Apidog có thể tiết kiệm đáng kể quy trình làm việc của bạn và cải thiện năng suất.
XPath là gì?
XPath là một ngôn ngữ truy vấn được thiết kế để chọn các nút trong các tài liệu XML. Vì HTML có thể được coi là một dạng chuyên biệt của XML, XPath cũng có thể được áp dụng hiệu quả cho các tài liệu HTML. Nó được giới thiệu lần đầu bởi Tổ chức W3C như một phần của đặc tả XSLT 1.0 và từ đó đã trở thành một công cụ thiết yếu cho tự động hóa web và trích xuất dữ liệu.
XPath phục vụ như một ngôn ngữ điều hướng, cho phép bạn đi qua cấu trúc phân cấp của tài liệu HTML bằng cách định nghĩa các đường dẫn tới các phần tử giống như cách bạn điều hướng qua các thư mục trong một hệ thống tệp. Điều làm cho XPath đặc biệt mạnh mẽ là khả năng của nó:
- Điều hướng qua phân cấp phần tử theo nhiều hướng khác nhau
- Lọc các phần tử dựa trên thuộc tính, nội dung hoặc vị trí
- Truy cập dễ dàng các phần tử cha, con và anh chị em
- Sử dụng các hàm tích hợp để thao tác dữ liệu và so sánh giá trị
Các Địa chỉ XPath trong Tự động hóa Web
Trong các khung tự động hóa web như Selenium WebDriver, các địa chỉ XPath đóng vai trò là phương pháp chính để xác định các phần tử trên một trang web. Trong khi các địa chỉ khác như bộ chọn CSS, ID hoặc tên lớp thường được ưa chuộng vì sự đơn giản và hiệu suất, XPath cung cấp sự linh hoạt vô song trong các kịch bản phức tạp.
Dưới đây là một số lợi ích chính của việc sử dụng XPath trong tự động hóa web:
- Linh hoạt: XPath có thể xác định các phần tử dựa trên nội dung văn bản, các mối quan hệ cha-con và các mối quan hệ anh chị em, điều mà các địa chỉ khác không dễ thực hiện.
- Chọn lựa dựa trên văn bản: XPath cho phép bạn tìm các phần tử chứa văn bản cụ thể, làm cho nó trở nên rất quý giá cho nội dung động.
- Các khả năng điều hướng: Bạn có thể đi lên (đến các phần tử cha), đi xuống (đến các phần tử con), hoặc sang bên (đến các phần tử anh chị em) trong cây DOM.
- Các phép toán logic: XPath hỗ trợ các toán tử logic như and, or và not, cho phép điều kiện chọn lựa phức tạp.
Các điều cần biết về XPath
Để sử dụng XPath hiệu quả, điều quan trọng là hiểu các thành phần cơ bản và cấu trúc của nó.
1. Cú pháp và Cấu trúc
Các biểu thức XPath được viết dưới dạng một chuỗi các bước, được phân tách bằng dấu gạch chéo (/), điều hướng qua cây nút của tài liệu. Mỗi bước bao gồm:
- Một lựa chọn nút (như tên phần tử hoặc ký tự đại diện)
- Các điều kiện tùy chọn (điều kiện được bao quanh bởi dấu ngoặc vuông)
- Các trục tùy chọn (chỉ định hướng mối quan hệ)
Cú pháp cơ bản theo mẫu này:
axisname::nodetest[predicate]
Trong đó:
axisnameđịnh nghĩa mối quan hệ cần sử dụng (con, cha, v.v.)nodetestxác định những nút nào được chọnpredicatelọc các nút đã chọn dựa trên các điều kiện
2. Các Trục Chính và Loại Nút
XPath cung cấp nhiều trục khác nhau để định nghĩa các mối quan hệ giữa các nút:
- con: Chọn tất cả các phần tử con của nút hiện tại
- cha: Chọn phần tử cha của nút hiện tại
- tổ tiên: Chọn tất cả các tổ tiên (cha, ông bà, v.v.)
- hậu duệ: Chọn tất cả các hậu duệ (con, cháu, v.v.)
- anh chị em: Chọn các anh chị em (các nút có cùng cha)
- tự: Chọn nút hiện tại
Các loại nút có thể được chọn bao gồm:
- phần tử: Các phần tử HTML/XML
- thuộc tính: Các thuộc tính của phần tử
- văn bản: Nội dung văn bản trong các phần tử
- chú thích: Các nút chú thích
- hướng dẫn xử lý: Các nút hướng dẫn xử lý
3. Các Hàm Thông Dụng
XPath bao gồm nhiều hàm nâng cao khả năng của nó:
- text(): Lấy nội dung văn bản của một phần tử
- contains(): Kiểm tra xem một chuỗi có chứa một chuỗi con cụ thể không
- starts-with(): Kiểm tra xem một chuỗi có bắt đầu bằng một chuỗi con cụ thể không
- concat(): Nối nhiều chuỗi lại với nhau
- substring(): Trích xuất một phần của một chuỗi
- count(): Đếm số nút trong một tập nút
- position(): Trả về vị trí của một nút trong một tập nút
- last(): Trả về vị trí của nút cuối cùng trong một tập nút
Các loại XPath
Có hai cách chính để xây dựng các biểu thức XPath: tuyệt đối và tương đối.
Biểu thức XPath Tuyệt đối
XPath tuyệt đối cung cấp đường dẫn hoàn chỉnh từ gốc của tài liệu đến phần tử mục tiêu. Nó bắt đầu bằng một dấu gạch chéo đơn (/) và bao gồm mọi phần tử trong phân cấp.
Ví dụ:
/html/body/div[2]/form/input[3]
Ưu điểm:
- Cung cấp một đường dẫn chính xác, duy nhất đến phần tử
- Hữu ích khi bạn cần nhắm đến một cụ thể của một phần tử
Nhược điểm:
- Vô cùng giòn và dễ vỡ khi cấu trúc trang thay đổi
- Dài và khó đọc
- Cần cập nhật nếu bất kỳ phần tử cha nào thay đổi
XPath Tương đối
XPath tương đối bắt đầu từ bất kỳ điểm nào trong tài liệu và sử dụng một dấu gạch chéo đôi (//) để chỉ ra rằng đường dẫn có thể bắt đầu từ bất kỳ đâu. Cách tiếp cận này linh hoạt hơn và dễ bị ảnh hưởng hơn với các thay đổi trong cấu trúc tài liệu.
Ví dụ:
//input[@id='email']
Ưu điểm:
- Chắc chắn hơn trước những thay đổi trong cấu trúc tài liệu
- Ngắn hơn và dễ đọc hơn
- Tập trung vào các thuộc tính hoặc đặc điểm duy nhất của phần tử
Nhược điểm:
- Có thể ít cụ thể hơn trong các tài liệu phức tạp
- Có thể khớp với nhiều phần tử nếu không được xây dựng cẩn thận
Cú pháp XPath
Hiểu các yếu tố cú pháp cốt lõi là rất quan trọng để xây dựng các biểu thức XPath hiệu quả:
Các yếu tố cú pháp cơ bản:
- / (Dấu gạch chéo đơn): Chọn từ nút gốc, đại diện cho một đường dẫn tuyệt đối
- // (Dấu gạch chéo đôi): Chọn các nút ở bất kỳ đâu trong tài liệu phù hợp với biểu thức
- . (Dấu chấm): Tham chiếu đến nút hiện tại
- .. (Dấu chấm đôi): Tham chiếu đến nút cha của nút hiện tại
- @ (Ký hiệu @): Chọn các thuộc tính
- [] (Dấu ngoặc vuông): Chứa các điều kiện (điều kiện)
- \(Ký tự đại diện): Ký tự đại diện khớp với bất kỳ nút phần tử nào
Các điều kiện
Các điều kiện là các điều kiện được bao quanh bởi dấu ngoặc vuông, lọc các lựa chọn nút:
//div[@class='container'] // Chọn các phần tử div với lớp 'container'
//button[text()='Gửi'] // Chọn các phần tử button với văn bản 'Gửi'
//li[position()=3] // Chọn phần tử li thứ ba
//input[@type='text' and @required] // Chọn các phần tử input cần thiết với kiểu là văn bản
Các bộ chọn XPath
Các bộ chọn XPath định nghĩa các tiêu chí để chọn các nút trong tài liệu. Dưới đây là một số mẫu bộ chọn thông dụng:
Bộ chọn phần tử:
//div // Chọn tất cả các phần tử div
//div/p // Chọn tất cả các phần tử p là con trực tiếp của div
//div//p // Chọn tất cả các phần tử p ở bất kỳ đâu bên trong div
Bộ chọn thuộc tính:
//*[@id='username'] // Chọn phần tử với id 'username'
//input[@name='password'] // Chọn input với tên 'password'
//a[@href] // Chọn tất cả các liên kết với thuộc tính href
//img[@src='logo.png'] // Chọn hình ảnh với src cụ thể
Bộ chọn vị trí:
//tr[1] // Chọn phần tử tr đầu tiên
//tr[last()] // Chọn phần tử tr cuối cùng
//tr[position()>1] // Chọn tất cả các phần tử tr ngoại trừ phần tử đầu tiên
//ul/li[position() mod 2 = 0] // Chọn các phần tử li ở vị trí chẵn
Bộ chọn nội dung văn bản:
//h1[text()='Chào mừng'] // Chọn h1 với văn bản chính xác 'Chào mừng'
//p[contains(text(),'quan trọng')] // Chọn p chứa từ 'quan trọng'
//label[starts-with(text(),'Người dùng')] // Chọn nhãn bắt đầu bằng 'Người dùng'
Biểu thức XPath
Các biểu thức XPath có thể dao động từ đơn giản đến phức tạp, tùy thuộc vào các phần tử bạn cần xác định. Dưới đây là một số ví dụ về các biểu thức ngày càng phức tạp:
Các biểu thức đơn giản:
//h1 // Tất cả các phần tử h1
//div[@class='header'] // Tất cả các phần tử div với lớp 'header'
//input[@type='submit'] // Tất cả các nút gửi đi
Các biểu thức trung gian:
//div[contains(@class,'product')]//span[@class='price'] // Các độ tuổi giá nằm trong các div sản phẩm
//table//tr[position() > 1] // Tất cả các hàng bảng ngoại trừ tiêu đề
//form[.//input[@required]] // Các biểu mẫu chứa các đầu vào cần thiết
Các biểu thức nâng cao:
//div[not(@class='hidden') and contains(@id,'section')] // Các phần có thể nhìn thấy với mẫu ID cụ thể
//ul[count(./li) > 5] // Các danh sách có hơn 5 mục
//a[contains(@href,'https') and not(contains(@class,'external'))] // Các liên kết HTTPS nội bộ
Các Trục XPath
Các trục xác định hướng điều hướng từ nút hiện tại. Hiểu biết về các trục cho phép chọn lựa phần tử tinh vi hơn:
Các trục con và hậu duệ:
child::div // Tương tự như ./div
descendant::p // Tương tự như .//p
Các trục cha và tổ tiên:
parent::div // phần tử div cha của nút hiện tại
ancestor::form // Bất kỳ tổ tiên biểu mẫu nào của nút hiện tại
ancestor-or-self::div // Bất kỳ tổ tiên div nào hoặc nút hiện tại nếu nó là div
Các trục anh chị em:
following-sibling::li // Tất cả các phần tử li anh chị em theo sau nút hiện tại
preceding-sibling::div // Tất cả các phần tử div anh chị em đứng trước nút hiện tại
Các trục hữu ích khác:
following::h2 // Tất cả các phần tử h2 xuất hiện sau nút hiện tại trong tài liệu
preceding::input // Tất cả các phần tử input xuất hiện trước nút hiện tại
self::p // Chọn nút hiện tại nếu nó là một đoạn văn
Các toán tử XPath
XPath hỗ trợ nhiều toán tử để tạo ra các điều kiện phức tạp:
Các toán tử so sánh:
- = : Bằng với
- != : Không bằng
- < : Nhỏ hơn
- > : Lớn hơn
- <= : Nhỏ hơn hoặc bằng
- >= : Lớn hơn hoặc bằng
Các toán tử logic:
- and : Logic AND
- or : Logic OR
- not() : Logic NOT
Các toán tử số học:
- + : Cộng
- : Trừ
- \: Nhân
- div : Chia
- mod : Lấy phần dư
Ví dụ:
//input[@value > 100] // Các đầu vào có giá trị lớn hơn 100
//div[@class='item' and @id] // Các div với lớp 'item' cũng có ID
//product[price > 50 and price < 100] // Các sản phẩm có giá trị giữa 50 và 100
//li[position() mod 2 = 1] // Các mục danh sách số lẻ
Các hàm XPath
XPath cung cấp nhiều hàm tích hợp để thao tác dữ liệu:
Các hàm chuỗi:
//a[contains(text(), 'Đăng ký')] // Các liên kết chứa văn bản "Đăng ký"
//label[starts-with(@for, 'user')] // Các nhãn có thuộc tính 'for' bắt đầu bằng 'user'
//p[string-length(text()) > 100] // Các đoạn văn có văn bản dài hơn 100 ký tự
//div[normalize-space(text())='Hello World'] // Các div có văn bản chính xác (bỏ qua khoảng trắng thừa)
Các hàm số:
//ul[count(li) > 5] // Các danh sách có hơn 5 mục
//div[round(number(@data-value)) = 42] // Các div có giá trị data-value làm tròn thành 42
//product[floor(price) = 99] // Các sản phẩm có giá trị price làm tròn xuống thành 99
Các hàm tập nút:
//tr[position() = last()] // Hàng cuối cùng của bảng
//div[count(child::*) = 0] // Các phần tử div trống (không có phần tử con)
//div[not(descendant::a)] // Các div không chứa bất kỳ liên kết nào
Bảng điều khiển Gỡ lỗi cho XPath
Một trong những cách hiệu quả nhất để phát triển và kiểm thử các biểu thức XPath là sử dụng công cụ phát triển của trình duyệt của bạn:
Trong Chrome:
- Nhấn F12 hoặc Ctrl+Shift+I để mở DevTools
- Chuyển đến tab Console
- Use
$x("your-xpath-here")để đánh giá các biểu thức XPath - Kết quả sẽ hiển thị dưới dạng một mảng các phần tử đã khớp
Trong Firefox:
- Nhấn F12 hoặc Ctrl+Shift+I để mở DevTools
- Chuyển đến tab Console
- Use
$x("your-xpath-here")để đánh giá các biểu thức XPath - Kết quả sẽ hiển thị dưới dạng một mảng các phần tử đã khớp
Trong Edge:
- Nhấn F12 hoặc Ctrl+Shift+I để mở DevTools
- Chuyển đến tab Console
- Use
$x("your-xpath-here")để đánh giá các biểu thức XPath - Kết quả sẽ hiển thị dưới dạng một mảng các phần tử đã khớp
Vòng phản hồi trực tiếp này cho phép bạn nhanh chóng tinh chỉnh các biểu thức XPath của mình cho đến khi chúng xác định chính xác các phần tử mục tiêu.
Mẹo và Thực hành tốt nhất
1. Tránh những cạm bẫy phổ biến
Giữ cho nó đơn giản: Các biểu thức XPath đơn giản hơn dễ duy trì hơn và ít bị phá vỡ khi cấu trúc trang thay đổi. Hãy đặt mục tiêu cho các biểu thức ngắn gọn trực tiếp nhắm đến phần tử của bạn bằng cách sử dụng các thuộc tính duy nhất.
Tránh các Đường dẫn Tuyệt đối: Các đường dẫn tuyệt đối vô cùng giòn. Nếu bất kỳ phần tử nào trong đường dẫn thay đổi, XPath sẽ bị phá vỡ. Sử dụng các đường dẫn tương đối tập trung vào các định danh duy nhất bất cứ khi nào có thể.
Hãy Cụ thể: Làm cho các biểu thức của bạn cụ thể như cần thiết, nhưng không hơn. Sự quá cụ thể có thể khiến các biểu thức trở nên giòn, trong khi không đủ cụ thể có thể khớp với các phần tử không mong muốn.
Sử dụng Các điều kiện Một cách Khôn ngoan: Các điều kiện rất mạnh mẽ trong việc lọc các phần tử, nhưng quá nhiều điều kiện lồng nhau có thể khiến các biểu thức khó đọc và duy trì.
Xem xét Tính Tương thích Đa Trình duyệt: Một số tính năng XPath có thể hoạt động khác nhau trên các trình duyệt. Kiểm tra các biểu thức của bạn trong tất cả các trình duyệt mục tiêu để đảm bảo tính nhất quán.
2. Tối ưu hóa cho Hiệu suất
Sử dụng Các bộ chọn Hiệu quả: Khi có thể, hãy sử dụng các ID hoặc các định danh duy nhất khác. Biểu thức //*[@id='username'] thường nhanh hơn so với các bộ chọn phân cấp phức tạp.
Giới hạn việc Sử dụng //: Toán tử gạch chéo đôi (//) tìm kiếm toàn bộ tài liệu, điều này có thể chậm. Khi bạn biết vị trí chung của một phần tử, hãy bắt đầu bằng một đường dẫn cụ thể hơn.
Lưu Các phần tử: Nếu bạn cần tương tác với cùng một phần tử nhiều lần, hãy lưu tham chiếu thay vì luôn xác định lại nó bằng XPath.
Giảm thiểu Các Gọi XPath: Mỗi lần đánh giá XPath đều tốn thời gian. Nhóm các hoạt động khi có thể để giảm số lần tìm kiếm.
Kiểm tra Hiệu suất: Nếu bạn thấy có sự chậm trễ trong các bài kiểm tra tự động của mình, hãy theo dõi chúng để xác định xem các truy vấn XPath có phải là nút cổ chai không. Xem xét các bộ chọn thay thế nếu cần.
3. Gỡ lỗi Hiệu quả
Sử dụng Công cụ Phát triển của Trình duyệt: Hầu hết các trình duyệt hiện đại cho phép bạn kiểm tra các biểu thức XPath trực tiếp trong bảng điều khiển. Điều này cung cấp phản hồi ngay lập tức về việc liệu biểu thức của bạn có hoạt động hay không.
Xuất Kết quả: Trong quá trình phát triển và gỡ lỗi, hãy ghi lại kết quả của các truy vấn XPath của bạn để xác minh rằng bạn đang chọn các phần tử mong muốn.
Bước Qua Mã: Sử dụng điểm dừng và gỡ lỗi từng bước trong khung kiểm thử của bạn để kiểm tra trạng thái của ứng dụng và các kết quả XPath.
Bình luận trong XPath của bạn: Thêm bình luận để giải thích các biểu thức XPath phức tạp, đặc biệt khi sử dụng các tính năng nâng cao hoặc giải quyết các trường hợp đặc biệt.
Thường xuyên Xem xét và Tái cấu trúc: Khi ứng dụng của bạn phát triển, hãy định kỳ xem xét các biểu thức XPath của bạn để đảm bảo rằng chúng vẫn đáng tin cậy và hiệu quả.
Bảng Cheat XPath
Dưới đây là một hướng dẫn tham khảo toàn diện cho các biểu thức XPath:
Cú pháp XPath cơ bản:
/ // Chọn từ nút gốc
// // Chọn các nút ở bất kỳ đâu trong tài liệu
. // Đại diện cho nút hiện tại
.. // Đại diện cho nút cha của nút hiện tại
Các bộ chọn:
element // Chọn tất cả các phần tử có tên đã cho
@attribute // Chọn giá trị của thuộc tính được chỉ định
* // Chọn tất cả các phần tử con
text() // Chọn văn bản trong một phần tử
[predicate] // Thêm một điều kiện để lọc các nút
Các điều kiện:
[name='value'] // Chọn các nút có giá trị thuộc tính đã chỉ định
[position()] // Chọn các nút dựa trên vị trí của chúng
[last()] // Chọn nút cuối cùng của một loại nhất định
[contains(@attribute, 'value')] // Chọn các nút có giá trị thuộc tính chứa 'value'
[not(predicate)] // Lật ngược một điều kiện
Các trục:
ancestor:: // Chọn tất cả các tổ tiên
ancestor-or-self:: // Chọn tổ tiên và nút hiện tại
child:: // Chọn tất cả các phần tử con
descendant:: // Chọn tất cả các hậu duệ
descendant-or-self:: // Chọn các hậu duệ và nút hiện tại
following:: // Chọn tất cả các nút theo sau
following-sibling:: // Chọn các anh chị em theo sau
parent:: // Chọn nút cha
preceding:: // Chọn tất cả các nút đứng trước
preceding-sibling:: // Chọn các anh chị em đứng trước
self:: // Chọn nút hiện tại
Các toán tử:
= // Bằng
!= // Không bằng
< // Nhỏ hơn
<= // Nhỏ hơn hoặc bằng
> // Lớn hơn
>= // Lớn hơn hoặc bằng
and // Logic AND
or // Logic OR
not // Logic NOT
Các hàm (Ví dụ):
name() // Trả về tên của nút hiện tại
count(nodes) // Trả về số lượng nút trong tập nút
concat(string1, string2) // Nối hai chuỗi lại với nhau
substring(string, start, length) // Trả về một chuỗi con
contains(string, substr) // Kiểm tra xem một chuỗi có chứa một chuỗi con hay không
normalize-space(string) // Loại bỏ khoảng trắng ở đầu/cuối và gộp các khoảng trắng lại
Ví dụ:
/bookstore/book // Chọn tất cả các phần tử book trong cửa hàng gốc
//title[text()='XPath'] // Chọn các phần tử title có văn bản 'XPath' ở bất kỳ đâu trong tài liệu
//*[@id='myId'] // Chọn các phần tử có thuộc tính id bằng 'myId'
/bookstore/book[position()=1] // Chọn phần tử book đầu tiên
//div[@class='highlight']//p // Chọn các phần tử p trong div có lớp 'highlight'
//a[contains(@href, 'example.com')] // Chọn các phần tử a có 'example.com' trong thuộc tính href
Các Kỹ thuật XPath Nâng cao
Làm việc với ID và Lớp Động
Các hệ thống web hiện đại thường tạo ra ID và lớp động thay đổi mỗi lần tải trang. Dưới đây là các kỹ thuật để xử lý những kịch bản này:
// Sử dụng khớp thuộc tính không đầy đủ
//div[contains(@id, 'main-content')]
//button[starts-with(@id, 'submit-')]
//input[ends-with(@id, '-input')] // Lưu ý: Đây là XPath 2.0 và không được hỗ trợ trong tất cả các trình duyệt
// Sử dụng mẫu tên lớp
//div[contains(@class, 'btn') and contains(@class, 'primary')]
Xử lý Iframe
Chọn các phần tử trong iframes cần xử lý đặc biệt:
// Đầu tiên, xác định iframe
//iframe[@id='content-frame']
// Sau đó, trong Selenium, bạn sẽ chuyển đến ngữ cảnh iframe trước khi sử dụng XPath để tìm các phần tử bên trong nó
// driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@id='content-frame']")));
// Sau khi chuyển đổi, bạn có thể sử dụng XPath bình thường trong ngữ cảnh iframe
//button[@id='submit']
Phát hiện Tính khả thi của phần tử
XPath không thể trực tiếp xác định xem một phần tử có hiển thị hay không, nhưng bạn có thể kiểm tra các thuộc tính thường chỉ ra tính khả thi:
// Các phần tử có display:none thường có kiểu nội tuyến
//div[not(contains(@style, 'display: none'))]
// Các phần tử có thể bị ẩn qua các lớp
//div[not(contains(@class, 'hidden'))]
// Các phần tử có thể có thuộc tính aria-hidden
//div[not(@aria-hidden='true')]
Xử lý Nhiều phần tử có cùng thuộc tính
Khi nhiều phần tử chia sẻ các thuộc tính hoặc tính chất giống nhau, bạn có thể sử dụng chỉ số hoặc các thuộc tính cụ thể hơn:
// Chọn nút thứ hai với lớp 'action'
(//button[@class='action'])[2]
// Chọn dựa trên nội dung văn bản và lớp
//button[@class='action' and contains(text(), 'Lưu')]
// Chọn dựa trên các phần tử xung quanh
//div[@class='card']//button[contains(text(), 'Xem chi tiết')]
XPath trong Các Khung Kiểm Thử Khác nhau
Selenium WebDriver
Selenium cung cấp hỗ trợ trực tiếp cho các địa chỉ XPath:
// Ví dụ Java
WebElement element = driver.findElement(By.xpath("//button[@id='submit']"));
# Ví dụ Python
element = driver.find_element(By.XPATH, "//button[@id='submit']")
// Ví dụ JavaScript
const element = await driver.findElement(By.xpath("//button[@id='submit']"));
Playwright
Playwright hỗ trợ các bộ chọn XPath, mặc dù bộ chọn CSS được khuyến nghị cho hiệu suất tốt hơn:
// Ví dụ JavaScript
const element = await page.locator('xpath=//button[@id="submit"]');
await element.click();
# Ví dụ Python
element = page.locator('xpath=//button[@id="submit"]')
element.click()
Cypress
Cypress hỗ trợ XPath với một plugin:
// Đầu tiên cài đặt plugin: npm install -D cypress-xpath
// Thêm vào cypress/support/e2e.js:
// require('cypress-xpath')
// Sau đó sử dụng trong các bài kiểm tra
cy.xpath('//button[@id="submit"]').click()
Ví dụ XPath Thực tế
Ví dụ về Trang web Thương mại Điện tử:
// Tìm tất cả các sản phẩm có giảm giá
//div[@class='product'][.//span[@class='discount']]
// Tìm sản phẩm có giá trong khoảng cụ thể
//div[@class='product'][.//span[@class='price' and number(translate(text(), '$', '')) < 100]]
// Tìm sản phẩm có đánh giá từ 4 sao trở lên
//div[@class='product'][.//div[@class='rating' and @data-stars >= 4]]
Ví dụ Kiểm Tra Biểu Mẫu:
// Tìm tất cả các trường bắt buộc
//input[@required]
// Tìm các trường có lỗi xác thực
//input[../span[@class='error']]
// Tìm các nhãn của các trường bắt buộc
//label[./following-sibling::input[@required] or ./input[@required]]
Ví dụ Dữ liệu Bảng:
// Tìm các hàng bảng có nội dung cụ thể
//table[@id='data']//tr[td[contains(text(), 'Đã hoàn tất')]]
// Tìm ô tiêu đề cho một cột cụ thể
//table//th[contains(text(), 'Trạng thái")]
// Tìm các ô trong cùng một cột như một tiêu đề cụ thể
//table//th[contains(text(), 'Trạng thái')]/following-sibling::td
Kết luận
Thành thạo XPath là một kỹ năng quan trọng đối với bất kỳ ai tham gia tự động hóa kiểm thử web hoặc trích xuất dữ liệu. Hướng dẫn này đã trang bị cho bạn một hiểu biết sâu sắc về các yếu tố thiết yếu của XPath, cú pháp, bộ chọn và thực hành tốt nhất. Bằng cách áp dụng các chiến lược này, bạn có thể tối ưu hóa quy trình kiểm thử tự động của mình, cải thiện độ tin cậy của bài kiểm tra và tự tin điều hướng ngay cả các cấu trúc DOM phức tạp nhất.
Khả năng linh hoạt và sức mạnh của XPath khiến đây trở thành một công cụ không thể thiếu trong bộ công cụ kiểm thử của bạn, đặc biệt khi xử lý các ứng dụng web phức tạp mà các bộ chọn đơn giản hơn có thể không đủ. Trong khi các bộ chọn CSS thường được ưa chuộng vì hiệu suất, vẫn có nhiều kịch bản mà khả năng độc đáo của XPath—như chọn các phần tử dựa trên nội dung văn bản hoặc traversing lên phân cấp DOM—làm cho nó trở thành sự lựa chọn vượt trội.
Nhớ bắt đầu với các biểu thức đơn giản và chỉ thêm sự phức tạp khi cần. Thường xuyên xem xét và tái cấu trúc các biểu thức XPath của bạn để đảm bảo chúng vẫn hiệu quả và duy trì được trong khi ứng dụng của bạn phát triển. Với sự luyện tập và áp dụng những kỹ thuật này, bạn sẽ phát triển được chuyên môn để tạo ra các biểu thức XPath chính xác, mạnh mẽ, có thể chịu được thử thách theo thời gian.
Chúc bạn kiểm thử vui vẻ!