Bộ định vị là gì?
Bộ định vị là một lệnh cho Selenium IDE biết phần tử GUI nào (chẳng hạn như Hộp văn bản, Nút, Hộp kiểm, v.v.) cần hoạt động trên đó. Việc xác định các phần tử GUI chính xác là điều kiện tiên quyết để tạo một tập lệnh tự động hóa. Nhưng việc xác định chính xác các yếu tố GUI khó hơn nhiều so với âm thanh. Đô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ả! Do đó, Selenium cung cấp một số Bộ định vị để định vị chính xác phần tử GUICác loại CSS Locator khác nhau trong Selenium IDE
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 Thử nghiệm của bạn . Trong hướng dẫn này, chúng tôi sẽ chuyển đổi giữa Facebook, các tour.demoaut mới trên cơ sở bộ định vị mà các ứng dụng này hỗ trợ. Tương tự như vậy trong dự án Thử nghiệm của bạn, bạn sẽ chọn bất kỳ trình đị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ị bằng ID
Đây là cách phổ biến nhất để định vị các phần tử vì ID được cho là duy nhất cho mỗi phần tử.
Định dạng mục tiêu: id = id của phần tử
Đối với ví dụ này, chúng tôi sẽ sử dụng Facebook làm ứng dụng thử nghiệm của mình vì Mercury Tours 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 http://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 chạy Selenium IDE và nhập "id = email" vào hộp Target. Nhấp vào nút Tìm và nhận thấy rằng hộp văn bản "Email hoặc Điện thoại" được đánh dấu bằng màu vàng và có viền màu xanh lục, có nghĩa là Selenium IDE đã có thể định vị phần tử đó một cách chính xác.
Đị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 tôi sử dụng tiền tố "name =" để thay thế.
Định dạng mục tiêu: name = tên của phần tử
Trong phần minh họa sau đây, bây giờ chúng ta sẽ sử dụng Mercury Tours vì tất cả các yếu tố quan trọng đều có tên.
Bước 1. Điều hướng đến http://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". Hãy lưu ý đến thuộc tính tên của nó.
Ở đây, chúng ta thấy rằng tên của phần tử là "userName".
Bước 2. Trong Selenium IDE, nhập "name = userName" vào hộp Target và nhấp vào nút Find. Selenium IDE sẽ có thể định vị hộp văn bản Tên người dùng bằng cách tô sáng nó.
Định vị 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.
Định dạng mục tiêu : 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 Tours bằng cách 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 Tìm chuyến bay được hiển thị bên dưới.
Bước 2. Sử dụng Firebug, lưu ý rằng các nút radio Round Trip và One Way có cùng tên "tripType". Tuy nhiên, chúng có các thuộc tính GIÁ TRỊ khác nhau nên chúng tôi có thể sử dụng từng thuộc tính này làm bộ lọc của mình.
Bước 3.
- Trước tiên, chúng ta sẽ truy cập vào nút radio One Way. 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 hộp Mục tiêu, 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 và nhận thấy rằng Selenium IDE có thể đánh dấu nút radio One Way với màu xanh lục - nghĩa là chúng tôi có thể truy cập thành công phần tử bằng cách sử dụng thuộc tính VALUE của nó.
Bước 5. Nhấn phím "X" trên bàn phím của bạn để 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ể làm điều tương tự chính xác với nút radio Chuyến đi khứ hồi, lần này, sử dụng "name = tripType value = roundtrip" làm mục tiêu của bạn.
Đị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 các 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 đặt 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.
Định dạng mục tiêu : link = link_text
Trong ví dụ này, chúng tôi sẽ truy cập liên kết "ĐĂNG KÝ" có trên trang chủ của Mercury Tours.
Bước 1.
- Trước tiên, hãy đảm bảo rằng bạn đã đăng xuất khỏi Mercury Tours.
- Truy cập trang chủ của Mercury Tours.
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à các 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 Firebug và dán nó vào hộp Target của Selenium IDE. Tiền tố nó bằng "link =".
Bước 4. Nhấp vào nút Tìm và nhận thấy rằng Selenium IDE đã có thể đánh dấu liên kết ĐĂNG KÝ 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 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ý hiển thị bên dưới.
Định vị bằng Bộ chọn CSS
Bộ chọn CSS trong Selenium là các mẫu chuỗi được sử dụng để xác định một phần tử dựa trên sự kết hợp của thẻ HTML, id, lớp và thuộc tính. Định vị bằng CSS Selectors trong Selenium phức tạp hơn các phương pháp trước, nhưng đây là chiến lược định vị phổ biến nhất của người dùng Selenium nâng cao vì nó có thể truy cập ngay cả những phần tử không có ID hoặc tên.
Bộ chọn CSS trong Selenium có nhiều định dạng, nhưng chúng tôi sẽ chỉ tập trung vào những định dạng phổ biến nhất.
- Thẻ và ID
- Gắn thẻ và lớp
- Thẻ và thuộc tính
- Thẻ, lớp và thuộc tính
- Văn bản bên trong
Khi sử dụng chiến lược này, chúng tôi luôn đặt trước hộp Mục tiêu bằng "css =" như sẽ được hiển thị trong các ví dụ sau.
Định vị bằng Bộ chọn CSS - Thẻ và ID
Một lần nữa, chúng tôi sẽ sử dụng hộp văn bản Email của Facebook trong ví dụ này. Như bạn có thể nhớ, nó có một ID là "email" và chúng tôi đã truy cập nó trong phần "Định vị bằng ID". Lần này, chúng ta sẽ sử dụng Selenium CSS Selector có ID để truy cập vào chính phần tử đó.
|
Cú pháp |
Sự miêu tả |
|---|---|
|
css = tag # id |
|
Hãy nhớ rằng ID luôn đứng trước dấu thăng (#).
Bước 1. Điều hướng đến www.facebook.com. Sử dụng Firebug, kiểm tra hộp văn bản "Email hoặc Điện thoại".
Tại thời điểm này, hãy lưu ý rằng thẻ HTML là "đầu vào" và ID của nó là "email". Vì vậy, cú pháp của chúng ta sẽ là "css = input # email".
Bước 2. Nhập "css = input # email" vào ô Target của Selenium IDE và nhấp vào nút Find. Selenium IDE sẽ có thể làm nổi bật phần tử đó.
Định vị bằng Bộ chọn CSS - Thẻ và Lớp
Định vị bằng Bộ chọn CSS trong Selenium bằng cách sử dụng thẻ HTML và tên lớp tương tự như sử dụng thẻ và ID, nhưng trong trường hợp này, dấu chấm (.) Được sử dụng thay vì dấu băm.
|
Cú pháp |
Sự miêu tả |
|---|---|
|
css = thẻ. lớp học |
|
Bước 1. Truy cập trang demo http://demo.guru99.com/test/facebook.html và sử dụng Firebug để kiểm tra hộp văn bản "Email hoặc Điện thoại". Lưu ý rằng thẻ HTML của nó là "input" và lớp của nó là "inputtext."
Bước 2. Trong Selenium IDE, nhập "css = input.inputtext" vào hộp Target và nhấp vào Find. Selenium IDE sẽ có thể nhận dạng hộp văn bản Email hoặc Điện thoại.
Lưu ý rằng khi nhiều phần tử có cùng thẻ và tên HTML, thì chỉ phần tử đầu tiên trong mã nguồn mới được nhận dạng . Sử dụng Firebug, kiểm tra hộp văn bản Mật khẩu trong Facebook và nhận thấy rằng nó có cùng tên với hộp văn bản Email hoặc Điện thoại.
Lý do tại sao chỉ có hộp văn bản Email hoặc Điện thoại được đánh dấu trong hình minh họa trước là vì nó xuất hiện đầu tiên trong nguồn trang của Facebook.
Định vị bằng Bộ chọn CSS - Thẻ và Thuộc tính
Chiến lược này sử dụng thẻ HTML và một thuộc tính cụ thể của phần tử được truy cập.
|
Cú pháp |
Sự miêu tả |
|---|---|
|
css = tag [thuộc tính = giá trị] |
|
Bước 1. Điều hướng đến trang Đăng ký của Mercury Tours (http://demo.guru99.com/test/newtours/register.php) và kiểm tra hộp văn bản "Họ". Hãy lưu ý đến thẻ HTML của nó ("input" trong trường hợp này) và tên của nó ("lastName").
Bước 2. Trong Selenium IDE, nhập "css = input [name = lastName]" vào hộp Target và nhấp vào Find. Selenium IDE sẽ có thể truy cập thành công hộp Họ.
Khi nhiều phần tử có cùng một thẻ và thuộc tính HTML, thì chỉ phần tử đầu tiên mới được nhận dạng . Hành vi này tương tự như việc định vị các phần tử bằng cách sử dụng bộ chọn CSS có cùng thẻ và lớp.
Định vị bằng Bộ chọn CSS - thẻ, lớp và thuộc tính
| Cú pháp | Sự miêu tả |
|---|---|
| css = tag.class [thuộc tính = giá trị] |
|
Bước 1. Truy cập trang demo http://demo.guru99.com/test/facebook.html và sử dụng Firebug để kiểm tra hộp nhập 'Email hoặc Điện thoại' và 'Mật khẩu'. Lưu ý về thẻ HTML, lớp và thuộc tính của chúng. Đối với ví dụ này, chúng tôi sẽ chọn các thuộc tính 'tabindex' của chúng.
Bước 2. Trước tiên, chúng ta sẽ truy cập vào hộp văn bản 'Email hoặc Điện thoại'. Do đó, chúng tôi sẽ sử dụng giá trị tabindex là 1. Nhập "css = input.inputtext [tabindex = 1]" vào hộp Target của Selenium IDE và nhấp vào Find. Hộp nhập 'Email hoặc Điện thoại' sẽ được đánh dấu.
Bước 3. Để truy cập hộp nhập Mật khẩu, chỉ cần thay thế giá trị của thuộc tính tabindex. Nhập "css = input.inputtext [tabindex = 2]" vào hộp Target và nhấp vào nút Find. Selenium IDE phải có thể xác định thành công hộp văn bản Mật khẩu.
Định vị bằng Bộ chọn CSS - văn bản bên trong
Như bạn có thể nhận thấy, các nhãn HTML hiếm khi được cung cấp các thuộc tính id, tên hoặc lớp. Vì vậy, làm thế nào để chúng tôi truy cập chúng? Câu trả lời là thông qua việc sử dụng các văn bản bên trong của họ. Văn bản bên trong là các mẫu chuỗi thực tế mà nhãn HTML hiển thị trên trang.
|
Cú pháp |
Sự miêu tả |
|---|---|
|
css = tag: chứa ("văn bản bên trong") |
|
Bước 1. Điều hướng đến trang chủ của Mercury Tours (http://demo.guru99.com/test/newtours/) và sử dụng Firebug để điều tra nhãn "Mật khẩu". Hãy lưu ý đến thẻ HTML của nó (trong trường hợp này là "phông chữ") và lưu ý rằng nó không có thuộc tính lớp, id hoặc tên.
Bước 2. Gõ css = font: chứa ("Mật khẩu:") vào hộp Target của Selenium IDE và nhấp vào Tìm. Selenium IDE sẽ có thể truy cập vào nhãn Mật khẩu như thể hiện trong hình bên dưới.
Bước 3. Lần này, thay thế văn bản bên trong bằng "Boston" để Mục tiêu của bạn bây giờ sẽ trở thành "css = font: chứa (" Boston ")". Nhấp vào Tìm. Bạn sẽ nhận thấy rằng nhãn "Boston đến San Francisco" được tô sáng. Điều này cho bạn thấy rằng Selenium IDE có thể truy cập một nhãn dài ngay cả khi bạn chỉ chỉ ra từ đầu tiên của văn bản bên trong của nó.
Định vị bằng DOM (Mô hình đối tượng tài liệu)
Nói một cách đơn giản, Mô hình Đối tượng Tài liệu (DOM) là cách mà các phần tử HTML được cấu trúc. Selenium IDE có thể sử dụng DOM trong việc truy cập các phần tử trang. Nếu chúng ta sử dụng phương pháp này, hộp Target của chúng ta sẽ luôn bắt đầu bằng "dom = document…"; tuy nhiên, tiền tố "dom =" thường bị loại bỏ vì Selenium IDE có thể tự động diễn giải bất kỳ thứ gì bắt đầu bằng từ khóa "document" thành một đường dẫn trong DOM trong Selenium.
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 phần tử trong một 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 pháp đầu tiên - sử dụng phương thức getElementById của DOM trong Selenium. Cú pháp sẽ là:
|
Cú pháp |
Sự miêu tả |
|---|---|
|
document.getElementById ("id của phần tử") |
id của phần tử = đây là giá trị của thuộc tính ID của phần tử được 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 http://demo.guru99.com/test/facebook.html Điều hướng đến nó và sử dụng Firebug để kiểm tra hộp kiểm "Giữ cho 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à "pers_box".
Bước 2. Mở Selenium IDE và trong hộp Target, nhập "document.getElementById (" pers_box ")" và nhấp vào Tìm. Selenium IDE sẽ có thể định vị hộp kiểm "Giữ cho tôi đăng nhập". Mặc dù nó không thể làm nổi bật bên trong hộp kiểm, Selenium IDE vẫn có thể bao quanh phần tử bằng một đường viền màu xanh lá cây tươi sáng như hình dưới đây.
Định vị bằng 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 cách sử dụng chỉ mục bắt đầu từ 0.
|
getElementById
|
||
|
getElementsByName
|
||
|
Cú pháp |
Sự miêu tả |
|---|---|
|
document.getElementsByName ("tên") [chỉ mục] |
|
Bước 1. Điều hướng đến Trang chủ của Mercury Tours và đăng nhập bằng cách sử dụ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 Trì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 (các 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 một tên là "servClass".
Bước 3. Trước tiên, hãy để chúng tôi truy cập vào nút radio "Hạng phổ thông". Trong tất cả ba nút radio này, phần tử này đứng trước, vì vậy 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 của bạn 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 thương gia", như được 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 được đặt tên.
|
Cú pháp |
Sự miêu tả |
|---|---|
|
document.forms ["tên của biểu mẫu"] .elements ["tên của phần tử"] |
|
Bước 1. Điều hướng đến trang chủ Mercury Tours (http://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à "nhà".
Bước 2. Trong Selenium IDE, gõ "document.forms [" home "]. Elements [" userName "]" và nhấp vào nút Tìm. Selenium IDE phải có thể truy cập phần tử thành công.
Định vị bằng 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 |
Sự miêu tả |
|---|---|
|
document.forms [chỉ mục của biểu mẫu] .elements [chỉ mục của phần tử] |
|
Chúng tôi sẽ truy cập vào hộp văn bản "Điện thoại" trong trang Đăng ký của Mercury Tours. Biểu mẫu trong trang đó không có tên và thuộc tính ID, vì vậy đây sẽ là một ví dụ điển hình.
Bước 1. Điều hướng đến trang Đăng ký Mercury Tours và chọn 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 hộp Target của Selenium IDE và nhấp vào nút Tìm. Selenium IDE sẽ có thể truy cập 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à thu được kết quả tương tự. Nhập "document.forms [0] .elements [" phone "]" vào hộp Target của Selenium IDE. Hộp văn bản Điện thoại sẽ vẫn được đánh dấu.
Đị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à một triển khai của XML, chúng ta cũng có thể sử dụng XPath để định vị các phần tử HTML.
Ưu điểm: 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.
Nhược điểm: Đây là phương pháp xác định các yếu tố phức tạp nhất vì có quá nhiều quy tắc và sự cân nhắc khác nhau.
May mắn thay, Firebug có thể tự động tạo bộ định vị XPath Selenium. Trong ví dụ sau, chúng ta sẽ truy cập vào một hình ảnh 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. Điều hướng đến Trang chủ của Mercury Tours và sử dụng Firebug để kiểm tra hình chữ nhật màu cam ở bên phải của 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ử và sau đó chọn tùy chọn "Sao chép XPath".
Bước 3. Trong Selenium IDE, gõ một dấu gạch chéo "/" vào hộp Target sau đó dán XPath mà chúng ta đã sao chép ở bước trước. Mục nhập trong hộp Target của bạn bây giờ sẽ bắt đầu bằng hai dấu gạch chéo về phía trước "//".
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óm lược
Cú pháp sử dụng bộ định vị|
phương pháp |
Cú pháp đích |
Thí dụ |
|---|---|---|
| Theo ID | id = id_of_the_element | id = email |
| Bằng tên | name = name_of_the_element | name = userName |
| Theo tên bằng cách sử dụng bộ lọc | name = name_of_the_element filter = value_of_filter | name = tripType value = oneway |
| Bằng văn bản liên kết | link = link_text | link = ĐĂNG KÝ |
| Thẻ và ID | css = tag # id | css = input # email |
| Tag và Class | css = thẻ. lớp học | css = input.inputtext |
| Thẻ và thuộc tính | css = tag [thuộc tính = giá trị] | css = input [name = lastName] |
| Thẻ, Lớp và Thuộc tính | css = thẻ. lớp [thuộc tính = giá trị] | css = input.inputtext [tabindex = 1] |