Bộ định vị ở Selenium
Krishna rừng ta
Định vị là gì?
Định vị là một lệnh cho biết Selenium IDE thành phần GUI nào (ví dụ Văn bản Box, Nút, Kiểm tra Boxes, v.v.) nhu cầu của nó để hoạt động. Việc xác định các thành phần GUI chính xác là điều kiện tiên quyết để tạo tập lệnh tự động hóa. Nhưng việc xác định chính xác các thành phần GUI khó khăn hơn nhiều. Đôi khi, bạn làm việc với các phần tử GUI không chính xác hoặc không có phần tử nào cả! Kể từ đây, Selenium cung cấp một số Bộ định vị để định vị chính xác thành phần GUI
Có những lệnh không cần bộ định vị (chẳng hạn như lệnh “mở”). Tuy nhiên, hầu hết chúng đều cần Bộ định vị phần tử trong Selenium webdriver.
Việc lựa chọn công cụ định vị phụ thuộc phần lớn vào Ứng dụng đang được thử nghiệm của bạn. Trong hướng dẫn này, chúng ta sẽ chuyển đổi giữa Facebook, tour du lịch mới.demoaut trên cơ sở các trình định vị mà các ứng dụng này hỗ trợ. Tương tự như vậy trong Kiểm tra dự án, bạn sẽ chọn bất kỳ bộ định vị phần tử nào được liệt kê ở trên trong Selenium webdriver, dựa trên hỗ trợ ứng dụng của bạn.
Định vị theo ID
Đây là cách phổ biến nhất để định vị các phần tử vì ID được coi là duy nhất cho mỗi phần tử.
Target Định dạng: id=id của phần tử
Trong ví dụ này, chúng tôi sẽ sử dụng Facebook làm ứng dụng thử nghiệm vì Mercury Chuyến tham quan không sử dụng thuộc tính ID.
Bước 1) Kể từ khi hướng dẫn này được tạo, Facebook đã thay đổi Thiết kế trang đăng nhập của họ. Sử dụng trang demo này https://demo.guru99.com/test/facebook.html để thử nghiệm. Kiểm tra hộp văn bản “Email hoặc Điện thoại” bằng Firebug 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 hộp. Nhấp vào nút Tìm và lưu ý rằng hộp văn bản “Email hoặc Điện thoại” được tô sáng màu vàng và có viền màu xanh lá cây, nghĩa là, Selenium IDE đã có thể định vị chính xác phần tử đó.
Định vị theo tên
Định vị các phần tử theo tên rất giống với định vị theo ID, ngoại trừ việc chúng ta sử dụng “tên =” thay vào đó là tiền tố.
Target Định dạng: name=tên của phần tử
Trong phần trình diễn sau đây, chúng ta sẽ sử dụng Mercury Chuyến tham quan vì tất cả các yếu tố quan trọng đều có tên.
Bước 1) Hướng đến https://demo.guru99.com/test/newtours/ và sử dụng Firebug để kiểm tra hộp văn bản “Tên người dùng”. Lưu ý thuộc tính tên của nó.
Ở đây, chúng ta thấ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 sẽ có thể xác định được hộp văn bản Tên người dùng bằng cách tô sáng nó.
Cách xác định vị trí phần tử theo tên bằng bộ lọc
Bộ lọc có thể được sử dụng khi nhiều phần tử có cùng 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.
Target Định dạng: name=name_of_the_element filter=value_of_filter
Hãy xem 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 “hướng dẫn” làm tên người dùng và mật khẩu. Nó sẽ đưa bạn đến trang Flight Finder được hiển thị bên dưới.
Bước 2) Sử dụng firebug sử dụng thuộc tính VALUE.
Khi sử dụng Firebug, hãy lưu ý rằng các nút radio Khứ hồi và Một chiều có cùng tên “tripType”. Tuy nhiên, chúng có các thuộc tính VALUE khác nhau nên chúng ta có thể sử dụng từng thuộc tính đó làm bộ lọc của mình.
Bước 3) Bấm vào dòng đầu tiên.
- Trước tiên, chúng ta sẽ truy cập nút radio Một chiều. Nhấp vào dòng đầu tiên trên Trình chỉnh sửa.
- Trong hộp lệnh của Selenium IDE, nhập lệnh “click”.
- Trong tạp chí Target hộp, nhập “name=tripType value=oneway”. Phần “value=oneway” là bộ lọc của chúng tôi.
Bước 4) Nhấp vào nút Tìm.
Thông báo rằng Selenium IDE có thể đánh dấu nút radio Một chiều bằng màu xanh lá cây - nghĩa là chúng ta có thể truy cập thành công phần tử bằng 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ày. Lưu ý rằng nút radio Một chiều đã được chọn.
Bạn có thể thực hiện điều tương tự với nút radio Khứ hồi, 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
Loại định vị CSS này trong Selenium chỉ áp dụng cho văn bản siêu liên kết. Chúng tôi truy cập liên kết bằng cách thêm tiền tố mục tiêu của chúng tôi bằng “link=” và sau đó là văn bản siêu liên kết.
Target Định dạng: liên kết=link_text
Trong ví dụ này, chúng ta sẽ truy cập vào liên kết “ĐĂNG KÝ” được tìm thấy trên 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.
- Đến phần Mercury Trang chủ các tour du lịch.
Bước 2)
- Sử dụng Firebug, kiểm tra liên kết “ĐĂNG KÝ”. Văn bản liên kết được tìm thấy giữa và thẻ.
- Trong trường hợp này, văn bản liên kết của chúng tôi là “ĐĂNG KÝ”. Sao chép văn bản liên kết.
Bước 3) Sao chép văn bản liên kết trong Fireorms và dán nó vào Selenium IDE's Target hộp. Thêm tiền tố “link=" vào.
Bước 4) Bấm vào nút Tìm và nhận thấy rằng Selenium IDE đã có thể đánh dấu chính xác liên kết ĐĂNG KÝ.
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ẽ có thể nhấp vào liên kết ĐĂNG KÝ thành công và đưa bạn đến trang Đăng ký được hiển thị 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, là cách cấu trúc các phần tử HTML. Selenium IDE có thể sử dụng DOM để truy cập các thành phần trang. Nếu chúng ta sử dụng phương pháp này, chúng ta Target hộp sẽ luôn bắt đầu bằng “dom=document…”; tuy nhiên, tiền tố “dom=" thường bị xóa vì Selenium IDE có thể tự động diễn giải mọi thứ bắt đầu bằng từ khóa “tài liệu” thành đường dẫn trong DOM trong Selenium dù sao.
Có bốn cách cơ bản để định vị một phần tử thông qua DOM trong 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
Chúng ta hãy tập trung vào phương thức đầu tiên – sử dụng phương thức getElementById của DOM trong Selenium. Cú pháp sẽ là:
cú pháp
document.getElementById("id of the element")
- id của phần tử = đây là giá trị 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 một cặp dấu ngoặc đơn (“”).
Bước 1) Sử dụng trang demo này https://demo.guru99.com/test/facebook.html Điều hướng đến đó và sử dụng Firebug để kiểm tra hộp kiểm “Giữ tôi đăng nhập”. Ghi lại ID của nó.
Chúng ta có thể thấy rằng ID mà chúng ta nên sử dụng là “persist_box”.
Bước 2) Mở Selenium IDE và trong Target hộp, nhập “document.getElementById(“persist_box”)” và nhấp vào Tìm. Selenium IDE có thể định vị được hộp kiểm “Giữ tôi đăng nhập”. Mặc dù không thể làm nổi bật phần bên trong của hộp kiểm, Selenium IDE vẫn có thể bao quanh phần tử bằng đường viền màu xanh lá cây tươi sáng như hình bên dưới.
Định vị theo DOM – getElementsByName
Phương thức getElementById chỉ có thể truy cập một phần tử tại một thời điểm và đó là phần tử có ID mà bạn đã chỉ định. Phương thức getElementsByName thì khác. Nó thu thập một mảng các phần tử có tên mà bạn đã chỉ định. Bạn truy cập các phần tử riêng lẻ bằng chỉ mục bắt đầu từ 0.
|
|
Getelementbyid
|
|
|
getElementsByName
|
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) Hướng đến Mercury Trang chủ của Tours và đăng nhập bằng “hướng dẫn” làm tên người dùng và mật khẩu. Firefox sẽ đưa bạn đến màn hình Tìm chuyến bay.
Bước 2) Sử dụng Firebug, kiểm tra ba nút radio ở phần dưới cùng của trang (nút radio Hạng phổ thông, Hạng thương gia và Hạng nhất). Lưu ý rằng tất cả chúng đều có cùng tên là “servClass”.
Bước 3) Trước tiên chúng ta hãy truy cập vào nút radio “Hạng phổ thông”. Trong cả ba nút radio này, phần tử này đứng đầu nên nó có chỉ số là 0. Trong Selenium IDE, nhập “document.getElementsByName(“servClass”)[0]” và nhấp vào nút Tìm. Selenium IDE sẽ có thể xác định chính xác nút radio Hạng phổ thông.
Bước 4) Thay đổi số chỉ mục thành 1 để Target bây giờ sẽ trở thành document.getElementsByName(“servClass”)[1]. Nhấp vào nút Tìm và Selenium IDE sẽ có thể đánh dấu nút radio “Hạng doanh nghiệp” như hiển thị bên dưới.
Định vị theo DOM – dom:name
Như đã đề cập trước đó, phương pháp này sẽ chỉ áp dụng nếu phần tử bạn đang truy cập được chứa trong một biểu mẫu đã đặt 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 tên của thẻ biểu mẫu chứa phần tử 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 Firebug để kiểm tra hộp văn bản Tên người dùng. Lưu ý rằng nó được chứa trong một biểu mẫu có tên là “home”.
Bước 2) In Selenium IDE, nhập “document.forms[“home”].elements[“userName”]” và nhấp vào nút Tìm. Selenium IDE phải có khả năng truy cập phần tử thành công.
Định vị theo DOM – dom:index
Phương pháp này áp dụng ngay cả khi phần tử không nằm trong biểu mẫu được đặt tên vì nó sử dụng chỉ mục của biểu mẫu chứ không phải tên của 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 đối với toàn bộ trang
- chỉ mục của phần tử = số chỉ mục (bắt đầu từ 0) của phần tử đối với toàn bộ biểu mẫu chứa nó
Chúng ta sẽ truy cập vào hộp văn bản “Điện thoại” bên trong Mercury Trang đăng ký tour. Biểu mẫu trong trang đó không có thuộc tính tên và ID, vì vậy đây sẽ là một ví dụ điển hình.
Bước 1) Hướng đến Mercury Trang Đăng ký Tour và kiểm tra hộp văn bản Điện thoại. Lưu ý rằng biểu mẫu chứa nó không có thuộc tính ID và tên.
Bước 2) Nhập “document.forms[0].elements[3]” vào Selenium IDE's Target hộp và nhấp vào nút Tìm. Selenium IDE phải có thể truy cập vào hộp văn bản Điện thoại một cách chính xác.
Bước 3) Ngoài ra, bạn có thể sử dụng tên của phần tử thay vì chỉ mục của nó và nhận được kết quả tương tự. Nhập “document.forms[0].elements[“phone”]” vào Selenium IDE's Target hộp. Hộp văn bản Điện thoại vẫn sẽ được tô sáng.
Định vị bằng XPath
XPath là ngôn ngữ được sử dụng khi định vị các nút XML (Ngôn ngữ đánh dấu mở rộng). Vì HTML có thể được coi là sự triển khai của XML nên chúng ta cũng có thể sử dụng Xpath trong việc định vị các phần tử HTML.
- Lợi thế: Nó có thể truy cập hầu hết mọi phần tử, ngay cả những phần tử không có thuộc tính lớp, tên hoặc id.
- Bất lợi: Đây là phương pháp phức tạp nhất để xác định các phần tử vì có quá nhiều quy tắc và cân nhắc khác nhau.
May mắn thay, Firebug có thể tự động tạo XPath Selenium bộ định vị. Trong ví dụ sau, chúng ta sẽ truy cập vào một hình ảnh mà không thể truy cập được thông qua các phương pháp mà chúng ta đã thảo luận trước đó.
Bước 1) Hướng đến Mercury Trang chủ Tours và sử dụng Firebug để kiểm tra hình chữ nhật màu cam bên phải hộp “Liên kết” màu vàng. Tham khảo hình ảnh bên dưới.
Bước 2) Nhấp chuột phải vào mã HTML của phần tử rồi 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 lên “/” trong Target hộp sau đó dán XPath mà chúng ta đã sao chép ở bước trước. Mục nhập trong của bạn Target hộp bây giờ sẽ bắt đầu bằng hai dấu gạch chéo “//”.
Bước 4) Bấm vào nút Tìm. Selenium IDE sẽ có thể làm nổi bật hộp màu cam như hình dưới đây.
Tổng kết
Cú pháp sử dụng định vị
| Phương pháp | Target cú pháp | Ví dụ |
|---|---|---|
| Theo ID | id= id_of_the_element | id=email |
| Bằng tên | name=name_of_the_element | tên=tên người dùng |
| Theo Tên Sử dụng Bộ lọc | name=name_of_the_element filter=value_of_filter | name=tripType value=một chiều |
| Bằng văn bản liên kết | liên kết=link_text | liên kết=ĐĂNG KÝ |
