Watir - Arbeiten mit Iframes

Watir bietet eine benutzerfreundliche Syntax für die Arbeit mit Iframes.

Syntax

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

In diesem Kapitel wird an einem Beispiel gearbeitet, um zu verstehen, wie mit Iframes umgegangen und die Elemente in einem Iframe lokalisiert werden.

Beispiel

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>

Ausgabe

Im obigen Beispiel wird das Eingabeformular in einem Iframe definiert. Der Watir-Code, der uns hilft, ihn zu finden und das Formular zu testen, ist unten angegeben -

Watir Code

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'

Watir-Code zum Auffinden des Iframes in der hier angegebenen URL -

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

Wir haben den Tag-Namen iframe und die ID des iframe wie oben gezeigt verwendet.

Die Screenshots des obigen Codes werden unten gezeigt -

iframetestbefore.png

iframetestafter.png