Watir - Menemukan Elemen Web
Di Watir untuk pengujian, Anda perlu menemukan elemen dan itu dapat dilakukan dengan cara yang berbeda - dengan menggunakan id, kelas atau teks dari elemen tersebut.
Dalam bab ini, kita akan melihat beberapa contoh yang menunjukkan berbagai cara untuk menentukan lokasi elemen.
Menggunakan ID dari Elemen
Halaman pengujian
<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>Contoh
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'Dalam contoh ini, kami menggunakan id dari elemen kotak teks untuk menemukannya dan mengatur nilainya.
t = b.text_field(id: 'firstname')Keluaran
Jika Anda perlu menemukan div, span atau tag html lainnya, Anda dapat melakukan hal yang sama menggunakan id sebagai berikut -
Untuk div
browser.div(id: "divid")
browser.div(id: /divid/)Untuk rentang
browser.span(id: "spanid")
browser.span(id: /spanid/)Menggunakan NAMA Elemen
Halaman pengujian
<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>Contoh
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'Keluaran
Menggunakan Nama Tag
Anda dapat menemukan elemen html yang Anda inginkan dengan langsung menggunakan tag html seperti yang ditunjukkan di bawah ini.
Untuk div
browser.div(id: "divid")
browser.div(id: /divid/)Untuk rentang
browser.span(id: "spanid")
browser.span(id: /spanid/)Untuk p tag
browser.p(id: "ptag")
browser.p(id: /ptag/)Untuk tombol
browser.button(id: "btnid")
browser.button(id: /btnid/)Menggunakan Nama Kelas
Anda dapat menemukan elemen menggunakan nama kelasnya. Itu bisa dilakukan seperti yang ditunjukkan di bawah ini -
Untuk div
browser.div(class: "divclassname")
browser.div(class: /divclassname/)Untuk rentang
browser.span(class: "spanclassname”)
browser.span(class: /spanclassname/)Untuk p tag
browser.p(class: "pclassname")
browser.p(class: /pclassname/)Untuk tombol
browser.button(class: "btnclassname")
browser.button(class: /btnclassname/)Untuk kotak teks
browser.text_field(class: 'txtclassname')
browser.text_field(class: /txtclassname/)Anda juga dapat lulus beberapa kelas seperti yang ditunjukkan di bawah ini -
Untuk div
browser.div(class: ["class1", "class2"])Menggunakan Teks
Ini adalah cara lain untuk menemukan elemen dengan menggunakan elemen dengan teks. Misalnya -
browser.button(text: "button text")
browser.button(text: /button text/)Menggunakan Label
Anda dapat menggunakan label elemen untuk menemukannya seperti yang ditunjukkan di bawah ini -
browser.text_field(label: "text here"))
browser.text_field(label: /text here/))Menggunakan Atribut Data
Jika Anda memiliki atribut data ke tag html Anda, Anda dapat menemukan elemen yang menggunakannya seperti yang ditunjukkan di bawah ini -
Misalnya, Anda dapat menemukan tag seperti yang ditunjukkan di bawah ini -
<div data-type = "test1"></div>Anda dapat menemukan div sebagai berikut -
browser.div(data-type: 'test1'))
browser.div(data-type: /test1/))Menggunakan Atribut Kustom
Anda juga dapat menemukan elemen menggunakan atribut khusus seperti yang ditunjukkan di bawah ini -
Contoh elemen html
<div itemprop = ”content”>
….
</div>Anda dapat menemukan div sebagai berikut -
browser.div(itemprop: ‘content'))
browser.div(itemprop: /content/))Menggunakan Atribut Terlihat
Elemen yang menggunakan atribut terlihat dapat ditempatkan seperti yang ditunjukkan di bawah ini -
browser.div(visible: true)
browser.div(visible: false)