Customize html report

If you need to customize the final HTML report you are free to do so. The report is just an HTML file you only have to careful to not remove some AngularJS specific tags. But it would please do not touch the link to our GitHub page...at least give us some credit.

Well ok...so you do not want to modify the report.html manually after each e2e test run?

Here is a recipe with just some already available tools. As we explained in Extra content in output folder you can launch your own code after the protractor test, if you add onComplete(){} code to the protractor.conf

In the following protractor.conf example we use cheerio to modify the document with jQuery like "commands". Please explore and learn for yourself...you can pretty customize everything with this technique...as long as you don´t destroy the page (i.e. fiddle with AngularJs tags).

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const HtmlReporter = require("protractor-beautiful-reporter");
const fs = require("fs");
const path = require("path");
const cheerio = require('cheerio');
const e2eOutputDir = "dist/e2e/screenshots";

exports.config = {
  allScriptsTimeout: 11000,
  specs: ["./src/**/*.e2e-spec.ts"],
  capabilities: {
    browserName: "chrome"
  },
  directConnect: true,
  noGlobals: false,
  baseUrl: "http://localhost:4200/",
  framework: "jasmine",
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () {
    }
  },
  onPrepare() {
    require("ts-node").register({
      project: require("path").join(__dirname, "./tsconfig.e2e.json")
    });
    //jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    let hrep = new HtmlReporter({
      baseDirectory: e2eOutputDir
      , cssOverrideFile: "assets/reporter-style.css",
      gatherBrowserLogs: true
    });
    jasmine.getEnv().addReporter(
      hrep.getJasmine2Reporter()
    );
  },
  onComplete() {
    const src = fs.readFileSync(path.join(e2eOutputDir, "report.html")).toString();
    //now using cheerio to modify the document with jQuery commands
    const $ = cheerio.load(src);

    if ($('head meta[name="x-ispatched"][content="true"]').length > 0) {
      // if the document was modded already don´t do it again
      console.log("is already patched");
    } else {
      // modify the document with jQuery like commands
      $('h2').before('<div class="jumbotron">\n' +
        '  <h1>Your big above header announcement</h1>\n' +
        '  <p>Magical summer / A squirrel, dark monkey roars / beyond the petal</p>' +
        '</div>');
      $('div.center').before('<div>custom content above center footer</div>')
        .prepend('<div>custom content above footer</div>')
        .append('<div>custom content above footer</div>')
        .after('<div>custom content below center footer</div>');

      // mark page as already patched so we dont accidently add duplicate content
      $('head').append('<meta name="x-ispatched" content="true">');

      // safe the modified DOM
      fs.writeFileSync(path.join(e2eOutputDir, "report.html"), $.html(), 'utf8');

    }
  }
};

The outcome of this example could look like this: