Dealing with Iframes and WebDriver : TeamMentor’s About page

Tonight I was trying to add a new test to validate that TeamMentor’s About page is  being displayed correctly.

I thought that this test would take me a few minutes to complete, but the scenario was totally different.

For some reason I was not able to find the About page with WebDriver, even when I was able to see that page displayed. I analyzed the DOM (Document Object Model) and I realize that this page is displayed within an Iframe. Fortunately using Internet Explorer Developer Tools (which is displayed by hitting F12), I was able to discover the existence of this Iframe.

Image

It turns out that in order to interact with the content within an Iframe, a bit of “magic” needs to be done before.

WebDriver does not recognize the Iframe content unless you change the pointer to the Iframe, the following line of code shows how to change the direction the iframe:

driver.SwitchTo().Frame(0);

This single lines  switch to the specific frame.In this case I’m looking at the first frame (the one at the position 0), but here you can use the By interface to find an Iframe by Id or any other mechanism.

Once you have switched to the frame, then it is easy to validate the content.

var aboutPageContent = driver.FindElementex(By.Id("aboutText"));
Assert.IsTrue(aboutPageContent.Text.Contains("TeamMentor: Timely. Relevant. Prescriptive."));
Assert.IsTrue(aboutPageContent.Text.Contains("What does TeamMentor help you do?"));

If you want to lose the track of the Iframe, then you can go back to your page by using the switch again but this time you need to set that you want to go back to the DefaultContent:

driver.SwitchTo().DefaultContent();

That is the way WebDriver  offers to deal with Iframes :).

Advertisements

About Michael Hidalgo

Michael is a Software Developer Engineer based on San José, Costa Rica. He leads the OWASP Chapter from Costa Rica. You can take a look at my blog at http://blog.michaelhidalgo.info/
This entry was posted in Browser Automation, Selenium WebDriver, UnitTests and tagged , , . Bookmark the permalink.

2 Responses to Dealing with Iframes and WebDriver : TeamMentor’s About page

  1. RomichG says:

    This is great stuff. Question on the actual test. You are validating that the about page contains certain text. How would you validate that the look and feel of the page is correct? I.e. the text is of the right size i right position, images are of the right size etc? Since the page is pretty static, is there a way to take a snapshot of a correct page and then compare the one tested to the snapshot?

  2. Michael Hidalgo says:

    Good question Roman,
    I understand your point and WebDriver allow to take snapshots. The question to ask is how are you comparing two images, in terms of what? For instance you could validade that the size of both pictures is the same in terms of bytes.
    Do you have any idea on how to compare images i.e any library that can be used?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s