Watir - Web Öğelerini Bulma
Watir'de test için, öğeleri bulmanız gerekir ve bu, öğenin kimliği, sınıfı veya metni kullanılarak farklı şekillerde yapılabilir.
Bu bölümde, elemanları yerleştirmenin farklı yollarını gösteren birkaç örnek göreceğiz.
Öğenin Kimliğini Kullanma
Test sayfası
<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>Misal
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'Bu örnekte, onu bulmak ve değerini ayarlamak için metin kutusu öğesinin id'sini kullanıyoruz.
t = b.text_field(id: 'firstname')Çıktı
Div, span veya başka herhangi bir html etiketini bulmanız gerekirse, id kullanarak aynısını aşağıdaki gibi yapabilirsiniz -
Div için
browser.div(id: "divid")
browser.div(id: /divid/)Aralık için
browser.span(id: "spanid")
browser.span(id: /spanid/)Öğenin NAME Kullanılıyor
Test sayfası
<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>Misal
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'Çıktı
Etiket Adını Kullanma
İstediğiniz html öğelerini, aşağıda gösterildiği gibi doğrudan html etiketini kullanarak bulabilirsiniz.
Div için
browser.div(id: "divid")
browser.div(id: /divid/)Aralık için
browser.span(id: "spanid")
browser.span(id: /spanid/)P etiketi için
browser.p(id: "ptag")
browser.p(id: /ptag/)Düğme için
browser.button(id: "btnid")
browser.button(id: /btnid/)Sınıf Adını Kullanma
Sınıf adını kullanarak öğeyi bulabilirsiniz. Aşağıda gösterildiği gibi yapılabilir -
Div için
browser.div(class: "divclassname")
browser.div(class: /divclassname/)Aralık için
browser.span(class: "spanclassname”)
browser.span(class: /spanclassname/)P etiketi için
browser.p(class: "pclassname")
browser.p(class: /pclassname/)Düğme için
browser.button(class: "btnclassname")
browser.button(class: /btnclassname/)Metin kutusu için
browser.text_field(class: 'txtclassname')
browser.text_field(class: /txtclassname/)Ayrıca, aşağıda gösterildiği gibi birden fazla sınıfı geçebilirsiniz -
Div için
browser.div(class: ["class1", "class2"])Metin Kullanımı
Bu, öğeleri metinle birlikte kullanarak bulmanın başka bir yoludur. Örneğin -
browser.button(text: "button text")
browser.button(text: /button text/)Etiketi Kullanma
Aşağıda gösterildiği gibi bulmak için öğenin etiketini kullanabilirsiniz -
browser.text_field(label: "text here"))
browser.text_field(label: /text here/))Veri Özelliklerini Kullanma
HTML etiketleriniz için veri özniteliklerine sahipseniz, aşağıda gösterildiği gibi kullanarak öğeleri bulabilirsiniz -
Örneğin, etiketi aşağıda gösterildiği gibi bulabilirsiniz -
<div data-type = "test1"></div>Div'i şu şekilde bulabilirsiniz -
browser.div(data-type: 'test1'))
browser.div(data-type: /test1/))Özel Nitelikleri Kullanma
Öğeleri, aşağıda gösterildiği gibi özel öznitelikleri kullanarak da bulabilirsiniz -
Html öğesi örneği
<div itemprop = ”content”>
….
</div>Div'i şu şekilde bulabilirsiniz -
browser.div(itemprop: ‘content'))
browser.div(itemprop: /content/))Görünür Özniteliği Kullanma
Visible özelliğini kullanan öğe, aşağıda gösterildiği gibi yerleştirilebilir -
browser.div(visible: true)
browser.div(visible: false)