Adjusting the report template


#1

Ranorex Webtestit has a highly modular report, which is made up from handlebars templates and is rendered directly within the app once you navigate to one of your generated report files, located by default in the reports folder.

This guide will introduce you to customizing the report template to suit your needs.

  1. Understanding global vs project specific templates
  2. Creating project specific overrides
  3. Modifying the report
  4. Adding a company logo
  5. What if my templates are wrong? How can I revert them?
  6. What other variables are available

Make sure to follow these steps in order.

Understanding global vs project specific templates

Reports are generated from templates. You can find the default set installed in your global .webtestit folder located inside your user’s folder. To quickly navigate to it, open the templates folder via the apps menu:

You will find a folder named report with a few handlebars files.
handlebars

As you can see these are divided upon a base template called report.hbs and few partials, which are meant to divide sub-sections into distinct files.

Adjusting these templates will take effect for every Webtestit project you’re working with. If you prefer to customize the reports on a per project basis you need to have project local overrides.

Creating project specific overrides

In your project create a top-level folder templates and copy the report folder from the global templates in there.

Next, make that the previously created templates folder is actually used inside the project. To accomplish that, simply open the project settings from the Preferences menu, locate and set the templates override folder:

Modifying the report

Let’s examine what template files we got here. The report.hbs is the main report rendering entry. The file starts with some inline CSS rules which apply to the @media print query-selector, thus only rendering when printed to PDF. If you need to customize the appearance of your report, this is a good place to do so. As an example let’s say we want to adjust the test-summary header to show a different background color and more padding we could add the following code in the style block of the file report.hbs:

<style>
  .test-summary {
    background-color: #FB9836; padding: 10px;
  }
 ...

Upon saving, navigating to a report. In the report panel header, you’ll find a refresh button which will re-render the report with the new adjustments.

refreshReport

The new report would look like the following:

Adding a company logo

Imagine we’d want to add our company logo to every report header. First, let’s create a folder images inside the templates/report folder. In there we’re gonna place our companies logo named as logo.jpg
In the summary.hbs we will add the following:

{{> summary.hbs}} {{> report-filter.hbs}}

This directive tells the report to include the partial named summary.hbs at this specific location in the report. When we open that file we’ll find a div containing the test-summarydiv which is rendering the top section of our report. In order to show our logo we can tweak it like this:

<style>
   .test-summary__company-logo {
      width: 200px;
      float: left;
  }

  .test-summary__title {
    text-align: right;
  }

 .donut__hole {
    fill: #FB9836;
  }
</style>

<div class="test-summary">
  <div>
    <img class="test-summary__company-logo" src="{{projectRoot}}/reports/images/logo.jpg" />
    <div class="test-summary__title">Summary</div>
  </div>
  ...

We’re moving the test-summary__title together with an img.test-summary__title tag into a new div. In order to reflect the mapping to the previously created images folder containing our logo, we can make use of the {{projectRoot}} template variable, which will point exactly to the root of your project. From there on we concatenate the final destination templates/report/images/logo.jpg. And with a bit of extra CSS in the above style tag we will get something like this as a result:

Wonder why we’re naming our classes that specific way? Ranorex Webtestit leverages the Block-Element-Modifier (BEM) methodology for sane and consistent CSS rules.

What if my templates are wrong? How can I revert them?

As long as we’re talking about project-specific templates, you can simply overwrite them with new ones, or delete them altogether. Ranorex Webtestit will prefer project local templates and if it can’t find any of them - even single partials - it will take the global version instead.

What other variables are available

So far we’ve used the {{projectRoot}} variable to gain access to the project’s root during rendering. But there are more.

endpoints

this will contain an interface with the following properties for each executed endpoint:

export interface EndpointData {
  name: string;
  time: number;
  timestamp: Date;
  readableTimestamp: string;
  testSuites: TestSuite[];
  failures: number;
  readableDuration: string;
  testCaseCount: number;
  testSuiteCount: number;
  isVisible: boolean;
  skipped: number;
  iconPath: string;
  id: string;
  headless?: boolean;
}

testSuites

From within the endpoints you have access to the TestSuites that were run on the specific endpoint:

export interface TestSuite {
  errors: string;
  expanded: boolean;
  failures: string;
  id: string;
  endpoint: Endpoint;
  name: string;
  skipped: string;
  testCases: TestCase[];
  tests: string;
  time: string;
  readableDuration: string;
  timestamp: Date;
  readableTimeStamp: string;
  extraElements?: ExtraElements[];
  isVisible: boolean;
}

testCases

From within the testSuites you have access to the TestCases that have been run on the specific test suite.

export interface TestCase {
  className: string;
  expanded?: boolean;
  fileName: string;
  filePath?: string;
  lineNumber?: number;
  failure: boolean | TestFailure;
  loading?: boolean;
  skipped: boolean;
  endpointName?: string;
  endpointBrowserName?: string;
  name: string;
  time: string;
  id: string;
  jiraIssue?: JiraData;
  testrailData?: { case_id?: number, suite_id?: number };
  testCaseNotFound?: boolean;
  screenshotFound?: boolean;
  extraElements?: ExtraElements[];
  formattedTimestamp?: string;
  screenshot?: string;
  isVisible: boolean;
}

extraElements

Use extraElementValue helper to access extra element value from report, it accepts two arguments: extraElements array and name of element

export interface ExtraElements{
  name: string;
  value: string | null;
  attributes?: ExtraAttributes;
}

extraAttributes

export interface ExtraAttributes { [name: string]: string | null; }

Jira issue

The Jira issue will give you the details of the linked Jira issue for the given test case

export interface JiraData {
  id: string;
  key: string;
  isCompleted: boolean;
  testCaseNotFound?: boolean;
}

failure

export interface TestFailure {
  message: string;
  trace: string;
  attributes?: ExtraAttributes;
}

jiraAvailable

this indicates whether your tests are connected to Jira and you’ve set up the credentials

isVisible

this is calculated based on selected filters

@root

to access any of root variables from any template you can use @root (etc: @root.jiraAvailable, @root.projectRoot …)


Test report summary windows shall be improved
Screenshot is not shown in the report on failure (Java) is NOT working
Create screenshots on failure for TypeScript / Protractor based projects
Create screenshots on failure for Java / TestNG based projects
How to add parameter information to report
Release notes v0.8.0
listed #2

Reasons for "No further actions available" in a test report