20 February, 2011

Automated Test for Facebook Canvas Apps – Front-end automation with Selenium

There are a number of challenges encountered in establishing test automation for Facebook applications. Among them is the fact that web browsers consider Facebook canvas applications to live in a separate security sandbox from the top-level page. This blog post describes how to use the Selenium 2.0 beta WebDriver technology to automate integrated test scenarios where the application under test is embedded in the Facebook page. The same technique applies to other situations in which the test must interact with elements in an IFrame whose src is a different domain from the top-level page.

Get the right driver

Selenium 2.0 is in beta, and until Beta 2 was released (Feb 2011), the technique described here could only be used for Firefox. With Beta 2, one body of code works with both IE8 and Firefox 3.6 (at least). It's reasonable to hope that as Selenium 2 progresses to its final release, the same tests will be able to run with more browsers. The beta 2 release includes a driver for Chrome, but that driver is not able to execute the tests.

Selenium 2 merges WebDriver into the Selenium project. The tests here rely on the WebDriver API.

Identify the IFrame

In order to interact with the elements of your application, the test will need to get the IFrame name (or index). As of 25 Feb, 2011, the IFrame has a constant name:

 final def canvasName = "iframe_canvas"
The test could alternatively search through all IFrames in the window to locate the relevant item.

Create a driver instance

Selenium lets the test create a driver directly, i.e. new org.openqa.selenium.firefox.FirefoxDriver(). Writing the tests to use RemoteWebDriver allows the test framework to execute the test across platforms:
def seleniumDrivers = [
[browserName: "internet explorer", serverName: "windowshost:4444"],
[browserName: "firefox", serverName: "osxhost:4444"]
].collect {
def browserName = it.browserName
def driverCaps = new DesiredCapabilities()
driverCaps.javascriptEnabled = true
driverCaps.browserName = browserName
return new RemoteWebDriver(new URL("http://$it.serverName/wd/hub" as String), driverCaps)
}
The driver is required to enable JavaScript because it will allow the tests to probe Flash elements in the IFrame.

Write tests

It's not immediately apparent how to best encapsulate the aspects of the test setup where the driver is used to move through the initial flow required to start the application. For the moment, it's just one of the tests upon which the later tests depend.

Log in to Facebook

Nothing tricky about this:
def login(WebDriver selenium) {
//Defines a trivial subclass of WebDriverWait
def waitUntil = new GroovyWebDriverWait(new SystemClock(), selenium, 10, 50)
selenium.get("http://www.facebook.com")
// It seems to be a good idea to check that the field contains all typed characters before going to next test step
waitUntil.keysAccepted(selenium.findElement(By.name("email")), params.userEmail)
waitUntil.keysAccepted(selenium.findElement(By.name("pass")), params.userPassword)
// Click the Login button
selenium.findElement(By.xpath("//label/input")).click()
// Proceed only after Facebook displays the user's page
waitUntil.condition { selenium.findElement(By.id("navAccountLink")) }
}

Load the app

The test could drive the FB interface to locate the application in the UI and launch it from there, but if the objective is to test the workings of the app in the IFrame, send the browser directly to the application.
selenium.get(appURL)
// This is where the driver starts to interact with the application
selenium.switchTo().frame(canvasName)

Wait for rendering

The app probably has dynamically rendered elements. In particular if it uses SWFObject to initialize a Flash player the test should probe for the creation of the corresponding DOM element.

waitUntil.condition { selenium.findElement(By.id(swfElementId)) }

Interact with Flash

If the test is concerned with a Flash application, it will need to make JavaScript calls into function exposed via the Flash ExternalInterface. A convenient way to make a number of useful test functions available is to include FlexPilot. It's (currently) necessary to build a SWF using the bootstrap classes provided with FlexPilot.

Assuming the SWF has successfully loaded FlexPilot, the test can proceed to check that the SWF loading is complete.

