Watir - Định vị phần tử web
Trong Watir để thử nghiệm, bạn cần xác định vị trí các phần tử và nó có thể được thực hiện theo nhiều cách khác nhau - bằng cách sử dụng id, lớp hoặc văn bản của phần tử.
Trong chương này, chúng ta sẽ thấy một số ví dụ cho thấy các cách khác nhau để định vị các phần tử.
Sử dụng ID của phần tử
Trang thử nghiệm
<html>
<head>
<title>Testing UI using Watir</title>
</head>
<body>
<script type = "text/javascript">
function wsentered() {
console.log("inside wsentered");
var firstname = document.getElementById("firstname");
if (firstname.value != "") {
document.getElementById("displayfirstname").innerHTML =
"The name entered is : " + firstname.value;
document.getElementById("displayfirstname").style.display = "";
}
}
</script>
<div id = "divfirstname">
Enter First Name :
<input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()" />
</div>
<br/>
<br/>
<div style = "display:none;" id = "displayfirstname">
</div>
</body>
</html>
Thí dụ
require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textbox.html')
t = b.text_field(id: 'firstname') // using the id of the textbox to locate the textbox
t.exists?
t.set 'Riya Kapoor'
b.screenshot.save 'textboxbefore.png'
t.value
t.fire_event('onchange')
b.screenshot.save 'textboxafter.png'
Trong ví dụ này, chúng tôi đang sử dụng id của phần tử hộp văn bản để định vị nó và đặt giá trị.
t = b.text_field(id: 'firstname')
Đầu ra
Trong trường hợp bạn cần định vị div, span hoặc bất kỳ thẻ html nào khác, bạn có thể thực hiện tương tự bằng cách sử dụng id như sau:
Đối với div
browser.div(id: "divid")
browser.div(id: /divid/)
Trong khoảng
browser.span(id: "spanid")
browser.span(id: /spanid/)
Sử dụng NAME của phần tử
Trang thử nghiệm
<html>
<head>
<title>Testing UI using Watir</title>
</head>
<body>
<script type = "text/javascript">
function wsentered() {
console.log("inside wsentered");
var firstname = document.getElementById("firstname");
if (firstname.value != "") {
document.getElementById("displayfirstname").innerHTML =
"The name entered is : " + firstname.value;
document.getElementById("displayfirstname").style.display = "";
}
}
</script>
<div id = "divfirstname">
Enter First Name :
<input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()" />
</div>
<br/>
<br/>
<div style = "display:none;" id = "displayfirstname">
</div>
</body>
</html>
Thí dụ
require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textbox.html')
t = b.text_field(name: 'firstname') // name is used to locate the textbox element
t.exists?
t.set 'Riya Kapoor'
b.screenshot.save 'textboxbefore.png'
t.value
t.fire_event('onchange')
b.screenshot.save 'textboxafter.png'
Đầu ra
Sử dụng tên thẻ
Bạn có thể định vị bất kỳ phần tử html nào bạn muốn bằng cách sử dụng trực tiếp thẻ html như hình dưới đây.
Đối với div
browser.div(id: "divid")
browser.div(id: /divid/)
Trong khoảng
browser.span(id: "spanid")
browser.span(id: /spanid/)
Đối với thẻ p
browser.p(id: "ptag")
browser.p(id: /ptag/)
Đối với nút
browser.button(id: "btnid")
browser.button(id: /btnid/)
Sử dụng tên lớp
Bạn có thể định vị phần tử bằng tên lớp của nó. Nó có thể được thực hiện như hình dưới đây -
Đối với div
browser.div(class: "divclassname")
browser.div(class: /divclassname/)
Trong khoảng
browser.span(class: "spanclassname”)
browser.span(class: /spanclassname/)
Đối với thẻ p
browser.p(class: "pclassname")
browser.p(class: /pclassname/)
Đối với nút
browser.button(class: "btnclassname")
browser.button(class: /btnclassname/)
Đối với hộp văn bản
browser.text_field(class: 'txtclassname')
browser.text_field(class: /txtclassname/)
Bạn cũng có thể vượt qua nhiều lớp như hình dưới đây -
Đối với div
browser.div(class: ["class1", "class2"])
Sử dụng văn bản
Đây là một cách khác để định vị các phần tử bằng cách sử dụng các phần tử với một văn bản. Ví dụ -
browser.button(text: "button text")
browser.button(text: /button text/)
Sử dụng nhãn
Bạn có thể sử dụng nhãn của phần tử để định vị nó như hình dưới đây -
browser.text_field(label: "text here"))
browser.text_field(label: /text here/))
Sử dụng thuộc tính dữ liệu
Trong trường hợp bạn có thuộc tính dữ liệu cho các thẻ html của mình, bạn có thể xác định vị trí các phần tử bằng cách sử dụng nó như hình dưới đây -
Ví dụ: bạn có thể xác định vị trí thẻ như hình dưới đây -
<div data-type = "test1"></div>
Bạn có thể xác định vị trí div như sau:
browser.div(data-type: 'test1'))
browser.div(data-type: /test1/))
Sử dụng thuộc tính tùy chỉnh
Bạn cũng có thể xác định vị trí các phần tử bằng cách sử dụng các thuộc tính tùy chỉnh như được hiển thị bên dưới -
Ví dụ về phần tử html
<div itemprop = ”content”>
….
</div>
Bạn có thể xác định vị trí div như sau:
browser.div(itemprop: ‘content'))
browser.div(itemprop: /content/))
Sử dụng thuộc tính hiển thị
Phần tử sử dụng thuộc tính hiển thị có thể được đặt như hình dưới đây -
browser.div(visible: true)
browser.div(visible: false)