Using Google Charts API for Test Results Dashboard

[This post was originally written in May 2008]

Image Charts

I am using Google Charts API to generate charts to visualize test results in Dashboard. Image charts are generated on the fly based on dynamic data and then embedded in to test results generated in HTML format. This feature can be used with any tool/framework where test results are generated in HTML format.  This does not require any software/dependency installed on user’s desktop and comes free from Google.

There are different types of charts you can generate with variety of options. Just hit http://code.google.com/apis/chart/ for API documentation.

Here is an example of Pie and Google-O-Meter types:

<a href="https://unmesh.files.wordpress.com/2012/05/google-charts2.png"><img class="aligncenter size-medium wp-image-333" title="Google Charts" src="https://unmesh.files.wordpress.com/2012/05/google-charts2.png?w=300" alt="" width="300" height="119" /></a>

You can try Pie chart example by simply copying following HTTP request in your Browser’s address bar. A chart will appear in your Browser window once you hit Enter key.

<a href="http://chart.apis.google.com/chart?chtt=Test+Results&amp;chts=000000,12&amp;chs=450x150&amp;chf=bg,s,ffffff&amp;cht=p3&amp;chd=t:66.66,33.33&amp;chl=Tests+Passed(2)|Tests+Failed(1)&amp;chco=006600,990000">http://chart.apis.google.com/chart?chtt=Test+Results&amp;chts=000000,12&amp;chs=450x150&amp;chf=bg,s,ffffff&amp;cht=p3&amp;chd=t:66.66,33.33&amp;chl=Tests+Passed(2)|Tests+Failed(1)&amp;chco=006600,990000</a>

Now, how do we implement this in QTP/VBScript or any other tool of your choice? Here is an example of VBScript function which accepts Number of Test Executed, Passed, and Failed and then generates a nicely formatted HTML report:

Public Function GenerateTestSummaryReport(ByVal intTestsExecuted, ByVal intTestsPassed, ByVal intTestsFailed)

	Set objFSO = CreateObject("Scripting.FileSystemObject")
	Set objFile = objFSO.CreateTextFile("C:\TestSummary.html",True)

	objFile.WriteLine "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>"
	objFile.WriteLine "<html xmlns='http://www.w3.org/1999/xhtml' >"
	objFile.WriteLine "<head><title>Test Execution Summary Report</title></head>"
	objFile.WriteLine "<body style='font-weight: bold; font-size: 10pt; color: black; font-family: Tahoma'>"
	objFile.WriteLine "<br />Test Execution Summary"
	objFile.WriteLine "<br /><br />Test Suite Summary<table><tr><td style='width: 200px; height: 56px; background-color: #669918'>Total Tests Executed</td><td style='height: 56px; background-color: #669918'>Passed</td><td style='height: 56px; background-color: #669918'>Failed</td></tr>"
	objFile.WriteLine "<tr><td style='width: 200px; background-color: #D0F0A2'>" & intTestsExecuted & "</td><td style='background-color: #D0F0A2'>" & intTestsPassed & "</td><td style='background-color: #D0F0A2'>" & intTestsFailed & "</td></tr>"
	objFile.WriteLine "<tr><td><img src='http://chart.apis.google.com/chart?chtt=Test+Results&amp;chts=000000,12&amp;chs=450x150&amp;chf=bg,s,ffffff&amp;cht=p3&amp;chd=t:" & intTestsPassed & "," & intTestsFailed & "&amp;chl=Tests+Passed(" & intTestsPassed &")|Tests+Failed(" & intTestsFailed & ")&amp;chco=006600,990000' alt='Test Results Chart'/></td></tr>"
	objFile.WriteLine"</table>"

	Set objFile = Nothing
	Set objFSO = Nothing

End Function

'Call Function
Call GenerateTestSummaryReport(5,3,2)

In above code, highlighted IMG tag will make a request to Google Chart API and will show a nicely built chart on the fly when user opens this file in a Web Browser or email client.

If you find API documentation not working for you, there is a very interesting service available at http://dexautomation.com/googlechartgenerator.php

This will enable you to design Charts using guided steps and then it will generate IMG tag which you can embed in your code. Using Google Charting API you could build a nice dashboard for you test suite result reporting.

