Watir - Iframe'lerle Çalışma

Watir, iframe'lerle çalışmak için kullanımı kolay sözdizimi sunar.

Sözdizimi

browser.iframe(id: 'myiframe') 
// will get the reference of the iframe where we want to input details.

İframe'lerle nasıl başa çıkılacağını anlamak ve bir iframe içindeki öğelerin yerini tespit etmek için bu bölümde bir örnek üzerinde çalışacağız.

Misal

main.html

<html>
   <head>
      <title>Testing using Watir</title>
   </head>
   <body>
      <iframe src = "test1.html" id = "myiframe" width = "500" height = "100"></iframe>
   </body>
</html>

test1.html

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

Çıktı

Yukarıdaki örnekte, giriş formu bir iframe içinde tanımlanmıştır. Bulmamıza ve formu test etmemize yardımcı olacak Watir kodu aşağıda verilmiştir -

Watir Kodu

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/main.html')
t = b.iframe(id: 'myiframe').text_field
t.set 'Riya Kapoor'
b.screenshot.save 'iframetestbefore.png'
t.fire_event('onchange')
b.screenshot.save 'iframetestafter.png'

Burada verilen url'de iframe'i bulmak için su kodu -

t = b.iframe(id: 'myiframe').text_field

Yukarıda gösterildiği gibi iframe etiket adını ve iframe kimliğini kullandık.

Yukarıdaki kodun ekran görüntüleri aşağıda gösterilmektedir -

iframetestbefore.png

iframetestafter.png