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)