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)