Cách sử dụng XPath trong Selenium? Hướng dẫn

XPath là gì trong Selenium?

XPath trong Selenium là một đường dẫn XML được sử dụng để điều hướng qua cấu trúc HTML của trang. Đó là cú pháp hoặc ngôn ngữ để tìm bất kỳ phần tử nào trên trang web bằng cách sử dụng biểu thức đường dẫn XML. XPath có thể được sử dụng cho cả tài liệu HTML và XML để tìm vị trí của bất kỳ thành phần nào trên trang web bằng cấu trúc HTML DOM.

In Selenium tự động hóa, nếu các phần tử không được tìm thấy bởi các công cụ định vị chung như id, class, name, v.v. thì XPath được sử dụng để tìm một phần tử trên trang web.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về Xpath và các biểu thức XPath khác nhau để tìm các phần tử phức tạp hoặc động, có thuộc tính thay đổi động khi làm mới hoặc bất kỳ thao tác nào.

Cú pháp XPath

XPath chứa đường dẫn của phần tử nằm trên trang web. Cú pháp XPath chuẩn để tạo XPath là.

Xpath=//tagname[@attribute='value']

Định dạng cơ bản của XPath trong selen được giải thích bên dưới bằng ảnh chụp màn hình.

• //: Chọn nút hiện tại.
• Tên thẻ: Tên thẻ của nút cụ thể.
• @: Chọn thuộc tính.
• Thuộc tính: Tên thuộc tính của nút.
• Giá trị: Giá trị của thuộc tính.

Để tìm phần tử trên các trang web một cách chính xác, có nhiều loại công cụ định vị khác nhau:

Bộ định vị XPath	Tìm các phần tử khác nhau trên trang web
ID	Để tìm phần tử theo ID của phần tử
Tên lớp	Để tìm phần tử theo Tên lớp của phần tử
Họ tên	Để tìm phần tử theo tên của phần tử
văn bản liên kết	Để tìm phần tử theo văn bản của liên kết
Xpath	Cần có XPath để tìm phần tử động và di chuyển giữa các phần tử khác nhau của trang web
Đường dẫn CSS	Đường dẫn CSS cũng định vị các phần tử không có tên, lớp hoặc ID.

Các loại đường X

Có hai loại XPath:

1) XPath tuyệt đối

2) XPath tương đối

XPath tuyệt đối

Đó là cách trực tiếp để tìm phần tử, nhưng nhược điểm của XPath tuyệt đối là nếu có bất kỳ thay đổi nào được thực hiện trong đường dẫn của phần tử thì XPath đó sẽ thất bại.

Đặc điểm chính của XPath là nó bắt đầu bằng dấu gạch chéo đơn (/), có nghĩa là bạn có thể chọn phần tử từ nút gốc.

Dưới đây là ví dụ về biểu thức Xpath tuyệt đối của phần tử được hiển thị trong màn hình bên dưới.

LƯU Ý: Bạn có thể thực hành bài tập XPath sau đây trên https://demo.guru99.com/test/selenium-xpath.html

Nhấp chuột đây nếu video không thể truy cập được

XPath tuyệt đối:

/html/body/div[2]/div[1]/div/h4[1]/b/html[1]/body[1]/div[2]/div[1]/div[1]/h4[1]/b[1]

Xpath tương đối

