The Issue
When attempting to automate a simple browser interaction, you may find that your Selenium & Watir Webdriver commands are returning an error, even though you’re certain you’ve input the correct element identifiers. More often than not, this is due to the element being inside of a frame. Frames are often used to contain login fields, banners, or navigation menus, meaning an element in these areas that you might need to interact with will more than likely be housed in a frame.
The Answer
By telling Selenium & Watir Webdriver to work inside of the frame, you can easily interact with your desired elements and move forward in your automated test. This is done by placing a command before your existing line of code, telling the browser to look at the frame first, and then find the element you have specified. Lets take a look at how we can do this.
The Code
In this example, we will enter a username into a text field that is within an internal frame, or iframe. Here is the command we would normally use to set text in the text field
|
1 |
text_field(:id,"lid").when_present.set |
To select the field, we will use iframe and input our element identifier:
|
1 |
browser.iframe(:id,"zohoiam") |
This will be added to the to the front of our text field command, with our resulting line of code now:
|
1 |
browser.iframe(:id,"zohoiam").text_field(:id,"lid").when_present.set |
We can now add our completed iframe command to a script, which will navigate to the Zoho CRM website, and input a username into the Sign In text field, which is contained inside of the iframe:
|
1 2 3 4 5 6 7 |
#filename: iframe.rb require 'rubygems' require 'watir-webdriver' browser = Watir::Browser.new :chrome browser.goto "http://www.zoho.com/crm/" browser.a(:text, "Sign In").click browser.iframe(:id,"zohoiam").text_field(:id,"lid").when_present.set "patrickrow68@gmail.com" puts "Username = #{browser.iframe(:id,"zohoiam").text_field(:id,"lid").value}" |
The Result
After ensuring the code we have is correct, and the iframe line is added, we can save the automated test file (iframe.rb) and run it from the command line. Here is a breakdown of the result:
- Browser opens
- Browser navigates to Zoho CRM url
- Clicks on Sign In Button
- On Sign In Page, enter username into text field (which is within the iframe)
And here we can see our validation message, confirming our text is successfully input within the iframe text field:
The Takeaway
You now have the ability to deal with frames that will inevitably be encountered when automating browser interactions with Selenium & Watir Webdriver. Again, be sure to look out for frames when dealing with text fields or forms; essentially, any part of the webpage that looks like it would be nesting elements separately from the rest of the page.