Hướng dẫn sử dụng XPath trong Selenium WebDriver: Làm thế nào để Tìm XPath?

Trong tự Trong tự động hóa Selenium, nếu các phần tử không được tìm thấy bởi các Locator 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ó các attribute thay đổi động khi làm mới hoặc bất kỳ hoạt động nào.

XPath trong Selenium là gì?

XPath trong Selenium là một đường dẫn XML được sử dụng để điều hướng thông qua cấu axes HTML của trang. Nó là một 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ả Document HTML và XML để tìm vị trí của bất kỳ phần tử nào trên trang web bằng cách sử dụng cấu axes HTML DOM.

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

Định dạng cơ bản của XPath

Cú pháp cho XPath selen:

XPath Contains đường dẫn của phần tử nằm trên trang web. Cú pháp XPath tiêu Containsn để tạo XPath là.

Xpath = // tagname [@ attribute = ‘value’]

  • //: Chọn  nodes  hiện tại.
  • Tagname: tên thẻ của  nodes  cụ thể.
  • @: Chọn attribute.
  • attribute: Name attribute của  nodes .
  • Giá trị: Giá trị của attribute.

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

Locator XPathTìm các yếu tố khác nhau trên trang web
IDĐể tìm phần tử theo ID của phần tử
Class nameĐể tìm phần tử theo Class name của phần tử
NameĐể tìm phần tử theo Name của phần tử
Text LinkĐể tìm phần tử theo văn bản của liên kết
XPathXPath cần thiết để tìm phần tử động và duyệt 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ó Name, class hoặc ID.

Các loại đường dẫn X

Có hai loại XPath:

1) XPath tuyệt đối

2) XPath tương đối

XPath tuyệt đối:

Đây là cách axes 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ẽ không thành childg.

Đặc điểm chính của XPath là nó bắt đầu bằng một dấu gạch chéo ngược (/), có nghĩa là bạn có thể chọn phần tử từ  nodes  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.

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 tuyệt đối

Xpath tương đối:

Xpath tương đối bắt đầu từ giữa cấu axes 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 cứ đâu trên trang web, có nghĩa là không cần phải viết một đường dẫn dài và bạn có thể bắt đầu từ phần giữa của cấu axes HTML DOM. Xpath tương đối luôn được ưu tiên vì nó không phải là một đường dẫn hoàn chỉnh 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.

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

XPath tương đối

Các XPath axes là gì.

Các XPath axes tìm kiếm các  nodes  khác nhau trong Document XML từ  nodes  ngữ cảnh hiện tại. XPath Axes là các phương thức được sử dụng để tìm các phần tử động, điều này không thể thực hiện được bởi phương thức XPath thông thường không có ID, Classname, Name, v.v.

Các phương thức Axes được sử dụng để tìm các phần tử đó, các phần tử này sẽ tự động thay đổi khi làm mới hoặc bất kỳ hoạt động nào khác. Có một số phương thức axes thường được sử dụng trong Selenium Webdriver như child, cha mẹ, Ancestor, anh chị em, trước đó, tự, v.v.

Sử dụng XPath Xử lý các phần tử phức tạp & động trong Selenium

1) XPath cơ bản:

Biểu thức XPath chọn các  nodes  hoặc danh sách các  nodes  trên cơ sở các attribute như ID, Name, Class name , v.v. từ Document XML như minh họa bên dưới.

Xpath = // input [@ name = ‘uid’]

Đây là liên kết để truy cập trang http://demo.guru99.com/test/selenium-xpath.html

XPath cơ bản

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 =’ http: //demo.guru99.com/ ‘] 

Xpath = //img[@src=’//cdn.guru99.com/images/home/java.png’ ]

2) Contains():

childtains () 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ỳ attribute nào thay đổi động, ví dụ: thông tin đăng nhập.

Tính năng Contains có khả năng tìm phần tử có một phần văn bản như được hiển thị trong ví dụ XPath dưới đây.

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 attribute. Trong biểu thức XPath dưới đây, một phần giá trị ‘phụ’ được sử dụng thay cho submit button. Có thể quan sát thấy rằng phần tử được tìm thấy thành childg.

Giá trị hoàn chỉnh 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ị hoàn chỉnh 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 attribute và ‘btn’ làm giá trị một phần như được hiển thị trong ảnh chụp màn hình bên dưới. Thao tác này sẽ tìm thấy 2 phần tử (ĐĂNG NHẬP & ĐẶT LẠI) vì attribute ‘Name’ của chúng bắt đầu bằng ‘btn’.

Tương tự, trong biểu thức dưới đây, chúng tôi đã lấy ‘id’ làm attribute và ‘thông báo’ làm giá trị một phần. Điều này sẽ tìm thấy 2 yếu tố (‘User-ID không được để trống’ và ‘Mật khẩu không được để trống’) vì attribute ‘name’ của nó bắt đầu bằng ‘message’.

Xpath = // * [Contains (@ id, ‘nội dung’)]

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 attribute và ‘đây’ dưới dạng một phần giá trị như được hiển thị trong ảnh chụp màn hình bên dưới. Thao tác này sẽ tìm thấy liên kết (‘tại đây’) vì nó hiển thị văn bản ‘tại đây’.

Xpath = // * [Contains (text (), ‘here’)] 

Xpath = // * [Contains (@ href, ‘guru99.com’)]

