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 and table need to validate. when i spy the chart, i found some data label on the chart cannot be captured by test complete. let say i have 13 bars on the chart, it only capture 1 bar as below picture. Do you have any suggestion to solve this issue?

 

 

Thanks: )

  • 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!

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

    Hi,

     

    > Do you have any suggestion to solve this issue?

    I am afraid to say that no, we don't.

    The reason is that we have absolutely no idea about what chart you are trying to work with, how it is recognized by TestComplete's Object Browser, is it implemented in-house or provided by some third-party control, etc.

    We also don't know what do you like to validate: the image of the chart, if expected data is used as its data source, something else...

    To validate the images of the chart, you may prepare a set of test data, command the chart to visualize them and use TestComplete's image comparison functionality to check that the displayed image remains the same.

    If the chart is provided by some third-party control, you may decide not to check if visualization is done correctly (assuming this was done by control's provider) but just to validate that expected data were used to display the chart. You may talk to developers to discuss how this can be done.

  • baxatob's avatar
    baxatob
    Community Hero
    9 years ago

    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!