वॉटरिर - वेब तत्वों का पता लगाना

परीक्षण के लिए वाटर में, आपको तत्वों का पता लगाने की आवश्यकता है और यह विभिन्न तरीकों से किया जा सकता है - तत्व की आईडी, कक्षा या पाठ का उपयोग करके।

इस अध्याय में, हम कुछ उदाहरण देखेंगे जो तत्वों का पता लगाने के विभिन्न तरीके दिखाते हैं।

तत्व की आईडी का उपयोग करना

परीक्षण पृष्ठ

<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>

उदाहरण

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'

इस उदाहरण में, हम इसे खोजने और मान सेट करने के लिए टेक्स्टबॉक्स तत्व की आईडी का उपयोग कर रहे हैं।

t = b.text_field(id: 'firstname')

उत्पादन

यदि आपको div, span या किसी अन्य html टैग का पता लगाने की आवश्यकता है, तो आप निम्नानुसार आईडी का उपयोग कर सकते हैं -

डिव के लिए

browser.div(id: "divid")
browser.div(id: /divid/)

स्पान के लिए

browser.span(id: "spanid")
browser.span(id: /spanid/)

तत्व का नाम का उपयोग करना

परीक्षण पृष्ठ

<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>

उदाहरण

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'

उत्पादन

टैग नाम का उपयोग करना

आप नीचे दिखाए गए अनुसार HTML टैग का उपयोग करके सीधे अपने इच्छित किसी भी HTML तत्वों का पता लगा सकते हैं।

डिव के लिए

browser.div(id: "divid")
browser.div(id: /divid/)

स्पान के लिए

browser.span(id: "spanid")
browser.span(id: /spanid/)

पी टैग के लिए

browser.p(id: "ptag")
browser.p(id: /ptag/)

बटन के लिए

browser.button(id: "btnid")
browser.button(id: /btnid/)

कक्षा के नाम का उपयोग करना

आप इसके क्लासनाम का उपयोग करके तत्व का पता लगा सकते हैं। इसे नीचे दिखाए अनुसार किया जा सकता है -

डिव के लिए

browser.div(class: "divclassname")
browser.div(class: /divclassname/)

स्पान के लिए

browser.span(class: "spanclassname”)
browser.span(class: /spanclassname/)

पी टैग के लिए

browser.p(class: "pclassname")
browser.p(class: /pclassname/)

बटन के लिए

browser.button(class: "btnclassname")
browser.button(class: /btnclassname/)

टेक्स्टबॉक्स के लिए

browser.text_field(class: 'txtclassname')
browser.text_field(class: /txtclassname/)

आप नीचे दिखाए गए अनुसार कई कक्षाएं भी पास कर सकते हैं -

डिव के लिए

browser.div(class: ["class1", "class2"])

पाठ का उपयोग करना

यह एक पाठ के साथ तत्वों का उपयोग करके तत्वों का पता लगाने का एक और तरीका है। उदाहरण के लिए -

browser.button(text: "button text")
browser.button(text: /button text/)

लेबल का उपयोग करना

आप नीचे दिखाए गए अनुसार इसे खोजने के लिए तत्व के लेबल का उपयोग कर सकते हैं -

browser.text_field(label: "text here"))
browser.text_field(label: /text here/))

डेटा विशेषताओं का उपयोग करना

यदि आपके पास अपने HTML टैग में डेटा विशेषताएँ हैं, तो आप नीचे दिखाए गए अनुसार इसका उपयोग करने वाले तत्वों का पता लगा सकते हैं -

उदाहरण के लिए, आप नीचे दिखाए अनुसार टैग का पता लगा सकते हैं -

<div data-type = "test1"></div>

आप निम्नानुसार div का पता लगा सकते हैं -

browser.div(data-type: 'test1'))
browser.div(data-type: /test1/))

कस्टम विशेषताओं का उपयोग करना

आप नीचे दिखाए गए अनुसार कस्टम विशेषताओं का उपयोग करने वाले तत्वों का भी पता लगा सकते हैं -

Html एलिमेंट का उदाहरण

<div itemprop = ”content”>
   ….
</div>

आप निम्नानुसार div का पता लगा सकते हैं -

browser.div(itemprop: ‘content'))
browser.div(itemprop: /content/))

दर्शनीय विशेषता का उपयोग करना

दृश्य विशेषता का उपयोग करने वाले तत्व को नीचे दिखाया गया है -

browser.div(visible: true)
browser.div(visible: false)