Forum Discussion

nsag_1512's avatar
nsag_1512
Occasional Contributor
9 years ago

Problem to validate chart on website

Hi there,   I have test complete license for desktop.Right now, my team exploring test complete web. I'm using trial version to try out the web features and found one issue. we have a lots of chart...
  • HKosova's avatar
    HKosova
    9 years ago

    Hi nsag_1512,

     

    You can access Highchart charts as follows:

    // JScript/JavaScript
var chart = pageObj.contentDocument.Script.Highcharts.chart[0]

    (replace 0 with the chart index if there're several charts on the page.)

     

    Then you can access all chart data via its options property. Use Chrome Dev Tools (F12 > Console) to find the properties and values you need.


    Some useful properties:

    chartObj.options.title.text - chart title
    chartObj.options.series - array of data series

    chartObj.options.series[i].name - name of the series
    chartObj.options.series[i].data - array of data points of the series

    chartObj.options.xAsis.title.text - X axis title
    chartObj.options.xAsis.categories - X axis labels

     

    See the Highcharts Options reference for a full list of available properties:
    http://api.highcharts.com/highcharts

     

    Demo (using the http://www.highcharts.com/demo/line-basic page):

    // JScript / JavaScript
    function Test()
{
  var url = "http://www.highcharts.com/demo/line-basic";
  Browsers.Item(btChrome).Run(url);
  var page = Sys.Browser().Page(url);

  var chart = page.contentDocument.Script.Highcharts.charts[0];

  // Log the series names and data points
  var series = chart.options.series;
  for (var i = 0; i < series.length; i++)
  {
    Log.Message(series[i].name + ": " + series[i].data.join(", "));
  }
}

    Hope this helps!

baxatob's avatar
baxatob
Community Hero

Can you show how your chart looks in the Object Browser?

nsag_1512's avatar
nsag_1512
Occasional Contributor
9 years ago

Hi,

 

We are using third party(Highchart) components to create the charts. Attached is the screenshot of the object browser.

 

Thanks :)

  • HKosova's avatar
    HKosova
    SmartBear Alumni (Retired)
    9 years ago

    Hi nsag_1512,

     

    You can access Highchart charts as follows:

    // JScript/JavaScript
var chart = pageObj.contentDocument.Script.Highcharts.chart[0]

    (replace 0 with the chart index if there're several charts on the page.)

     

    Then you can access all chart data via its options property. Use Chrome Dev Tools (F12 > Console) to find the properties and values you need.


    Some useful properties:

    chartObj.options.title.text - chart title
    chartObj.options.series - array of data series

    chartObj.options.series[i].name - name of the series
    chartObj.options.series[i].data - array of data points of the series

    chartObj.options.xAsis.title.text - X axis title
    chartObj.options.xAsis.categories - X axis labels

     

    See the Highcharts Options reference for a full list of available properties:
    http://api.highcharts.com/highcharts

     

    Demo (using the http://www.highcharts.com/demo/line-basic page):

    // JScript / JavaScript
    function Test()
{
  var url = "http://www.highcharts.com/demo/line-basic";
  Browsers.Item(btChrome).Run(url);
  var page = Sys.Browser().Page(url);

  var chart = page.contentDocument.Script.Highcharts.charts[0];

  // Log the series names and data points
  var series = chart.options.series;
  for (var i = 0; i < series.length; i++)
  {
    Log.Message(series[i].name + ": " + series[i].data.join(", "));
  }
}

    Hope this helps!

    • AlexKaras's avatar
      AlexKaras
      Champion Level 3
      9 years ago

      Helen... Just - WOW!

      Perfect and helpful as always.

      Thank you for the master class. Bookmarked.

    • nsag_1512's avatar
      nsag_1512
      Occasional Contributor
      9 years ago

      Hi ,

       

      I get the idea already. Btw just now i tried run the sample code it throw me an error.  Do i need to declare anything?

       

       

       

       

       

      Thanks :)

       

      • Colin_McCrae's avatar
        Colin_McCrae
        Community Hero
        9 years ago

        You copied the code wrong.

         

        HKosova posted:

         

        pageObj.contentDocument.Script.Highcharts.chart[0]

         

        Your code says:

         

        page.contentDocument.Highcharts.charts[0]

         

        You missed the "Script" part.

         

        ** EDIT **

         

        Oops.

         

        Just noticed. In the post from HKosova the "Script" part is present in the first (smaller) code snippet. It's missing in the larger one. So I see how you missed it. So maybe try it with "Script" present and see if that helps?

  • baxatob's avatar
    baxatob
    Community Hero
    9 years ago

    Ok. And how looks SVG(0) element (whole chart) on the page?

    • nsag_1512's avatar
      nsag_1512
      Occasional Contributor
      9 years ago

      Hi baxatob,

      It looks like this. The child elements shows as TextNode. 

       

      • baxatob's avatar
        baxatob
        Community Hero
        9 years ago

        I agreed with AlexKaras, currently you only can create a number of image comparison tests, if you need to validate how it looks on the screen.

         

        If it's enough to validate that data was changed after some action was done, you can do it using direct requests to database server or by parsing http-responses.

  • AlexKaras's avatar
    AlexKaras
    Champion Level 3
    9 years ago

    Hi,

     

    It looks that the chart is implemented using SVG (segmented vector graphic)... When I tried it some time ago, I also was not able to get much about it from TestComplete. I also do not remember any explicit notes about improvements in SVG support in the release notes for the latest versions of TestComplete.

    My suggestion is:

    -- To talk with developers and ask them how you can get from the test the data used to display the chart and stick to validation that the data are correct and leave the verification of how correct data are visualized to the provider of the chart control;

    -- You may additionally create a small amount of tests that do image comparison using sets of test data of special interest to verify that the chart is displayed correctly (e.g. zero values, values between 0 and 1, etc.);

    -- Create a Support case via the https://support.smartbear.com/message/?prod=TestComplete form and ask guys if they have any recommendations on how to work with SVG.

    • nsag_1512's avatar
      nsag_1512
      Occasional Contributor
      9 years ago

      Thanks Alex, I ask customer request team. :smileyhappy:

      • Colin_McCrae's avatar
        Colin_McCrae
        Community Hero
        9 years ago

        What do the child nodes contain?

         

        It looks like there is one for each bar in your chart? (Going by the numbers mentioned in your original post)

         

        As AlexKaras mentioned, it sounds like support for these is limited. But you are at least getting some text out of them. I'm guessing your initial post with a list in it was taken from the SVG object? As the text I can see in the screen capture from the child node is not text that's in that list?

         

        So it may be worth having a VERY thorough poke through the child nodes and see if there is anything else in there you can use? And by thorough, I mean drilling down into every property AND field (if present - not sure they are) available in there ....

         

        As the others have said. Image compare are an option. Albeit a fragile one. You could also have a look at using OCR perhaps? I'm not sure without seeing a graphic representation of the chart or what you want to get from it. I ended having to use OCR on some panels in my application which are Canvases, so essentially just a giant image with no child objects and few useful properties. (It has a background XML map of hotspots. It actually contains a LOT of user controls, but it's the graphic representation I'm interested in. Not the XML. That's a separate issue.)