However Image charts have some limitation on amount of data we can pass. Other alternative is Interactive Chart feature.

Interactive Charts

Unlike image charts which are static, Interactive are charts more advanced. Interactive charts support user interaction and event handling. These are built using JavaScript.

Google Visualization API provides different types of charts for data visualization. Please see following page for sample charts.

http://code.google.com/apis/visualization/documentation/gallery.html

Here is an example in VBScript on how to use Gauge charts for showing test results/build status:

Public Function GenerateTestSummaryReport(ByVal intTestsPassed, ByVal intTestsFailed)
	Set objFSO = CreateObject("Scripting.FileSystemObject")
	Set objFile = objFSO.CreateTextFile("C:\TestSummary.html",True)
	objFile.WriteLine "<html><head><title> Test Execution Summary Report </title>"
	objFile.WriteLine "<script type='text/javascript' src='http://www.google.com/jsapi'></script>"
	objFile.WriteLine "<script type='text/javascript'>"
	objFile.WriteLine "google.load('visualization', '1', {packages:['gauge']});"
	objFile.WriteLine "google.setOnLoadCallback(drawChart);"
	objFile.WriteLine "function drawChart() { var passedData = new google.visualization.DataTable();"
	objFile.WriteLine "passedData.addColumn('string', 'Label'); passedData.addColumn('number', 'Value');"
	objFile.WriteLine "passedData.addRows(1); passedData.setValue(0, 0, 'Tests Passed');"
	objFile.WriteLine "passedData.setValue(0, 1, " & intTestsPassed & ");"
	objFile.WriteLine "var passedChart = new google.visualization.Gauge(document.getElementById('chart_passed'));"
	objFile.WriteLine "var passedOptions = {width: 400, height: 120, redFrom: 0, redTo: 30, yellowFrom: 31, yellowTo: 60, greenFrom: 61, greenTo: 100, minorTicks: 5};"
	objFile.WriteLine "passedChart.draw(passedData, passedOptions);"
	objFile.WriteLine "var failedData = new google.visualization.DataTable();"
	objFile.WriteLine "failedData.addColumn('string', 'Label');"
	objFile.WriteLine "failedData.addColumn('number', 'Value');"
	objFile.WriteLine "failedData.addRows(1);"
	objFile.WriteLine "failedData.setValue(0, 0, 'Tests Failed');"
	objFile.WriteLine "failedData.setValue(0, 1, " & intTestsFailed & ");"
	objFile.WriteLine "var failedChart = new google.visualization.Gauge(document.getElementById('chart_failed'));"
	objFile.WriteLine "var failedOptions = {width: 400, height: 120, redFrom: 31, redTo: 100, yellowFrom: 11, yellowTo: 30, greenFrom: 0, greenTo: 10, minorTicks: 5};"
	objFile.WriteLine "failedChart.draw(failedData, failedOptions);}"
	objFile.WriteLine "</script></head>"
	objFile.WriteLine "<body style='font-weight: bold; font-size: 10pt; color: black; font-family: Tahoma'><br />Test Execution Summary"
	objFile.WriteLine "<br /><br />Test Suite Summary<table><tr><td style='width: 200px; height: 56px; background-color: #669918'>Total Tests Executed</td><td style='height: 56px; background-color: #669918'>Passed</td><td style='height: 56px; background-color: #669918'>Failed</td></tr>"
	objFile.WriteLine "<tr><td style='width: 200px; background-color: #D0F0A2'>100</td><td style='background-color: #D0F0A2'>85</td><td style='background-color: #D0F0A2'>15</td></tr>"
	objFile.WriteLine "<tr><td><div id='chart_passed'></div></td><td><div id='chart_failed'></div></td></tr></table></body></html>"
	Set objFile = Nothing
	Set objFSO = Nothing
End Function

'Call Function
Call GenerateTestSummaryReport(15,85)

Here is interactive Chart Generated:

You can add more metrics to your reports and build more meaningful Charts.


Using DotNetFactory Utility Object in QTP

[This post was originally written in March 2007]