Xpath tương đối bắt đầu từ giữa cấu trúc HTML DOM. Nó bắt đầu bằng dấu gạch chéo kép (//). Nó có thể tìm kiếm các phần tử ở bất kỳ đâu trên trang web, nghĩa là không cần phải viết xpath dài và bạn có thể bắt đầu từ giữa cấu trúc HTML DOM. Xpath tương đối luôn được ưu tiên vì nó không phải là đường dẫn đầy đủ từ phần tử gốc.

Dưới đây là ví dụ về biểu thức XPath tương đối của cùng một phần tử được hiển thị trong màn hình bên dưới. Đây là định dạng phổ biến được sử dụng để tìm phần tử bằng XPath.

Nhấp chuột đây nếu video không thể truy cập được

Relative XPath: //div[@class='featured-box cloumnsize1']//h4[1]//b[1]

Trục XPath là gì

Trục XPath tìm kiếm các nút khác nhau trong tài liệu XML từ nút ngữ cảnh hiện tại. Trục XPath là các phương pháp được sử dụng để tìm các phần tử động, nếu không thì không thể thực hiện được bằng phương pháp XPath thông thường không có ID, Classname, Name, v.v. XPath trong Selenium bao gồm một số phương pháp như Contains, AND, Absolute XPath và Relative XPath để xác định và định vị các phần tử động dựa trên các thuộc tính và điều kiện khác nhau.

Các phương thức trục được sử dụng để tìm các phần tử đó, chúng thay đổi linh hoạt khi làm mới hoặc bất kỳ hoạt động nào khác. Có một số phương pháp trục thường được sử dụng trong Selenium webdriver như con cái, cha mẹ, tổ tiên, anh chị em, người đi trước, bản thân, v.v.

Cách viết XPath động vào Selenium webdriver

1) XPath cơ bản

Biểu thức XPath chọn các nút hoặc danh sách các nút trên cơ sở các thuộc tính như ID, Tên, Tên lớp, v.v. từ tài liệu XML như được minh họa bên dưới.

Xpath=//input[@name='uid']

Đây là đường dẫn để truy cập trang https://demo.guru99.com/test/selenium-xpath.html

Một số biểu thức xpath cơ bản hơn:

Xpath=//input[@type='text']
Xpath=//label[@id='message23']
Xpath=//input[@value='RESET']
Xpath=//*[@class='barone']
Xpath=//a[@href='https://demo.guru99.com/']
Xpath=//img[@src='//guru99.com/images/home/java.png']

2) Chứa()

Chứa() là một phương thức được sử dụng trong biểu thức XPath. Nó được sử dụng khi giá trị của bất kỳ thuộc tính nào thay đổi linh hoạt, ví dụ: thông tin đăng nhập.

Tính năng chứa có khả năng tìm phần tử có một phần văn bản như trong ví dụ XPath bên dưới.

Trong ví dụ này, chúng tôi đã cố gắng xác định phần tử bằng cách chỉ sử dụng một phần giá trị văn bản của thuộc tính. Trong biểu thức XPath bên dưới, giá trị một phần 'sub' được sử dụng thay cho nút gửi. Có thể thấy rằng phần tử được tìm thấy thành công.

Giá trị đầy đủ của 'Loại' là 'gửi' nhưng chỉ sử dụng một phần giá trị 'phụ'.

Xpath=//*[contains(@type,'sub')]

Giá trị đầy đủ của 'name' là 'btnLogin' nhưng chỉ sử dụng một phần giá trị 'btn'.

Xpath=//*[contains(@name,'btn')]

Trong biểu thức trên, chúng tôi đã lấy 'name' làm thuộc tính và 'btn' làm một phần giá trị như trong ảnh chụp màn hình bên dưới. Điều này sẽ tìm thấy 2 phần tử (ĐĂNG NHẬP & ĐẶT LẠI) vì thuộc tính 'name' của chúng bắt đầu bằng 'btn'.

Tương tự, trong biểu thức bên dưới, chúng tôi đã lấy 'id' làm thuộc tính và 'thông báo' làm một phần giá trị. Điều này sẽ tìm thấy 2 thành phần ('ID người dùng không được để trống' & 'Mật khẩu không được để trống') vì thuộc tính 'id' của nó bắt đầu bằng 'tin nhắn'.

Xpath=//*[contains(@id,'message')]

Trong biểu thức bên dưới, chúng tôi đã lấy “văn bản” của liên kết làm thuộc tính và 'ở đây' làm một phần giá trị như trong ảnh chụp màn hình bên dưới. Điều này sẽ tìm thấy liên kết ('ở đây') vì nó hiển thị văn bản 'ở đây'.

Xpath=//*[contains(text(),'here')]
Xpath=//*[contains(@href,'guru99.com')]

3) Sử dụng HOẶC & VÀ

Trong biểu thức OR, hai điều kiện được sử dụng, cho dù điều kiện thứ nhất HOẶC điều kiện thứ 1 có đúng hay không. Nó cũng có thể áp dụng được nếu bất kỳ một điều kiện nào đều đúng hoặc có thể cả hai. Có nghĩa là bất kỳ điều kiện nào cũng phải đúng để tìm phần tử.

Trong biểu thức XPath bên dưới, nó xác định các phần tử có một hoặc cả hai điều kiện đều đúng.

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

Đánh dấu cả hai phần tử là phần tử “LOGIN ” có thuộc tính 'type' và phần tử "RESET" có thuộc tính 'name'.

Trong biểu thức AND, hai điều kiện được sử dụng, cả hai điều kiện đều phải đúng để tìm phần tử. Nó không tìm thấy phần tử nếu bất kỳ một điều kiện nào là sai.

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

Trong biểu thức bên dưới, làm nổi bật phần tử 'ĐĂNG NHẬP' vì nó có cả thuộc tính 'loại' và 'tên'.

4) Bắt đầu với Xpath

XPath bắt đầu bằng() là một hàm được sử dụng để tìm thành phần web có giá trị thuộc tính bị thay đổi khi làm mới hoặc bởi các hoạt động động khác trên trang web. Trong phương pháp này, văn bản bắt đầu của thuộc tính được so khớp để tìm phần tử có giá trị thuộc tính thay đổi linh hoạt. Bạn cũng có thể tìm thấy các phần tử có giá trị thuộc tính là tĩnh (không thay đổi).

Ví dụ -: Giả sử ID của phần tử cụ thể thay đổi linh hoạt như:

Id="tin nhắn12"

Id="tin nhắn345"

Id="tin nhắn8769"

vân vân.. nhưng văn bản ban đầu giống nhau. Trong trường hợp này, chúng tôi sử dụng biểu thức Bắt đầu bằng.

Trong biểu thức bên dưới, có hai thành phần có id bắt đầu là “thông báo” (tức là 'ID người dùng không được để trống' & 'Mật khẩu không được để trống'). Trong ví dụ bên dưới, XPath tìm thấy những phần tử có 'ID' bắt đầu bằng 'message'.

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

Trong biểu thức này, với hàm văn bản, chúng ta tìm phần tử có văn bản khớp chính xác như dưới đây. Trong trường hợp của chúng tôi, chúng tôi tìm thấy phần tử có văn bản “UserID”.

Xpath=//td[text()='UserID']

Phương pháp trục XPath

Các phương pháp trục XPath này được sử dụng để tìm các phần tử phức tạp hoặc động. Dưới đây chúng ta sẽ xem một số phương pháp này.

Để minh họa phương pháp trục XPath này, chúng tôi sẽ sử dụng trang demo ngân hàng Guru99.

1) Theo dõi

Chọn tất cả các phần tử trong tài liệu của nút hiện tại ( ) [hộp nhập UserID là nút hiện tại] như hiển thị trong màn hình bên dưới.

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

Có 3 nút "đầu vào" khớp bằng cách sử dụng trục "sau" - mật khẩu, đăng nhập và nút đặt lại. Nếu bạn muốn tập trung vào bất kỳ phần tử cụ thể nào thì bạn có thể sử dụng phương pháp XPath bên dưới:

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

Bạn có thể thay đổi XPath theo yêu cầu bằng cách đặt [1],[2]…………, v.v.

Với dữ liệu đầu vào là '1', ảnh chụp màn hình bên dưới sẽ tìm ra nút cụ thể là phần tử hộp nhập 'Mật khẩu'.

2) Tổ tiên

Trục tổ tiên chọn tất cả phần tử tổ tiên (ông bà, cha mẹ, v.v.) của nút hiện tại như được hiển thị trong màn hình bên dưới.

Trong biểu thức bên dưới, chúng ta đang tìm phần tử tổ tiên của nút hiện tại (nút “ENTERPRISE TESTING”).

Xpath=//*[text()='Enterprise Testing']//ancestor::div

Có 13 nút “div” khớp bằng cách sử dụng trục “tổ tiên”. Nếu bạn muốn tập trung vào bất kỳ phần tử cụ thể nào thì bạn có thể sử dụng XPath bên dưới, trong đó bạn thay đổi số 1, 2 theo yêu cầu của mình:

