Protractor Report Tab for Azure Pipelines

Azure DevOps extension that provides a task for publishing Protractor report in a HTML format and embeds it into a Build and Release pages.

The extension is and will remain free of charge, however if you would like to support me please consider donating by using the PayPal button above.

Configuration

Protractor

Before starting using this extension it is necessary to install Protractor Beautiful Reporter package via npm. For more information and configuration please refer to protractor-beautiful-reporter.

import * as BeautifulReporter from 'protractor-beautiful-reporter';

const beautifulReporter = new BeautifulReporter({
  baseDirectory: resultsDir,
  screenshotsSubfolder: 'screenshots',
  jsonsSubfolder: 'jsons',
  takeScreenShotsOnlyForFailedSpecs: false,
  docName: 'report.html',
  preserveDirectory: true
});

jasmine.getEnv().addReporter(beautifulReporter.getJasmine2Reporter());

Extension

In order to see report on Protractor Tab one must first use Publish Protractor Report task. This is supporting task which makes Protractor tab visible.

This task takes two parameters - required cwd which is a path to Protractor Report directory and also optional tabName which is the name of the tab displayed within Azure DevOps report. The directory used to generate HTML must contain combined.json - file which is a source of the data displayed in the report. We also check content of screenshots directory for associated screenshots image files and upload them as attachments to the Azure DevOps cloud storage.

Example YAML setup

steps:
- task: PublishProtractorReport@1
  displayName: 'Publish Protractor Report'
  inputs:
    cwd: './protractor'
    tabName: 'My Web Test'

Example GUI setup

Protractor Report Task

Result Example