Problem to validate chart on website

[nsag_1512]

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: )

[nsag_1512]

Hi Colin,

https://support.smartbear.com/testcomplete/docs/testing-with/advanced/ocr/index.html

I have go through the OCR docs from the above link. From the article they mention  that TC provide OCR sample project in <TestComplete Samples>\Common\OCR. I have tried to run and got error "Process OCRApp" was not found.  Do i need to do any pre-setup before run this proj?

Thanks:)

[AlexKaras]

Hi,

Have you installed Samples while installing TestComplete?

If you did, then the OCRApp.exe should be in the mentioned folder (that on my Win10 system resolves to C:\Users\Public\Public Documents\TestComplete 12 Samples\Common\OCR\Application\).

If you did not, then run TestComplete's installation and install missed samples.

[Colin_McCrae]

What @AlexKaras says sounds about right.

You also have to have the OCR plugin enabled. Which it is by default. (File > Install Extensions - check in there if not sure)

Be prepared to do a fair bit of fine tuning to get the OCR engine reading anything much correctly. Large text, in high contrast colours, works best. Not surprisingly. I found the smaller the text got, the more it struggled. I had to install some additional fonts, in additional sizes and then play around with combinations of the two to get decent results with the mixed text sizes it encounters in mine. And even fully tuned (or, as tuned as I can get it), it's not 100% accurate. It was never likely to be. But I have it around 70%-80%. So as long as those using it are aware of the limitations, it does enough for my purposes.

*EDIT* Playing about with the filtration options may also help. And someone on here (can't remember who) mentioned that switching off Windows ClearText also helps. Even on image files. Which it does. It removed dithering which can confuse the OCR engine. I was surprised to find it affected text within an image, but it does.

TL;DR - For a few basic checks, it's OK. Would I use it for massively detailed and complex text reading tests where every letter/number absolutely had to be checked to 100% correctness? No. It's simply not accurate enough for that.

But it may help. It's worth a look at any rate.

[HKosova · Accepted solution]

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]

Helen... Just - WOW!

Perfect and helpful as always.

Thank you for the master class. Bookmarked.

[nsag_1512]

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]

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?

[HKosova]

Sorry, there was a typo in the demo script. As @Colin_McCrae correctly noted, that line should be:

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

[nsag_1512]

Hi Hkosova,

It works !!! Thanks a lots..

Thank you all 🙂

[AlexKaras]

Em-m...

a) Helen provided two code snippets and while the first one contains a reference to .Script, the second does not. This is something that you should check;

b) You are trying to access chart object immediately after the call to page .Wait method. The potential case is that .Wait waits until the primary content of the page is obtained from web server, but does not wait until the content is processed by the browser and does not wait until all async script-based secondary requests are executed and their results are processed. And I would expect that chart is created and provided with data via additional ajax calls. So, for testing and in order to be on a safe side, I would insert a Delay(10000) call after the line with page .Wait method.

EDIT: Noted that the problem was solved while I was typing. 🙂 Disregard my reply.