Monday, October 11, 2010

How to automate flash chart using Sahi?

Recently we faced the challenge of automating tests for application using fusion charts. FusionCharts v3 helps you create animated & interactive charts for web & enterprise applications. In the application that we were testing, these came embedded in web pages using plain HTML and without using FusionCharts JavaScript class.

Our team’s objective was to test content of the flash chart. This flash chart was a stackarea chart with trending information.
We tried recognizing these charts with Sahi Controller but it got identified as a DIV tag.
And the only identification available was something like _div("ch57").



Here is what we did: We studied the HTML rendered and studied the content of EMBED tag.
When using HTML embedding for FLASH CHARTS, all variables to the chart are passed using FlashVars variable. This is the variable which holds the chart XML data.

REFERENCE - Flashvars takes various parameters as given in the Flash Chart documentation - http://www.fusioncharts.com/docs/ [Embedding Charts Using OBJECT or EMBED Tags].

For developing a sahi script that validates data content of the flash chart we developed following alogrithm.

(1) Navigate to test application where the flash chart is rendered
(2) Recognise the EMBED object using html-id.
(3) Read the tag attribute by the name flashvars
_call (document.getElementsByTagName("embed"))[0].getAttribute("flashvars");
(4) Build an XML object
(5) Validate data of interest by parsing XML

Best way to validate data of interest is to read the XML file at runtime from the application under test and log the datasets to a XML/CSV file. Depending on the business scenario tester can frame the base xml/CSV that is expected. One can then just do a simple file comparison.
Posted by at

4 comments:

  1. AnonymousJune 17, 2011 at 12:00 PM

    Hi Ashwini,

    Can you please elaborate the steps..
    It would be of great help!!!

    Regards,
    A SAHI user

    ReplyDelete
  2. AnonymousJune 17, 2011 at 12:54 PM

    Also it would be great if you could post your Email-Id so that we could seek your advice on this issue!!!

    ReplyDelete
  3. Ashwini LalitJune 22, 2011 at 12:21 AM

    The key lies in building the XML Object. If you look at the image, EMBED object stores the entire content of what gets painted in the chart.

    We need to capture this info, build XML Object, parse it and use it as required. You should be able to relate 'Business logic' of the graph with the XML data. For example, what does X axis indicates is stored in variable called categories. Then with XML parser we need to read value of categories.

    //to capture EMBED tag you may use
    $data = _call(document.getElementsByTagName("embed"))[$chartIndex].getAttribute("flashvars");

    // create XML object
    $dom = new XML($data);

    // No of ploted point on x axis
    $xAxisLength = $dom.graph[0].descendants("categories")[0].descendants("category").length();

    Hope this information is helpful

    ReplyDelete
  4. AnonymousJuly 5, 2011 at 8:19 PM

    Can you please post the java equivalent code for the above code!!

    $data = _call(document.getElementsByTagName("embed"))[$chartIndex].getAttribute("flashvars");

    We are writing SAHI scripts in JAVA!!
    it would be very helpfull!!

    Thanks for the help! :) :)

    ReplyDelete

Subscribe to: Post Comments (Atom)