waitUntil.condition {
// The parameter to executeScript is really a script - if there's no return, there's nothing to check.
selenium.executeScript("return document.getElementById('$swfElementId').
  fp_assertDisplayObject('$mainComponentName')")
}

That should give the general shape of the solution. Hopefully it'll be useful to some folks. Perhaps inspiration will strike once more and additional posts will elaborate on details. Please add a comment if you can suggest an improvement or idea for a following post.

28 comments:

  1. Update 25-Feb-2011: Edited the body to reflect the change observed in Facebook: the IFrame name used to include the appId.

    ReplyDelete
  2. After the installation if you open up the IIS Manager (inetmgr) tool, you should see a new section called Server Farms. CodCow

    ReplyDelete
  3. Here at this site really the fastidious material collection so that everybody can enjoy a lot.
    facebook picture likes free trial

    ReplyDelete
  4. Basic, Object arranged Distributed, Multithreaded, Dynamic, Architecture impartial, Portable, High execution, Robust and Secure.
    best web design tutorials

    ReplyDelete
  5. This makes it easier for many people to enjoy the same game regardless of the type of computer that they are using to access it.
    StartPoint

    ReplyDelete
  6. You see those people advertising expressing "Inbox (five). Nick, a person in San Francisco includes a crush on you!" (with your identify, profile picture, and city inside the posting). buy facebook followers and likes

    ReplyDelete
  7. This is really good idea that eliminate delay on toll roads by collecting the electronic tolls. According to the public are suffered with this toll problem and seeking help from the government to get rid of this problem. moving checklist app

    ReplyDelete
  8. Nice to be visiting your blog once more, it has been months for me. Well this article that ive been waited for therefore long. i want this article to finish my assignment within the faculty, and it has same topic together with your article. Thanks, nice share. wallmart blockchain jobs

    ReplyDelete
  9. This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post. costo automazione cancello

    ReplyDelete
  10. Very interesting blog. Alot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definately interested in this one. Just thought that I would post and let you know. Buy 1 Star Facebook Reviews

    ReplyDelete
  11. Thanks for the lovely blog. It helped me a lot. I'm glad I found this blog. Thanks for sharing with us, I too am always learning something new from your post.

    360DigiTMG Data Science Courses

    ReplyDelete
  12. Now is the perfect time to plan for the future and now is the time to be happy. I have read this article and if I can I would like to suggest some cool tips or advice. Perhaps you could write future articles that reference this article. I want to know more!

    Business Analytics Course in Bangalore

    ReplyDelete
  13. Writing in style and getting good compliments on the article is hard enough, to be honest, but you did it so calmly and with such a great feeling and got the job done. This item is owned with style and I give it a nice compliment. Better!

    Data Analytics Course in Bangalore

    ReplyDelete
  14. wonderful article contains lot of valuable information. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
    This article resolved my all queries.good luck an best wishes to the team members.learn digital marketing use these following link
    Digital Marketing Course in Chennai

    ReplyDelete
  15. You have completed certain reliable points there. I did some research on the subject and found that almost everyone will agree with your blog.


    Data Analytics Course in Bangalore

    ReplyDelete
  16. Omnisphere Free Download is definitely a complete software method for different wave types and functions. It truly is embedded which has a number of increased capabilities and features that assists consumers recover sound capabilities.

    ReplyDelete
  17. Replies
    1. What’s more, totally deleted information can be distinguished anyplace. EASEUS Data Recovery Wizard Full Version is an application that you can use to recover records that have been recently erased from your PC.Easeus data recovery wizard

      Delete
  18. Are you looking for the best Data Science course institute that will aid you in growing in your career. 360DigiTMG is the place for you. Start your course today!
    Best Data Science Training institute in Bangalore

    ReplyDelete
  19. Thank you very much, this is very good stuff

    ReplyDelete

 

Copyright 2009-2010 John Bito. Creative Commons License
This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.