Dynamic Frames? No Problem.

Many sites and web applications are using iframe elements to create tabs or sections on the page which the user can enable/disable/move at will. These often are being created in such a way that putting an ID on each frame is difficult or not feasible. As each frame is created or destroyed, of course, the index of a given frame within the frames collection changes. These factors combine, making it very difficult for an automation framework to reliably locate elements within the frames.

Beginning with the R2 release, Test Studio 2013 introduces Custom Tags for Frames, a way to specify frames that helps test automation engineers work with these scenarios. Tagging a frame allows Test Studio to reliably locate it and its child elements even as the frame's index or other attributes change.

Tag the Frame

First, you'll need to add a tag to the frame. This can either be done by the in the site's code or it can be added in a Test Studio coded step.

In the site's HTML

If you have access to the application's source or can work with the developers, the more flexible option would be to add the custom 'testStudioTag' attribute to the frame element. This makes the tag available for all tests that might need it.

<iframe TestStudioTag="MyCustomTag" ... >

Using a Coded Step

The other option is to use a coded step in Test Studio to create the tag.

Create a new test which simply navigates to the correct page and verifies an element within the frame.

Next view the code behind the test, and add the a using directive for ArtOfTest.WebAii.Design.Extensions if it's not already in place.

Now you'll add a coded step, using the button in the toolbar.

If you have nested frames, you'll need to ensure that the entire DOM has been built, using the RefreshAllDomTrees method.

The rest of the code sample selects a given frame from a 0-based array, then uses the TagFrame method to add the attribute to that element.

Add the Tag to the Element Explorer

With the custom tag added using either of the above methods, open the Element Explorer. Locate the frame and open expand the FrameInfo property panel. Enter your custom tag name into the Tag field.

Test Studio will locate the frame and all child elements correctly.

During runtime the frame's custom tag takes precedence over the rest of the options - if an ID did exist it would now be ignored.

The feature is cross-browser and also supports nested frames scenario. The only known limitation is related to the browser security - some browsers are unable to access frames in a cross-domain context.

Peace,
Steven

About the Author

Steven Vore

Steven Vore is an Evangelist for Telerik's Test Studio. He has worked in software support and testing for the better part of two decades, and enjoys exploring ways to make software easier to use. He is a fan of movies and music, and can often be found on Twitter as @StevenJV.