Monday, December 24, 2012

Using Google Charts with Selenium WebDriver

8-25-2012

As a test automation specialist, I encountered one of the most challenging requirements I had yet to face in all my years of test automation.  The product owner provided this user story:
"As the Test Environment Manager I would like a tool that will verify and smoke test the pension companies suite of servers, databases and applications."
Upon analysis of this user story, two of the many requirements were to create health reports that will:
  • Show a large monitor health report highlighting the failed system and identify the responsible product manager.
I got this requirement and had no idea how I was going to meet this challenge using an open source automation tool like Selenium WebDriver.
My neighborhood, friendly scrum master and developer recommended Google Charts!  This tool allowed me to easily and effectively create the required charts and include it as part of my test automation framework.  Let's begin with a sample that solved the above-mentioned requirement.

Show a large monitor health report
/**
* Created by IntelliJ IDEA.
* User: Margaret Thomas
* Date: 2011-09-16
* Time: 10:32
* Description:  This code utilizes google charts which is part  of a Selenium WebDriver project developed in IntelliJ.
* Google charts was  used to develop an html report that was displayed on a  large viewing monitor to alert Product Managers of noted
* problems systems problems.
*/
import se.virtualtester.events.STATUS;
import java.io.File;
import java.io.FileOutputStream;
import java.util.*;
public class graph {
Integer totalPassed;
Integer totalFailed;
String dateCompleted = "";
List<testResults> testReceivedResults = new ArrayList<testResults>();
List<testResultDetails> testFailures = new ArrayList<testResultDetails>();
public void setTotalPassed (Integer totalPassed) {
this.totalPassed = totalPassed;
}
public Integer getTotalPassed () {
return this.totalPassed;
}
public void setTotalFailed (Integer totalFailed) {
this.totalFailed = totalFailed;
}
public Integer getTotalFailed () {
return this.totalFailed;
}
public void setDateCompleted (String dateCompleted) {
this.dateCompleted = dateCompleted;
}
public String getDateCompleted () {
return this.dateCompleted;
}
public void writeHealthReport () throws Exception {
File file;
File fileView;
FileOutputStream out;
String filename = "\\\\localhost\\tableHealthReport.html";
//Create a new html file.
file = new File(filename);
try {
//Output the html code to the file
out = new FileOutputStream(filename);
out.write("<!--\r\n".getBytes());
out.write("Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)\r\n".getBytes());
out.write("-->\r\n".getBytes());
out.write("\r\n".getBytes());
out.write("<!DOCTYPE html PUBLIC \"-//W3C//DTDXHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd                          \">\r\n".getBytes());
out.write("<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n".getBytes());
out.write("    <head>\r\n".getBytes());
out.write("        <meta http-equiv=\"content-type\"content=\"text/html; charset=ISO-8859-1\"/>\r\n".getBytes());
out.write("        <title>\r\n".getBytes());
out.write("         Felrapport hälsotester\r\n".getBytes());
out.write("        </title>\r\n".getBytes());
out.write("    <style type='text/css'>\r\n".getBytes());
out.write("      .bold-large-font {\r\n".getBytes());
out.write("\t\tfont-family: Arial;\r\n".getBytes());
out.write("\t\tfont-weight: bold;\r\n".getBytes());
out.write("\t\tfont-size: 22px;\r\n".getBytes());
out.write("\t}\r\n".getBytes());
out.write("\t.beige-background {\r\n".getBytes());
out.write("\t\tbackground-color: mist\r\n".getBytes());
out.write("\t}\r\n".getBytes());
out.write("\t.green-background {\r\n".getBytes());
out.write("        background-color: lightblue\r\n".getBytes());
out.write("\t}\r\n".getBytes());
out.write("\t.grey-background {\r\n".getBytes());
out.write("\t\tbackground-color: lightgray\r\n".getBytes());
out.write("\t}\r\n".getBytes());
out.write("\t</style>\r\n".getBytes());
//A Javascript that calls jsapi from google that allows
//you to access the functionality to code the report
//characteristics such as font, format and color
out.write("<script type=\"text/javascript\"src=\"http://www.google.com/jsapi\"></script>\r\n".getBytes());
out.write("<script type=\"text/javascript\">\r\n".getBytes());
out.write("      google.load('visualization', '1',{packages: ['table']});\r\n".getBytes());
out.write("        </script>\r\n".getBytes());
out.write("        <script type=\"text/javascript\">\r\n".getBytes());
out.write("         function drawVisualization(){\r\n".getBytes());
out.write("\t var cssClassNames = {\r\n".getBytes());
out.write("\t\t'tableCell': 'bold-large-font',\r\n".getBytes());
out.write("\t\t'headerRow': 'bold-large-font grey-background',\r\n".getBytes());
out.write("\t\t'tableRow': 'beige-background',\r\n".getBytes());
out.write("\t\t'oddTableRow': 'green-background'\r\n".getBytes());
out.write("\t};".getBytes());
out.write("           // Create and populate the datatable.\r\n".getBytes());
out.write("           var data = newgoogle.visualization.DataTable();\r\n".getBytes());
out.write("      data.addColumn('string', 'Miljö');\r\n".getBytes());
out.write("      data.addColumn('string','Applikation');\r\n".getBytes());
out.write("      data.addColumn('string', 'Problem');\r\n".getBytes());
out.write("      data.addColumn('string','Systemansvarig');\r\n".getBytes());
out.write("\r\n".getBytes());
out.write("\t data.addRows([\r\n".getBytes());
out.write(writeTableRows().getBytes());
out.write("\t]);\r\n".getBytes());
out.write("\r\n".getBytes());
out.write("           // Create and draw the visualization.\r\n".getBytes());
out.write("           visualization = new google.visualization.Table(document.getElementById('table'));\r\n".getBytes());
out.write("             visualization.draw(data,\r\n".getBytes());
out.write("               {allowHtml: true,\r\n".getBytes());
out.write("                  showRowNumber: true,\r\n".getBytes());
out.write("                  alternatingRowStyle: true,\r\n".getBytes());
out.write("                  cssClassNames:cssClassNames\r\n".getBytes());
out.write("              });\r\n".getBytes());
out.write("           }\r\n".getBytes());
out.write("\r\n".getBytes());
out.write("google.setOnLoadCallback(drawVisualization);\r\n".getBytes());
out.write("    </script>\r\n".getBytes());
out.write("  </head>\r\n".getBytes());
out.write("  <body style=\"font-family: Arial;border:0 none;\">\r\n".getBytes());
out.write("    <div class=\"header\" style=\"font-size:40px; font-weight: bold\"> Felrapport hälsotester</div>\r\n".getBytes());
out.write(("    <div class=\"title\" style=\"font-size:32px; font-weight: bold\">" + getDateCompleted()+ "</div>\r\n").getBytes());
out.write("    <br />\r\n".getBytes());
out.write("    <div id=\"table\"></div>\r\n".getBytes());
out.write("    <br />\r\n".getBytes());
out.write("    <br />\r\n".getBytes());
out.write("Rapporten uppdateras var annan timme.\r\n".getBytes());
out.write("\r\n".getBytes());
out.write((fireworks()).getBytes());
out.write("  </body>\r\n".getBytes());
out.write("</html>\r\n".getBytes());
out.close();
} catch (Exception e) {
System.out.println("Failed to output tableHealthReport.html - " + e);
}
}
}

Refer to this link, https://developers.google.com/chart/interactive/docs/examples#table_example, for more example and explanation of using Google Charts.

Happy Automation!

No comments:

Post a Comment