Bộ định vị ở Selenium
Krishna rừng ta
⚡ Tóm tắt thông minh
Bộ định vị ở Selenium Đây là các lệnh hướng dẫn công cụ tự động hóa xác định các phần tử giao diện người dùng (GUI) như hộp văn bản, nút bấm và hộp kiểm. Tài liệu tham khảo này giải thích các loại định vị ID, Name, Link Text, DOM và XPath với các ví dụ thực tế, quy tắc cú pháp và chiến lược lựa chọn để tạo ra các kịch bản tự động hóa web đáng tin cậy.
Bộ định vị là gì? Selenium?
Bộ định vị là một lệnh chỉ dẫn Selenium IDE hoặc Selenium WebDriver sẽ chỉ định đúng phần tử giao diện người dùng (GUI), chẳng hạn như hộp văn bản, nút, liên kết hoặc hộp kiểm, trên đó cần thực hiện một hành động. Xác định đúng phần tử GUI là điều kiện tiên quyết để xây dựng bất kỳ kịch bản tự động hóa đáng tin cậy nào. Tuy nhiên, việc xác định chính xác khó hơn tưởng tượng. Đôi khi, bạn có thể tương tác với phần tử sai hoặc không tương tác với phần tử nào cả. Để giải quyết vấn đề này, Selenium Cung cấp nhiều chiến lược định vị khác nhau cho phép nhắm mục tiêu chính xác vào các phần tử giao diện người dùng.
Mặc dù một số lệnh, chẳng hạn như lệnh “mở”, không yêu cầu bộ định vị, nhưng phần lớn các lệnh khác lại không cần bộ định vị. Selenium Các lệnh phụ thuộc vào bộ định vị phần tử. Việc lựa chọn bộ định vị phụ thuộc phần lớn vào Ứng dụng đang được kiểm thử (AUT) của bạn. Trong hướng dẫn này, chúng ta sẽ luân phiên sử dụng Facebook và... Mercury Trang web demo của Tours (newtours.demoaut), dựa trên các công cụ định vị mà mỗi ứng dụng hỗ trợ. Tương tự, trong ứng dụng của riêng bạn, thử nghiệm Trong dự án này, bạn sẽ chọn một bộ định vị phần tử. Selenium WebDriver dựa trên cấu trúc ứng dụng của bạn.
Định vị theo ID
Đây là phương pháp phổ biến nhất để định vị các phần tử vì ID được thiết kế để duy nhất cho mỗi phần tử trên một trang. Bất cứ khi nào thuộc tính ID tồn tại, nó nên là lựa chọn đầu tiên của bạn để tạo ra các kịch bản kiểm thử nhanh, ổn định và dễ đọc.
Target Định dạng: id=id của phần tử
Trong ví dụ này, chúng ta sẽ sử dụng một trang demo của Facebook vì... Mercury Ứng dụng Tours không sử dụng thuộc tính ID cho các trường biểu mẫu chính.
Bước 1) Sử dụng trang demo này https://demo.guru99.com/test/facebook.html Để kiểm tra. Hãy kiểm tra ô văn bản “Email hoặc Số điện thoại” bằng Công cụ dành cho nhà phát triển tích hợp sẵn của trình duyệt (nhấn F12 trong Chrome, Edge hoặc...) Firefox) và ghi lại ID của nó. Trong trường hợp này, ID là “email”.
Bước 2) Khởi động Selenium IDE và nhập “id=email” vào Target Nhấp vào nút Tìm và lưu ý rằng ô văn bản “Email hoặc Số điện thoại” được tô sáng màu vàng với viền màu xanh lá cây, cho biết rằng Selenium IDE đã định vị phần tử chính xác.
Định vị theo tên
Việc tìm kiếm các phần tử theo tên tương tự như tìm kiếm theo ID, ngoại trừ việc chúng ta sử dụng... “tên =” Thay vào đó, hãy sử dụng tiền tố. Cách tiếp cận này hữu ích khi các phần tử không có ID nhưng có thuộc tính tên được xác định.
Target Định dạng: name=tên của phần tử
Để minh họa, chúng ta sẽ sử dụng Mercury Các chuyến tham quan vì tất cả các yếu tố biểu mẫu quan trọng trên trang web đều mang thuộc tính tên.
Bước 1) Hướng đến https://demo.guru99.com/test/newtours/ và sử dụng Công cụ dành cho nhà phát triển của trình duyệt để kiểm tra hộp văn bản "Tên người dùng". Ghi lại thuộc tính name của nó.
Ở đây, tên của phần tử là “userName”.
Bước 2) In Selenium IDE, nhập “name=userName” vào Target hộp và nhấp vào nút Tìm. Selenium IDE nên định vị ô nhập liệu Tên người dùng bằng cách bôi đen nó.
Cách xác định vị trí phần tử theo tên bằng bộ lọc
Bộ lọc rất hữu ích khi nhiều phần tử có cùng thuộc tính tên. Bộ lọc là các thuộc tính bổ sung được sử dụng để phân biệt các phần tử có cùng tên. Không có bộ lọc, Selenium Theo mặc định, chỉ chọn phần tử khớp đầu tiên.
Target Định dạng: name=name_of_the_element filter=value_of_filter
Chúng ta hãy cùng xem xét một ví dụ.
Bước 1) Đăng nhập vào Mercury Các chuyến tham quan.
Đăng nhập vào Mercury Các chuyến tham quan sử dụng "tutorial" làm tên người dùng và mật khẩu. Trang Tìm kiếm Chuyến bay sẽ xuất hiện, như hình bên dưới.
Bước 2) Hãy sử dụng Công cụ dành cho nhà phát triển để kiểm tra các thuộc tính VALUE.
Hãy lưu ý rằng các nút chọn "Khứ hồi" và "Một chiều" đều có cùng tên là "tripType". Tuy nhiên, chúng có thuộc tính VALUE khác nhau, vì vậy chúng ta có thể sử dụng mỗi giá trị làm bộ lọc.
Bước 3) Nhấp chuột vào hàng đầu tiên trong trình chỉnh sửa.
- Chúng ta sẽ truy cập vào nút chọn "Một chiều" trước. Nhấp vào dòng đầu tiên trong... Selenium Trình soạn thảo IDE.
- Trong hộp lệnh, nhập lệnh “click”.
- Trong tạp chí Target Trong ô đó, nhập “name=tripType value=oneway”. Phần “value=oneway” đóng vai trò là bộ lọc của chúng ta.
Bước 4) Nhấp vào nút Tìm.
Thông báo rằng Selenium IDE tô sáng nút chọn One Way bằng màu xanh lá cây, xác nhận rằng phần tử đã được truy cập thành công thông qua thuộc tính VALUE của nó.
Bước 5) Chọn nút radio "Một chiều".
Nhấn phím “X” trên bàn phím để thực hiện lệnh nhấp chuột. Nút chọn One Way hiện đã được chọn.
Bạn có thể thực hiện thao tác tương tự trên nút chọn Round Trip, lần này sử dụng “name=tripType value=roundtrip” làm mục tiêu.
Định vị bằng văn bản liên kết
Chiến lược định vị này chỉ áp dụng cho văn bản siêu liên kết. Chúng ta truy cập liên kết bằng cách thêm tiền tố “link=" vào mục tiêu, theo sau là văn bản siêu liên kết hiển thị. Phương pháp này rất dễ đọc và hoạt động tốt cho việc kiểm thử điều hướng.
Target Định dạng: liên kết=link_text
Trong ví dụ sau, chúng ta sẽ truy cập vào liên kết “ĐĂNG KÝ” được tìm thấy trên trang web. Mercury Trang chủ các tour du lịch.
Bước 1)
- Trước tiên, hãy đảm bảo rằng bạn đã đăng xuất khỏi Mercury Các chuyến tham quan.
- Điều hướng đến Mercury Trang chủ các tour du lịch.
Bước 2)
- Hãy sử dụng Công cụ dành cho nhà phát triển để kiểm tra liên kết “ĐĂNG KÝ”. Văn bản của liên kết xuất hiện giữa thẻ neo mở và đóng.
- Trong trường hợp này, văn bản liên kết là “ĐĂNG KÝ”. Sao chép văn bản liên kết.
Bước 3) Sao chép đoạn văn bản liên kết và dán vào... Selenium IDE Target hộp. Thêm tiền tố “link=" vào.
Bước 4) Nhấp vào nút Tìm. Selenium IDE sẽ tô sáng liên kết REGISTER một cách chính xác.
Bước 5) Để xác minh thêm, hãy nhập “clickAndWait” vào hộp Lệnh và thực hiện. Selenium IDE sẽ nhấp vào liên kết ĐĂNG KÝ thành công và đưa bạn đến trang Đăng ký như hình bên dưới.
Định vị bằng DOM (Mô hình đối tượng tài liệu)
Mô hình đối tượng tài liệu (DOM)Nói một cách đơn giản, nó mô tả cách các phần tử HTML được cấu trúc như một cây các nút. Selenium IDE có thể điều hướng cây này để truy cập các phần tử trang. Khi sử dụng phương pháp này, Target box luôn bắt đầu bằng “dom=document…”. Tiền tố “dom=” thường được bỏ qua vì Selenium IDE tự động hiểu bất kỳ giá trị nào bắt đầu bằng “document” là đường dẫn DOM.
Có bốn cách cơ bản để định vị một phần tử thông qua DOM. Selenium:
- Getelementbyid
- getElementsByName
- dom:name (chỉ áp dụng cho các thành phần trong biểu mẫu được đặt tên)
- dom: chỉ mục
Định vị bằng DOM – getElementById
Trước tiên, chúng ta hãy cùng tìm hiểu phương thức getElementById của DOM. SeleniumPhương thức này trả về một phần tử duy nhất bằng cách so khớp thuộc tính ID của nó.
cú pháp
document.getElementById("id of the element")
- ID của phần tử = giá trị của thuộc tính ID của phần tử cần truy cập. Giá trị này phải luôn được đặt trong dấu ngoặc kép.
Bước 1) Sử dụng trang demo này https://demo.guru99.com/test/facebook.htmlTruy cập vào đó và sử dụng Công cụ dành cho nhà phát triển để kiểm tra hộp kiểm “Giữ tôi đăng nhập”. Ghi lại ID của nó.
Mã định danh chúng ta nên sử dụng là “persist_box”.
Bước 2) Mở Selenium IDE và trong Target Nhập document.getElementById(“persist_box”) vào ô, sau đó nhấp vào Tìm. Selenium IDE sẽ tìm thấy ô chọn “Giữ tôi đăng nhập”. Mặc dù không thể tô sáng phần bên trong ô chọn, nhưng nó sẽ bao quanh phần tử này bằng một đường viền màu xanh lá cây sáng, như hình bên dưới.
Định vị theo DOM – getElementsByName
Phương thức getElementById chỉ truy cập một phần tử tại một thời điểm, cụ thể là phần tử có ID được chỉ định. Phương thức getElementsByName hoạt động khác. Nó trả về một mảng các phần tử có cùng tên được chỉ định. Các phần tử riêng lẻ được truy cập bằng chỉ số số bắt đầu từ 0.
 |
Getelementbyid Nó chỉ trả về một phần tử duy nhất. Phần tử đó mang ID được chỉ định bên trong dấu ngoặc đơn của getElementById(). |
 |
getElementsByName Nó trả về một tập hợp các phần tử có tên giống nhau. Mỗi phần tử được đánh số từ 0, giống như một mảng. Bạn chọn một phần tử cụ thể bằng cách đặt chỉ số của nó bên trong dấu ngoặc vuông trong cú pháp bên dưới. |
cú pháp
document.getElementsByName("name")[index]
- name = tên của phần tử được xác định bởi thuộc tính 'name' của nó
- chỉ mục = một số nguyên cho biết phần tử nào trong mảng getElementsByName sẽ được sử dụng.
Bước 1) Điều hướng đến Mercury Truy cập trang chủ Tours và đăng nhập bằng tên người dùng và mật khẩu là “tutorial”. Trình duyệt sẽ tải màn hình Tìm kiếm chuyến bay.
Bước 2) Sử dụng Công cụ dành cho nhà phát triển để kiểm tra ba nút chọn ở cuối trang (Hạng phổ thông, Hạng thương gia và Hạng nhất). Bạn sẽ thấy rằng tất cả chúng đều có cùng tên là “servClass”.
Bước 3) Trước tiên, hãy truy cập vào nút chọn “Hạng phổ thông”. Trong ba nút chọn, phần tử này xuất hiện đầu tiên, vì vậy chỉ số của nó là 0. Trong Selenium IDE, gõ document.getElementsByName(“servClass”)[0] và nhấp vào nút Tìm. Selenium IDE sẽ nhận diện chính xác nút chọn hạng Economy.
Bước 4) Hãy đổi số thứ tự thành 1, để... Target trở thành document.getElementsByName(“servClass”)[1]. Nhấp vào nút Tìm và Selenium IDE sẽ làm nổi bật nút chọn "Business class" như hình bên dưới.
Định vị theo DOM – dom:name
Như đã đề cập trước đó, phương pháp này chỉ áp dụng nếu phần tử bạn đang truy cập nằm trong một biểu mẫu được đặt tên. Đường dẫn định vị bắt đầu từ biểu mẫu, sau đó đi sâu vào phần tử đích theo tên.
cú pháp
document.forms["name of the form"].elements["name of the element"]
- Tên của biểu mẫu = giá trị của thuộc tính `name` của thẻ `form` chứa phần tử mà bạn muốn truy cập.
- tên của phần tử = giá trị thuộc tính tên của phần tử bạn muốn truy cập
Bước 1) Hướng đến Mercury Trang chủ tour du lịch https://demo.guru99.com/test/newtours/ và sử dụng Công cụ dành cho nhà phát triển để kiểm tra hộp văn bản Tên người dùng. Lưu ý rằng nó nằm trong một biểu mẫu có tên là “home”.
Bước 2) In Selenium Trong IDE, gõ document.forms[“home”].elements[“userName”] và nhấp vào nút Tìm. Selenium IDE sẽ truy cập phần tử thành công.
Định vị theo DOM – dom:index
Phương pháp này vẫn áp dụng được ngay cả khi phần tử không nằm trong một biểu mẫu được đặt tên, bởi vì nó sử dụng chỉ mục của biểu mẫu thay vì tên của nó. Điều này hữu ích cho các trang cũ hoặc các biểu mẫu được tạo tự động, nơi không thể đặt tên.
cú pháp
document.forms[index of the form].elements[index of the element]
- Chỉ mục của biểu mẫu = số chỉ mục (bắt đầu từ 0) của biểu mẫu so với toàn bộ trang
- Chỉ số của phần tử = số chỉ mục (bắt đầu từ 0) của phần tử so với biểu mẫu chứa nó.
Chúng ta sẽ truy cập vào ô nhập liệu "Điện thoại" trên... Mercury Trang đăng ký tour. Biểu mẫu trên trang này không có thuộc tính tên hoặc ID, vì vậy nó là một ví dụ tốt.
Bước 1) Điều hướng đến Mercury Trang đăng ký tour và kiểm tra ô nhập số điện thoại. Lưu ý rằng biểu mẫu xung quanh không có thuộc tính ID hoặc tên.
Bước 2) Nhập document.forms[0].elements[3] vào Selenium IDE Target hộp và nhấp vào nút Tìm. Selenium IDE sẽ truy cập vào ô nhập liệu Số điện thoại một cách chính xác.
Bước 3) Ngoài ra, bạn cũng có thể sử dụng tên của phần tử thay cho chỉ số của nó để có kết quả tương tự. Nhập document.forms[0].elements[“phone”] vào Target Hộp văn bản Số điện thoại vẫn sẽ được tô sáng.
Định vị bằng XPath
XPath là ngôn ngữ truy vấn được sử dụng để điều hướng các nút XML (Ngôn ngữ đánh dấu mở rộng). Vì HTML có thể được coi là một cách triển khai của XML, Xpath Nó cũng có thể định vị các phần tử HTML. Đây là một trong những chiến lược định vị mạnh mẽ nhất. Selenium.
- Lợi thế: Nó có thể truy cập hầu hết mọi phần tử, kể cả những phần tử không có thuộc tính class, name hoặc ID.
- Bất lợi: Đây là chiến lược định vị phức tạp nhất do có nhiều quy tắc và biến thể cú pháp.
Công cụ dành cho nhà phát triển của các trình duyệt hiện đại có thể tự động tạo biểu thức XPath. Trong Chrome, Edge hoặc FirefoxNhấp chuột phải vào một phần tử trong bảng Elements và chọn Copy > Copy XPath. Trong ví dụ sau, chúng ta sẽ truy cập một hình ảnh không thể tìm thấy bằng các phương pháp đã thảo luận trước đó.
Bước 1) Điều hướng đến Mercury Truy cập trang chủ Tours và sử dụng Công cụ dành cho nhà phát triển để kiểm tra hình chữ nhật màu cam ở bên phải hộp màu vàng "Liên kết", như hình bên dưới.
Bước 2) Nhấp chuột phải vào mã HTML của phần tử, sau đó chọn tùy chọn “Sao chép XPath”.
Bước 3) In Selenium IDE, gõ một dấu gạch chéo đơn “/” vào Target Chọn ô đó, sau đó dán đường dẫn XPath đã sao chép ở bước trước. Mục nhập trong Target hộp bây giờ sẽ bắt đầu bằng hai dấu gạch chéo “//”.
Bước 4) Nhấp vào nút Tìm. Selenium IDE sẽ làm nổi bật ô màu cam, như hình bên dưới.
Tại sao việc chọn đúng đơn vị định vị lại quan trọng
Việc lựa chọn chiến lược định vị phù hợp là một trong những quyết định có ảnh hưởng lớn nhất. Selenium Tự động hóa rất quan trọng vì nó ảnh hưởng trực tiếp đến tính ổn định của kịch bản, tốc độ thực thi và chi phí bảo trì dài hạn. Việc lựa chọn bộ định vị không phù hợp có thể gây ra các bài kiểm tra không ổn định, lỗi sai và phải làm lại thường xuyên mỗi khi giao diện người dùng của ứng dụng thay đổi. Thứ tự ưu tiên được các kỹ sư tự động hóa giàu kinh nghiệm khuyến nghị là ID trước, sau đó là Tên, tiếp theo là Bộ chọn CSS, Văn bản liên kết và cuối cùng là XPath.
Các bộ định vị dựa trên ID là nhanh nhất vì quá trình tìm kiếm của trình duyệt được tối ưu hóa cho các định danh duy nhất. Các bộ định vị dựa trên tên cũng gần như hiệu quả tương đương khi tên là duy nhất. Bộ chọn CSS và XPath cung cấp tính linh hoạt nhưng có xu hướng chậm hơn và dễ bị lỗi hơn khi các nhà phát triển chỉnh sửa lại DOM. Văn bản liên kết rất tốt cho các liên kết điều hướng nhưng khả năng tái sử dụng bị hạn chế.
Việc tự động hóa ổn định cũng phụ thuộc vào sự hợp tác với các nhà phát triển. Khi người kiểm thử yêu cầu các thuộc tính ID hoặc data-* nhất quán và có ý nghĩa trong quá trình xem xét mã, độ bền của bộ định vị sẽ được cải thiện đáng kể. Tránh dựa vào các ID được tạo tự động (chẳng hạn như những ID do các framework tạo ra) vì chúng có thể thay đổi giữa các bản dựng. Bằng cách ưu tiên các bộ định vị dễ đọc, hướng đến mục đích, các nhóm có thể duy trì tính khả bảo trì của bộ kiểm thử và giảm nợ kỹ thuật khi ứng dụng phát triển.
Các phương pháp tốt nhất để viết công cụ định vị đáng tin cậy
Các thiết bị định vị đáng tin cậy là nền tảng của một hệ thống có thể duy trì hoạt động. Selenium bộ kiểm thử. Các phương pháp sau đây giúp giảm thiểu lỗi kịch bản, cải thiện khả năng đọc hiểu và làm cho các bài kiểm thử có khả năng chống chịu với các thay đổi giao diện người dùng.
- Ưu tiên sử dụng mã định danh duy nhất: Luôn kiểm tra thuộc tính ID trước tiên. ID được thiết kế để đảm bảo tính duy nhất trong một trang và là lựa chọn tối ưu hiệu suất nhất.
- Sử dụng tên ngữ nghĩa và các thuộc tính data-*: Khuyến khích các nhà phát triển thêm các thuộc tính kiểm thử ổn định như data-testid hoặc data-qa. Những thuộc tính này vẫn nhất quán ngay cả khi các lớp CSS thay đổi.
- Tránh sử dụng XPath tuyệt đối: Các đường dẫn tuyệt đối như /html/body/div[2]/div[3]/span dễ bị lỗi. Hãy sử dụng các biểu thức XPath tương đối với các thuộc tính như //input[@name='userName'].
- Kết hợp các thuộc tính để đạt độ chính xác cao hơn: Khi một thuộc tính đơn lẻ không phải là duy nhất, hãy kết hợp nhiều thuộc tính (ví dụ: //button[@type='submit' và @name='login']) để nhắm mục tiêu vào phần tử chính xác.
- Hãy sử dụng văn bản một cách khôn ngoan: Các bộ định vị phụ thuộc vào văn bản hiển thị có thể bị lỗi khi chuyển đổi ngôn ngữ. Chỉ sử dụng bộ định vị dựa trên văn bản khi nội dung ổn định và đơn ngữ.
- Tập trung các công cụ định vị: Lưu trữ các bộ định vị trong một lớp Page Object Model (POM) để có thể cập nhật ở một nơi duy nhất thay vì trên nhiều tập lệnh kiểm thử khác nhau.
- Kiểm tra trong Công cụ dành cho nhà phát triển: Trước khi thêm bộ định vị vào tập lệnh, hãy kiểm tra nó trong bảng điều khiển trình duyệt bằng cách sử dụng `$x(“//xpath”)` cho XPath hoặc `document.querySelector` cho CSS để xác nhận rằng nó trả về chính xác một phần tử.
- Nên tránh sử dụng các công cụ định vị dựa trên chỉ mục khi có thể: Vị trí chỉ mục như [3] phụ thuộc vào thứ tự phần tử. Ngay cả những thay đổi nhỏ về bố cục cũng có thể làm thay đổi chỉ mục và làm hỏng kịch bản.
Bằng cách áp dụng những phương pháp này một cách nhất quán, các kỹ sư tự động hóa tạo ra các bộ kiểm thử có khả năng mở rộng trên nhiều nhóm và hoạt động tốt ngay cả khi giao diện người dùng được cập nhật thường xuyên với mức bảo trì tối thiểu.