Xpath=//*[text()='Enterprise Testing']//ancestor::div[1]

Bạn có thể thay đổi XPath theo yêu cầu bằng cách đặt [1], [2]…………, v.v.

3) Trẻ em

Chọn tất cả các phần tử con của nút hiện tại (Java) như hiển thị trong màn hình bên dưới.

Xpath=//*[@id='java_technologies']//child::li

Có 71 nút “li” khớp bằng cách sử dụng trục “con”. Nếu bạn muốn tập trung vào bất kỳ yếu tố cụ thể nào thì bạn có thể sử dụng xpath bên dưới:

Xpath=//*[@id='java_technologies']//child::li[1]

Bạn có thể thay đổi xpath theo yêu cầu bằng cách đặt [1],[2]…………, v.v.

4) Trước

Chọn tất cả các nút đứng trước nút hiện tại như hiển thị trong màn hình bên dưới.

Trong biểu thức bên dưới, nó xác định tất cả các thành phần đầu vào trước nút “ĐĂNG NHẬP” Tên người dùng và mật khẩu phần tử đầu vào.

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

Có 2 nút “đầu vào” khớp nhau bằng cách sử dụng trục “trước”. Nếu bạn muốn tập trung vào bất kỳ yếu tố cụ thể nào thì bạn có thể sử dụng XPath bên dưới:

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

Bạn có thể thay đổi xpath theo yêu cầu bằng cách đặt [1],[2]…………, v.v.

5) Theo sau anh chị em ruột

Chọn các nút anh chị em sau của nút ngữ cảnh. Các nút anh chị em ở cùng cấp độ với nút hiện tại như được hiển thị trong màn hình bên dưới. Nó sẽ tìm phần tử sau nút hiện tại.

xpath=//*[@type='submit']//following-sibling::input

Một nút đầu vào khớp với nhau bằng cách sử dụng trục “theo sau-nút anh chị em”.

6) Cha mẹ

Chọn nút cha của nút hiện tại như minh họa trong màn hình bên dưới.

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

Có 65 nút “div” khớp bằng cách sử dụng trục “mẹ”. Nếu bạn muốn tập trung vào bất kỳ yếu tố cụ thể nào thì bạn có thể sử dụng XPath bên dưới:

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

Bạn có thể thay đổi XPath theo yêu cầu bằng cách đặt [1],[2]…………, v.v.

7) Bản thân

Chọn nút hiện tại hoặc 'tự' có nghĩa là nó chỉ ra chính nút đó như được hiển thị trong màn hình bên dưới.

Khớp một nút bằng cách sử dụng trục “self”. Nó luôn chỉ tìm thấy một nút vì nó đại diện cho phần tử tự.

Xpath =//*[@type='password']//self::input

8) Hậu duệ

Chọn con cháu của nút hiện tại như hiển thị trong màn hình bên dưới.

Trong biểu thức bên dưới, nó xác định tất cả các phần tử con của phần tử hiện tại (phần tử khung 'Phần thân chính') có nghĩa là nằm dưới nút (nút con, nút cháu, v.v.).

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

Có 12 nút “liên kết” khớp nhau bằng cách sử dụng trục “hậu duệ”. Nếu bạn muốn tập trung vào bất kỳ yếu tố cụ thể nào thì bạn có thể sử dụng XPath bên dưới:

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

Bạn có thể thay đổi XPath theo yêu cầu bằng cách đặt [1],[2]…………, v.v.

Tổng kết

XPath được yêu cầu để tìm một phần tử trên trang web cũng như thực hiện một thao tác trên phần tử cụ thể đó.

• Có hai loại Selenium XPath:
  • XPath tuyệt đối
  • XPath tương đối

• Trục XPath là phương pháp được sử dụng để tìm các phần tử động, nếu không thì không thể tìm thấy bằng phương pháp XPath thông thường
• Biểu thức XPath chọn các nút hoặc danh sách các nút trên cơ sở các thuộc tính như ID, Tên, Tên lớp, v.v. từ tài liệu XML.

Cũng kiểm tra:- Selenium Hướng dẫn dành cho người mới bắt đầu: Học WebDriver trong 7 ngày