3) Sử dụng OR & AND:

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ứ hai phải đúng. Nó cũng có thể áp dụng nếu bất kỳ một điều kiện nào là đúng hoặc có thể là cả hai. Có nghĩa là bất kỳ một điều kiện nào phải đúng để tìm phần tử.

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

Xpath = // * [@ type = ‘submit’ hoặc @ name = ‘btnReset’]

Đánh dấu cả hai phần tử là phần tử “ĐĂNG NHẬP” có attribute “loại” và phần tử “ĐẶT LẠI” có attribute “Name”.

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

Xpath = // input [@ type = ‘submit’ và @ name = ‘btnLogin’]

Trong biểu thức bên dưới, đánh dấu phần tử ‘LOGIN’ vì nó có cả attribute ‘loại’ và ‘Name’.

4) Xpath Starts-with

XPath start-with () là một hàm được sử dụng để tìm phần tử web có giá trị attribute 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 attribute được đối sánh để tìm phần tử có giá trị attribute thay đổi động. Bạn cũng có thể tìm thấy các phần tử có giá trị attribute là tĩnh (không thay đổi).

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

Id = “message12”

Id = “message345”

Id = “message8769”

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 với.

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

Xpath = // label [start-with (@ id, ‘message’)]

5) Hàm XPath Text ()

Hàm XPath text () là một hàm tích hợp sẵn của selenium webdriver được sử dụng để định vị các phần tử dựa trên văn bản của một phần tử web. Nó giúp tìm các phần tử văn bản chính xác và định vị các phần tử trong tập hợp các  nodes  văn bản. Các phần tử được định vị phải ở dạng chuỗi.

Trong biểu thức này, với chức năng văn bản, chúng tôi tìm thấy phần tử có văn bản khớp chính xác như hì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’]

6) Các phương thức XPath axes:

Các phương pháp XPath axes 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ẽ thấy một số phương pháp này.

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

a) Following

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

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

Có 3  nodes  “đầu vào” khớp với nhau bằng cách sử dụng mật khẩu axes “sau”, đăng nhập và  nodes  đặ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 dưới đây:

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 đầu vào là ‘1’, ảnh chụp màn hình dưới đây tìm thấy  nodes  cụ thể là phần tử hộp nhập ‘Mật khẩu’.

b) Ancestor:

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

Trong biểu thức dưới đây, chúng tôi đang tìm phần tử Ancestor của  nodes  hiện tại ( nodes  “KIỂM TRA DOANH NGHIỆP”).

Xpath = // * [text () = ‘Thử nghiệm doanh nghiệp’] // Ancestor :: div

Có 13  nodes  “div” khớp bằng cách sử dụng axes “Ancestor”. 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, nơi bạn thay đổi số 1, 2 theo yêu cầu của bạn:

Xpath = // * [text () = ‘Thử nghiệm doanh nghiệp’] // Ancestor :: div [1]

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

c) child:

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

Xpath = // * [@ id = ‘java_technologies’] // Child:: li

Có 71  nodes  “li” khớp bằng cách sử dụng axes “child”. 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:

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.

d) Preceding::

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

Trong biểu thức dưới đây, nó xác định tất cả các phần tử đầu vào trước  nodes  “ĐĂNG NHẬP” là Userid và phần tử nhập mật khẩu .

Xpath = // * [@ type = ‘submit’] // trước :: đầu vào

Có 2  nodes  “đầu vào” khớp bằng cách sử dụng axes “trước”. 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:

Xpath = // * [@ type = ‘submit’] // trước :: input [1]

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

e) Following-sibling

Chọn các Following-sibling của  nodes  ngữ cảnh. Anh chị em ở cùng cấp của  nodes  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  nodes  hiện tại.

xpath = // * [@ type = ‘submit’] // anh chị em sau :: đầu vào

XPath trong Selenium WebDriver: Hướng dẫn hoàn chỉnh

Một  nodes  đầu vào khớp bằng cách sử dụng axes “anh chị em sau”.

f) Parent:

Chọn  nodes  cha của  nodes  hiện tại như được hiển thị trong màn hình bên dưới.

Xpath = // * [@ id = ‘rt-feature’] // cha :: div

XPath trong Selenium WebDriver: Hướng dẫn hoàn chỉnh

Có 65  nodes  “div” khớp bằng cách sử dụng axes “cha”. 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:

Xpath = // * [@ id = ‘rt-feature’] // Paren:: div [1]

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

g) Self:

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

XPath trong Selenium WebDriver: Hướng dẫn hoàn chỉnh

Đối sánh một  nodes  bằng cách sử dụng axes “tự”. Nó luôn chỉ tìm thấy một  nodes  vì nó đại diện cho phần tử tự.

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

h) Descendant:

Chọn phần tử Childcủa  nodes  hiện tại như được hiển thị trong màn hình bên dưới.

Trong biểu thức dưới đây, nó xác định tất cả các phần tử Childcủa phần tử hiện tại (phần tử khung ‘Main body surround’) có nghĩa là nằm dưới  nodes  ( nodes  child,  nodes  grandchild, v.v.).

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

XPath trong Selenium WebDriver: Hướng dẫn hoàn chỉnh

Có 12  nodes  “liên kết” khớp bằng cách sử dụng axes “Childgrandchild”. 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:

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.

Bản tóm tắt:

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

  • Có hai loại selen XPath:
    • XPath tuyệt đối
    • XPath tương đối
  • XPath Axes là các phương thức đượ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  nodes  hoặc danh sách các  nodes  trên cơ sở các attribute như ID, Name, Class name, v.v. từ Document XML.
Back to top button