protractor-beautiful-reporter

<!DOCTYPE html> <html lang="en" ng-app="reportingApp" ng-csp> <head> <meta charset="UTF-8"> <title>Protractor Screenshot Report</title> <link rel="stylesheet" href="assets/main.css"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">  <script src="assets/angular.min.js"></script> <script src="app.js"></script> <script src="assets/jquery.min.js"></script> <script src="assets/bootstrap.min.js"></script> <script src="assets/circular-json.js"></script> </head> <body ng-controller="ScreenshotReportController as ctrl" class="ng-cloak">  <h2><span class="report-title">  </span> <span ng-if="ctrl.showTotalDurationIn==='header'" class="h-total-duration"> ( {{ ctrl.totalDuration() | timeFormat:ctrl.totalDurationFormat }} )</span> <div class="pull-right"> <button class="btn btn-default" ng-class="{active: !ctrl.displayTime}" ng-click="ctrl.displayTime = !ctrl.displayTime">TIME </button> <button class="btn btn-default" ng-class="{active: !ctrl.displayBrowser}" ng-click="ctrl.displayBrowser = !ctrl.displayBrowser">BROWSER </button> <button class="btn btn-default" ng-class="{active: !ctrl.displaySessionId}" ng-click="ctrl.displaySessionId = !ctrl.displaySessionId">SESSION ID </button> <button class="btn btn-default" ng-class="{active: !ctrl.displayOS}" ng-click="ctrl.displayOS = !ctrl.displayOS">OS </button> <button class="btn btn-default" ng-class="{active: ctrl.inlineScreenshots}" ng-click="ctrl.inlineScreenshots = !ctrl.inlineScreenshots">INLINE SCREENSHOTS </button> </div> </h2> <div class="bh-total-duration" ng-if="ctrl.showTotalDurationIn==='belowHeader'" ><span>Duration {{ ctrl.totalDuration() | timeFormat:ctrl.totalDurationFormat }}</span></div>  <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" ng-if="ctrl.passCount()" data-container="body" data-toggle="tooltip" title="Passed: {{ctrl.passCount()}} {{(ctrl.failCount() ? '' : '(no failures!)')}}" ng-style="{'width': ctrl.passPerc() + '%'}"><div class="statusNumber">{{ctrl.passCount()}}</div></div> <div class="progress-bar progress-bar-warning" ng-if="ctrl.pendingCount()" data-container="body" data-toggle="tooltip" data-placement="{{(ctrl.pendingPerc()<5)?'left':'top'}}" title="Pending: {{ctrl.pendingCount()}}" ng-style="{'width': ctrl.pendingPerc() + '%'}"><div class="statusNumber">{{ctrl.pendingCount()}}</div></div> <div class="progress-bar progress-bar-danger" ng-if="ctrl.failCount()" data-container="body" data-toggle="tooltip" title="Failed: {{ctrl.failCount()}}" ng-style="{'width': ctrl.failPerc() + '%'}"><div class="statusNumber">{{ctrl.failCount()}}</div></div> </div> <label>Search: <input ng-model="searchSettings.description"></label> <div class="pull-right"> <button class="btn btn-default" ng-class="{active: searchSettings.allselected}" ng-click="ctrl.chooseAllTypes()">ALL</button> <button class="btn btn-default" ng-class="{active: searchSettings.passed}" ng-click="searchSettings.passed = !searchSettings.passed">PASSED </button> <button class="btn btn-default" ng-class="{active: searchSettings.failed}" ng-click="searchSettings.failed = !searchSettings.failed">FAILED </button> <button class="btn btn-default" ng-class="{active: searchSettings.pending}" ng-click="searchSettings.pending = !searchSettings.pending">PENDING </button> <button class="btn btn-default" ng-class="{active: searchSettings.withLog}" ng-click="searchSettings.withLog = !searchSettings.withLog">OR WITH LOG </button> <br><br> </div>  <table class="table"> <thead> <tr class="active"> <th>Status</th> <th ng-if="!ctrl.displayTime" ng-show="ctrl.displayTime">Time</th> <th>Description</th> <th ng-if="!ctrl.displayBrowser" ng-show="ctrl.displayBrowser">Browser</th> <th ng-if="!ctrl.displaySessionId" ng-show="ctrl.displaySessionId">Session ID</th> <th ng-if="!ctrl.displayOS" ng-show="ctrl.displayOS">OS</th> <th>Message</th> <th>Log</th> <th>Stack</th> <th>Screen</th> </tr> </thead> <tbody ng-repeat="result in ctrl.results | bySearchSettings:searchSettings">  <tr ng-if="result.displaySpecName"> <th class="spec" colspan="10">{{ctrl.currentSpec = ctrl.getSpec(result.description)}}</th> </tr> <tr ng-if="ctrl.currentParent != ctrl.getParent(result.description) && ctrl.getParent(result.description)"> <th class="testCase" colspan="10">{{ctrl.currentParent = ctrl.getParent(result.description)}}</th> </tr> <tr ng-class="{danger: !result.passed && !result.pending, warning: result.pending}"> <td class="smallColumn status c-status" ng-if="result.passed && !result.pending"> <span class="label label-success"><span class="glyphicon glyphicon-ok"></span></span> </td> <td class="smallColumn status c-status" ng-if="!result.passed && !result.pending"> <span class="label label-danger"><span class="glyphicon glyphicon-remove"></span></span> </td> <td class="smallColumn status c-status" ng-if="result.pending"> <span class="label label-warning"><span class="glyphicon glyphicon-option-horizontal"></span></span> </td> <td class="smallColumn c-time" ng-if="!ctrl.displayTime" ng-show="ctrl.displayTime"> <span class="label label-default" ng-class="{'label-warning': result.duration > ctrl.warningTime, 'label-danger': result.duration > ctrl.dangerTime}">{{ctrl.round(result.duration, 1)}} s</span> </td> <td class="mediumColumn c-sdescription">{{ctrl.getShortDescription(result.description)}}</td> <td ng-if="!ctrl.displayBrowser" ng-show="ctrl.displayBrowser" class="c-browser">{{result.browser.name}} {{result.browser.version}}</td> <td ng-if="!ctrl.displaySessionId" ng-show="ctrl.displaySessionId" class="c-session-id">{{result.sessionId}}</td> <td ng-if="!ctrl.displayOS" ng-show="ctrl.displayOS" class="c-display-os">{{result.os}}</td> <td class="c-messages"> <div ng-if="ctrl.isValueAnArray(result.message)"> <span class="message" ng-repeat="message in result.message track by $index">{{message}}</span> </div> <div ng-if="!ctrl.isValueAnArray(result.message)"> {{result.message}} </div> </td> <td class="logColumn c-log"> <span class="label label-default ng-binding label-warning pull-right consoleLogLabel" ng-if="result.logWarnings > 0" data-toggle="modal" data-target="#modal{{$index}}">{{result.logWarnings}}</span> <span class="label label-default ng-binding label-danger pull-right consoleLogLabel" ng-if="result.logErrors > 0" data-toggle="modal" data-target="#modal{{$index}}">{{result.logErrors}}</span> </td> <td class="smallColumn c-stacktrace">  <div ng-if="(!result.passed && !result.pending) || result.browserLogs.length > 0"> <span class="label label-white ng-binding pull-right" data-toggle="modal" data-target="#modal{{$index}}" ng-if="result.trace.length > 0"> <span class="glyphicon glyphicon-warning-sign red"></span> </span>  <pbr-stack-modal index="$index" data="result"></pbr-stack-modal> </div> </td> <td ng-class="{'mediumColumn': ctrl.inlineScreenshots && result.screenShotFile}" class="c-in-screenshots"> <div ng-if="!result.pending && result.screenShotFile"> <span ng-if="!ctrl.inlineScreenshots && result.screenShotFile" class="label label-white ng-binding pull-right" data-toggle="modal" data-target="#imageModal{{$index}}"> <span class="glyphicon glyphicon-picture black"></span> </span> <a href="" ng-if="ctrl.inlineScreenshots && result.screenShotFile" data-toggle="modal" data-target="#imageModal{{$index}}"> <img ng-src="{{result.screenShotFile}}" class="screenshotLink" alt="inline screenshot"></a>  <pbr-screenshot-modal index="$index" data="result" has-previous="ctrl.hasPreviousScreenshot($index)" previous="ctrl.getPreviousScreenshotIdx($index)" has-next="ctrl.hasNextScreenshot($index)" next="ctrl.getNextScreenshotIdx($index)" ></pbr-screenshot-modal> </div> </td> </tr> </tbody> </table> <div class="center"> <a class="github-button" href="https://github.com/Evilweed/protractor-beautiful-reporter" data-size="large" data-show-count="true" aria-label="Star Evilweed/protractor-beautiful-reporter on GitHub">Star</a> </div> {{ctrl.currentParent = "";""}} <div class="f-total-duration" ng-if="ctrl.showTotalDurationIn==='footer'" ><span>Duration {{ ctrl.totalDuration() | timeFormat:ctrl.totalDurationFormat }}</span></div> <script src="assets/main.js"></script> <script async defer src="assets/buttons.js"></script> </body> </html>