Using DotNetFactory object you can access .NET base classes into your QTP scripts. This also supports using DLLs compiled from any .NET language. This features works on .NET Interop which means you can call .NET components in COM environment and vice versa.

Using ArrayList Class

Here is an example where we have a test scenario which requires sorting and searching of an array of values. We will use ArrayList class from System.Collections namespace. Collections namespace has variety of classes like Array, HashTable, Stack, LinkedList etc.

ArrayList class is enriched with various ready to use methods for Sorting, Reversing, and Searching items.


'//Create an instance of System.Collections.ArrayList using DotnetFactory.CreateInstance method

Set myList = DotnetFactory.CreateInstance("System.Collections.ArrayList")

'//Add items to the List Array
myList.Add("American")
myList.Add("Ukrainian")
myList.Add("bElarusian")
myList.Add("Indian")
myList.Add("123")
myList.Add("$@%^%@")

'//ArrayList.Capacity/ArrayList.Count shows the number of elements it have

Print "Capacity of ArrayList is: " & myList.Capacity
Print "Count of ArrayList is: " & myList.Count

'//ArrayList adds empty memory locations when new items are added to the list
'//using TrimToSize you can remove these empty locations from the list
myList.TrimToSize

'//SORTING
'//You can sort the contents of an ArrayList using Sort method, for Ascending sort:

myList.Sort

'//For displaying array contents in a String
strMsg = ""
For intCnt = 0 To myList.Count - 1
 strMsg = strMsg & myList.Item(CInt(intCnt)) & vbCrLf
Next

Print "Sorted Array List: Asecending" & vbCrLf & strMsg

'//You can Sort an array Descending with Reverse method. But first you need to sort the list
'//using Sort method

myList.Reverse

'//For displaying array contents in a String
strMsg = ""
For intCnt = 0 To myList.Count - 1
 strMsg = strMsg & myList.Item(CInt(intCnt)) & vbCrLf
Next

Print "Sorted Array List: Descending" & vbCrLf & strMsg

'//SEARCHING
'//You can search an item using IndexOf and BinarySearch method. These method return zero based index
'//of an item for its first occurrence

Print "Indian item found at: " & myList.IndexOf("Indian") & vbCrLf & strMsg,,"IndexOf Search"
Print "indian item found at: " & myList.IndexOf("indian") & vbCrLf & strMsg,,"IndexOf Search"
'//For BinarySearch ArrayList should be sorted in Ascending Order
myList.Sort

'//For displaying array contents in a String
strMsg = ""
For intCnt = 0 To myList.Count - 1
 strMsg = strMsg & myList.Item(CInt(intCnt)) & vbCrLf
Next

Print ,"Binary Search: " & vbCrLf & "bElarusian item found at: " & myList.BinarySearch("bElarusian") & vbCrLf & strMsg
Print ,"Binary Search: " & vbCrLf & "Belarusian item found at: " & myList.BinarySearch("Belarusian") & vbCrLf & strMsg

'//ArrayList.Contains method searches for given item and returns True/False
Print myList.Contains("Indian")

Set myList = Nothing

This approach is much faster and reliable than writing code our own code.

Using Clipboard Object

You can access Clipboard object using System.Windows.Forms.Clipboard class. Here is an example showing how to Clear, Set and Get contents from Clipboard.


'//This is not supported in 8x versions

Set oClip = DotNetFactory.CreateInstance("System.Windows.Forms.Clipboard")

'//Clears the Clipboard
oClip.Clear

'//Sets sample text on Clipboard
oClip.SetText "DotNetFactory Rocks!!"

'//Retrieves text from Clipboard
strContents = oClip.GetText

Print strContents

File Input/Output

Using System.IO.File class you can create, read and write to files. Here is an example on writing to and reading from a file.


'//This is not supported in 8x versions

Set objFile = DotNetFactory.CreateInstance("System.IO.File")

'//Creates a new file with given text
objFile.WriteAllText "C:\Test.txt","DotNetFactory Rocks!!"

'//Retrieves text from given file
strContents = objFile.ReadAllText("C:\Test.txt")

Print strContents

This way you can use 100s of classes available in .NET Framework in your QTP Scripts.