Watir - Bekerja dengan Iframes

Watir menawarkan sintaks yang mudah digunakan untuk bekerja dengan iframe.

Sintaksis

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

Untuk memahami cara menangani iframe dan menemukan elemen di dalam iframe, di bab ini, kita akan mengerjakan sebuah contoh.

Contoh

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>

Keluaran

Dalam contoh di atas, formulir entri didefinisikan di dalam iframe. Kode Watir yang akan membantu kita untuk menemukannya dan menguji formulir yang diberikan di bawah ini -

Kode Watir

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'

Kode Watir untuk menemukan iframe di url yang diberikan di sini -