nidhi1991/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
Nightwatch HTML Reporter

Install

cd /path/to/project
npm install handlebars
Copy html-reporter.js and html-reporter.hbs to your project basedir.
Usage

nightwatch test.js --reporter html-reporter.js 
The html report will be generated under your nightwatch reports folder.
Edit html-report.hbs to customize the look and feel of the report.
See http://handlebarsjs.com for Handlebars syntax.

  
## html-reporter.hbs
<!DOCTYPE html>
<html>
<head>
  <title>Test Results - {{browser}}</title>

  <style>
    html, body {
      font-family: Arial,sans-serif;
      margin: 0;
      padding: 0;
    }

    body { padding: 10px 40px; }

    table { width: 100%; margin-bottom: 20px; }

      td {
        padding: 7px;
        border-top: none;
        border-left: 1px black solid;
        border-bottom: 1px black solid;
        border-right: none;
      }

      td.pass { color: #003b07; background: #86e191; }
      td.skip { color: #7d3a00; background: #ffd24a; }
      td.fail { color: #5e0e00; background: #ff9c8a; }

    tr:last-child       { border-top: 1px black solid; }
      tr:last-child td    { border-top: 1px black solid; }
      tr:first-child td   { border-top: 1px black solid; }
        td:last-child       { border-right: 1px black solid; }

    tr.overview td      { padding-bottom: 0px; border-bottom: none; }
    tr.overview.last td { padding-bottom: 3px; }

    ul.assertions   { list-style-type: none; }
      span.error      { color: #AD2B2B; }
      span.success    { color: #53891E; }

    .stacktrace { display: inline; }
      .stacktrace code { display: none; }

    #nightwatch-logo {
      position: absolute;
      top: 20px;
      right: 33px;
      width: 70px;
      height: 75px;
      background: transparent url('http://nightwatchjs.org/img/logo-nightwatch.png') no-repeat;
      background-size: 70px 75px;
    }
  </style>
</head>

<body>
  <h1>Test Results</h1>

  <table border="0" cellpadding="0" cellspacing="0">
    <tr class="overview">
      <td colspan="3" title="{{browser}}"><strong>Browser:</strong> {{browser}}</td>
    </tr>
    <tr class="overview">
      <td colspan="3"><strong>Timestamp:</strong> {{timestamp}}</td>
    </tr>
    <tr class="overview last">
      <td colspan="3"><strong>Tests:</strong> {{results.tests}}<br></td>
    </tr>
    <tr>
      <td class="pass"><strong>{{results.passed}}</strong> passed</td>
      <td class="skip"><strong>{{results.errors}}</strong> errors</td>
      <td class="fail"><strong>{{results.failed}}</strong> failures</td>
    </tr>
  </table>

  {{#each results.modules}}
      <h2>{{@key}}</h2>

      {{#each this.completed}}
        <h3>{{@key}}</h3>
        <ul class="assertions">
          {{#each this.assertions}}
            <li>
              {{#if failure}}
                <span class="error">&#10006;</span>
              {{else}}
                <span class="success">&#10004;</span>
              {{/if}}

              {{this.message}}

              {{#if this.failure}}
                {{this.failure}}
              {{/if}}

              {{#if this.stacktrace}}
                <div class="stacktrace">
                    <a href="#">view stacktrace</a>
                    <code><pre>{{this.stacktrace}}</pre></code>
                </div>
              {{/if}}
            </li>
          {{/each}}
        </ul>

        <p>
          {{#if this.failed}}
            <span class="error"><strong>FAILED:</strong></span>
            <span class="error"><strong>{{this.failed}}</strong></span> assertions failed and
            <span class="success"><strong>{{this.passed}}</span></strong> passed. ({{this.time}}s)
          {{else}}
            <span class="success"><strong>OK.</strong></span>
            <span class="success"><strong>{{this.passed}}</strong></span> assertions passed. ({{this.time}}s)
          {{/if}}
        </p>
      {{/each}}

      {{#if this.skipped}}
        <h4>skipped</h4>
        <ul>
          {{#each this.skipped}}
            <li>{{this}}</li>
          {{/each}}
        </ul>
      {{/if}}

      <hr>
  {{/each}}

  <div id="nightwatch-logo"></div>

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
  $(function() {
    $('div.stacktrace').on('click', 'a', function(evt) {
      evt.preventDefault();

      var $link = $(this);
      var $code = $link.parent().find('code');

      $code.is(':visible') ? $link.text('hide stacktrace'):
                             $link.text('view stacktrace');

      $code.toggle();
    });
  });
  </script>
</body>
</html>

## html-reporter.js
var fs = require('fs');
var path = require('path');
var handlebars = require('handlebars');

module.exports = {
  write : function(results, options, done) {

    var reportFilename = options.filename_prefix + (Math.floor(Date.now() / 1000)) + '.html';
    var reportFilePath = path.join(__dirname, options.output_folder, reportFilename);

    // read the html template
    fs.readFile('html-reporter.hbs', function(err, data) {
      if (err) throw err;

      var template = data.toString();

      // merge the template with the test results data
      var html = handlebars.compile(template)({
        results   : results,
        options   : options,
        timestamp : new Date().toString(),
        browser   : options.filename_prefix.split('_').join(' ')
      });

      // write the html to a file
      fs.writeFile(reportFilePath, html, function(err) {
        if (err) throw err;
        console.log('Report generated: ' + reportFilePath);
        done();
      });
    });
  }
};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test Results - {{browser}}</title>

	<style>
	html, body {
	font-family: Arial,sans-serif;
	margin: 0;
	padding: 0;
	}

	body { padding: 10px 40px; }

	table { width: 100%; margin-bottom: 20px; }

	td {
	padding: 7px;
	border-top: none;
	border-left: 1px black solid;
	border-bottom: 1px black solid;
	border-right: none;
	}

	td.pass { color: #003b07; background: #86e191; }
	td.skip { color: #7d3a00; background: #ffd24a; }
	td.fail { color: #5e0e00; background: #ff9c8a; }

	tr:last-child { border-top: 1px black solid; }
	tr:last-child td { border-top: 1px black solid; }
	tr:first-child td { border-top: 1px black solid; }
	td:last-child { border-right: 1px black solid; }

	tr.overview td { padding-bottom: 0px; border-bottom: none; }
	tr.overview.last td { padding-bottom: 3px; }

	ul.assertions { list-style-type: none; }
	span.error { color: #AD2B2B; }
	span.success { color: #53891E; }

	.stacktrace { display: inline; }
	.stacktrace code { display: none; }

	#nightwatch-logo {
	position: absolute;
	top: 20px;
	right: 33px;
	width: 70px;
	height: 75px;
	background: transparent url('http://nightwatchjs.org/img/logo-nightwatch.png') no-repeat;
	background-size: 70px 75px;
	}
	</style>
	</head>

	<body>
	<h1>Test Results</h1>

	<table border="0" cellpadding="0" cellspacing="0">
	<tr class="overview">
	<td colspan="3" title="{{browser}}"><strong>Browser:</strong> {{browser}}</td>
	</tr>
	<tr class="overview">
	<td colspan="3"><strong>Timestamp:</strong> {{timestamp}}</td>
	</tr>
	<tr class="overview last">
	<td colspan="3"><strong>Tests:</strong> {{results.tests}}<br></td>
	</tr>
	<tr>
	<td class="pass"><strong>{{results.passed}}</strong> passed</td>
	<td class="skip"><strong>{{results.errors}}</strong> errors</td>
	<td class="fail"><strong>{{results.failed}}</strong> failures</td>
	</tr>
	</table>

	{{#each results.modules}}
	<h2>{{@key}}</h2>

	{{#each this.completed}}
	<h3>{{@key}}</h3>
	<ul class="assertions">
	{{#each this.assertions}}
	<li>
	{{#if failure}}
	<span class="error">✖</span>
	{{else}}
	<span class="success">✔</span>
	{{/if}}

	{{this.message}}

	{{#if this.failure}}
	{{this.failure}}
	{{/if}}

	{{#if this.stacktrace}}
	<div class="stacktrace">
	<a href="#">view stacktrace</a>
	<code><pre>{{this.stacktrace}}</pre></code>
	</div>
	{{/if}}
	</li>
	{{/each}}
	</ul>

	<p>
	{{#if this.failed}}
	<span class="error"><strong>FAILED:</strong></span>
	<span class="error"><strong>{{this.failed}}</strong></span> assertions failed and
	<span class="success"><strong>{{this.passed}}</span></strong> passed. ({{this.time}}s)
	{{else}}
	<span class="success"><strong>OK.</strong></span>
	<span class="success"><strong>{{this.passed}}</strong></span> assertions passed. ({{this.time}}s)
	{{/if}}
	</p>
	{{/each}}

	{{#if this.skipped}}
	<h4>skipped</h4>
	<ul>
	{{#each this.skipped}}
	<li>{{this}}</li>
	{{/each}}
	</ul>
	{{/if}}

	<hr>
	{{/each}}

	<div id="nightwatch-logo"></div>

	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script>
	$(function() {
	$('div.stacktrace').on('click', 'a', function(evt) {
	evt.preventDefault();

	var $link = $(this);
	var $code = $link.parent().find('code');

	$code.is(':visible') ? $link.text('hide stacktrace'):
	$link.text('view stacktrace');

	$code.toggle();
	});
	});
	</script>
	</body>
	</html>
	var fs = require('fs');
	var path = require('path');
	var handlebars = require('handlebars');

	module.exports = {
	write : function(results, options, done) {

	var reportFilename = options.filename_prefix + (Math.floor(Date.now() / 1000)) + '.html';
	var reportFilePath = path.join(__dirname, options.output_folder, reportFilename);

	// read the html template
	fs.readFile('html-reporter.hbs', function(err, data) {
	if (err) throw err;

	var template = data.toString();

	// merge the template with the test results data
	var html = handlebars.compile(template)({
	results : results,
	options : options,
	timestamp : new Date().toString(),
	browser : options.filename_prefix.split('_').join(' ')
	});

	// write the html to a file
	fs.writeFile(reportFilePath, html, function(err) {
	if (err) throw err;
	console.log('Report generated: ' + reportFilePath);
	done();
	});
	});
	}
	};