Skip to content

Commit

Permalink
feat: Image to ASCII Support
Browse files Browse the repository at this point in the history
  • Loading branch information
@azachar
azachar committed Nov 27, 2016
1 parent fd51ac2 commit 163a9a2
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 66 deletions.
148 changes: 85 additions & 63 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/protractor-screenshoter-plugin/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[![npm](https://img.shields.io/npm/dm/protractor-screenshoter-plugin.svg?style=flat-square)](https://www.npmjs.com/package/protractor-screenshoter-plugin)
[![npm](https://img.shields.io/npm/dt/protractor-screenshoter-plugin.svg?style=flat-square)](https://www.npmjs.com/package/protractor-screenshoter-plugin)
[![npm](https://img.shields.io/npm/dm/protractor-screenshoter-plugin.svg?style=flat-square)](https://www.npmjs.com/package/protractor-screenshoter-plugin) [![npm](https://img.shields.io/npm/dt/protractor-screenshoter-plugin.svg?style=flat-square)](https://www.npmjs.com/package/protractor-screenshoter-plugin)

[![npm](https://img.shields.io/npm/v/protractor-screenshoter-plugin.svg?style=flat-square)](https://www.npmjs.com/package/protractor-screenshoter-plugin)
[![npm](https://img.shields.io/npm/l/protractor-screenshoter-plugin.svg?style=flat-square)](https://www.npmjs.com/package/protractor-screenshoter-plugin)
[![Semver](http://img.shields.io/SemVer/2.0.0.png)](http://semver.org/spec/v2.0.0.html)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![npm](https://img.shields.io/npm/v/protractor-screenshoter-plugin.svg?style=flat-square)](https://www.npmjs.com/package/protractor-screenshoter-plugin) [![npm](https://img.shields.io/npm/l/protractor-screenshoter-plugin.svg?style=flat-square)](https://www.npmjs.com/package/protractor-screenshoter-plugin) [![Semver](http://img.shields.io/SemVer/2.0.0.png)](http://semver.org/spec/v2.0.0.html) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![Dependency Status](https://david-dm.org/azachar/protractor-screenshoter-plugin.svg)](https://david-dm.org/azachar/protractor-screenshoter-plugin)
[![devDependency Status](https://david-dm.org/azachar/protractor-screenshoter-plugin/dev-status.svg)](https://david-dm.org/azachar/protractor-screenshoter-plugin#info=devDependencies)
[![Dependency Status](https://david-dm.org/azachar/protractor-screenshoter-plugin.svg)](https://david-dm.org/azachar/protractor-screenshoter-plugin) [![devDependency Status](https://david-dm.org/azachar/protractor-screenshoter-plugin/dev-status.svg)](https://david-dm.org/azachar/protractor-screenshoter-plugin#info=devDependencies)

[![Build Status](https://travis-ci.org/azachar/protractor-screenshoter-plugin.svg?branch=master)](https://travis-ci.org/azachar/protractor-screenshoter-plugin)

# This branch has experimental parallel support
# This branch has experimental parallel support and image to ascii support

For each run of the protractor it creates a separate tests results that are in the end merged into one report.

If there is a failure (based on the config) it creates also an ascii image into log. For this feature you need to install additional os depend libraries. For more information read the doc bellow.

Configuration such as this one are supported:
```js

```javascript
exports.config = {
framework: 'jasmine2',
//like usual (no change in config api)
Expand All @@ -27,6 +26,10 @@ exports.config = {
screenshotOnExpect: 'failure+success',
screenshotOnSpec: 'none',
withLogs: 'true',
imageToAscii: 'failure',
imageToAsciiOpts: {
bg: true
},
writeReportFreq: 'asap',
clearFoldersBeforeTest: true
}],
Expand All @@ -39,33 +42,38 @@ exports.config = {
};
```


# protractor-screenshoter-plugin
This plugin captures for each **expectation** or **spec** console **logs** and makes **screenshots** for **each browser** instance. Also it comes with a beautifull angular based [HTML reporter for chat alike apps](https://github.com/azachar/screenshoter-report-analyzer).

1. This plugin can take screenshots for each Jasmine2 expect success/failure on *multiple-browsers instances* at once.
This plugin captures for each **expectation** or **spec** console **logs** and makes **screenshots** for **each browser** instance. Also it comes with a beautifull angular based [HTML reporter for chat alike apps](https://github.com/azachar/screenshoter-report-analyzer).

1. This plugin can take screenshots for each Jasmine2 expect success/failure on _multiple-browsers instances_ at once.
2. It can take screenshots for each spec failure / success as well
3. For each expectation or spec can capture console logs for each browser instance
4. It can generate a report analyzer - angular+bootstrap HTML reports with active filtering to easy find out why your tests are failing
5. HTML reports allow you to analyze your browser's console logs as well.
6. Support circleci.com (the report displays a build number, a branch, etc. )

### Screenshots
##### Reporter Controls
## Screenshots

### Reporter Controls

![Screenshoter reporter controlls](https://cdn.rawgit.com/azachar/screenshoter-report-analyzer/master/screenshots/screenshot1.png)

##### Expanded Spec
### Expanded Spec

![Screenshoter reporter spec](https://cdn.rawgit.com/azachar/screenshoter-report-analyzer/master/screenshots/screenshot2.png)

##### Forked Browser Support
### Forked Browser Support

![Screenshoter multi browsers](https://cdn.rawgit.com/azachar/screenshoter-report-analyzer/master/screenshots/screenshot4.png)

### Console log management

##### Console log management
![Screenshoter reporter console](https://cdn.rawgit.com/azachar/screenshoter-report-analyzer/master/screenshots/screenshot3.png)

## Motivation
The main motivation to make this fork from https://github.com/abhishekswain/jasmine2-protractor-utils was taking screenshots from multiple browsers at once. So it would allow me to test a chat alike apps where 2+ browsers instances are required to be run from one single test.

The main motivation to make this fork from <https://github.com/abhishekswain/jasmine2-protractor-utils> was taking screenshots from multiple browsers at once. So it would allow me to test a chat alike apps where 2+ browsers instances are required to be run from one single test.

Later on, I realized that I want to have a quick overview what is happening with my tests on the CI server. Without even re-running them locally. When something goes wrong you are basically unable to discover it. This plugin allows you to do so.

Expand All @@ -80,15 +88,16 @@ Also, I created a list of [alternatives](https://github.com/azachar/protractor-s
# How to install

```
npm install azachar/protractor-screenshoter-plugin#feat-parallel-support
npm install azachar/protractor-screenshoter-plugin#feat-ascii-image
```

NOTE: This plugin depends on [screenshoter-report-analyzer](https://github.com/azachar/screenshoter-report-analyzer). So sometimes even if this plugin version is not updated, the reporter might be.

# Usage

Add this plugin to the protractor config file:
```js

```javascript
exports.config = {
plugins: [{
package: 'protractor-screenshoter-plugin',
Expand All @@ -98,6 +107,8 @@ exports.config = {
htmlReport: {Boolean} (Default - true),
screenshotPath: {String} (Default - '<reports/e2e>/screenshots')
writeReportFreq: {String} (Default - 'end', 'spec', 'asap'),
imageToAscii: {String} (Default - 'failure+success', 'failure', 'none'),
imageToAsciiOpts:{Obbject} (Default - {bg:true})
clearFoldersBeforeTest: {Boolean} (Default - false),
failTestOnErrorLog: {
failTestOnErrorLogLevel: {Number}, (Default - 900)
Expand All @@ -115,7 +126,7 @@ exports.config = {

Example:

```js
```javascript
exports.config = {
framework: 'jasmine2',

Expand All @@ -126,6 +137,7 @@ exports.config = {
screenshotOnSpec: 'none',
withLogs: 'true',
writeReportFreq: 'asap',
imageToAscii: 'failure',
clearFoldersBeforeTest: true
}],

Expand All @@ -138,16 +150,16 @@ exports.config = {
};
```


## Single browser app
No need to setup anything special to make screenshots or capture console logs.

No need to setup anything special to make screenshots or capture console logs.

## Multi-browser chat alike app

In order to use multi-browser chat alike testing, you need to keep a track of all browser instances by yourself:

You can do it like this

```
var a = browser.forkNewDriverInstance();
var b = browser.forkNewDriverInstance();
Expand All @@ -156,84 +168,91 @@ global.screenshotBrowsers['anyCustomNameOfBrowserDisplayedInReports'] = a;
global.screenshotBrowsers.userB = b;
```

if you close the browser, remove it also from global.screenshotBrowsers
After closing browser making screenshots won't work. Make sense, right no browser no screenshot.
if you close the browser, remove it also from global.screenshotBrowsers After closing browser making screenshots won't work. Make sense, right no browser no screenshot.

```
delete global.screenshotBrowsers.userB;
```

to reset screenshotBrowsers from your previous spec use this code

```
beforeAll(function() {
beforeAll(function() {
global.screenshotBrowsers = {};
});
```


## htmlReport

If set to 'false', disables HTML report generation.

**NOTE: This tool doesn't really make sense to use without the reports.**
If set to 'false', disables HTML report generation.

Default: 'true'
Valid Options: true/false
**NOTE: This tool doesn't really make sense to use without the reports.**

Default: 'true' Valid Options: true/false

## screenshotOnExpect

Takes from each browser instance stored in global.screenshotBrowsers screenshots for each Jasmine2 expect failure or success, depending on value.

Default: 'failure+success'
Valid Options: 'failure+success'/'failure'/'none'
Takes from each browser instance stored in global.screenshotBrowsers screenshots for each Jasmine2 expect failure or success, depending on value.

Default: 'failure+success' Valid Options: 'failure+success'/'failure'/'none'

## screenshotOnSpec

Takes from each browser instance stored in global.screenshotBrowsers screenshots for each Jasmine2 spec failure or success, depending on value.
Takes from each browser instance stored in global.screenshotBrowsers screenshots for each Jasmine2 spec failure or success, depending on value.

Default: 'failure'
Valid Options: 'failure+success'/'failure'/'none'
Default: 'failure' Valid Options: 'failure+success'/'failure'/'none'

## withLogs (Chrome only)
## imageToAscii

Additionally make an ascii image into the console so you can find the issue of you test in your build easier.

Please note that one of the option of `screenshotOnExpect` or `screenshotOnSpec` must be used to generate picture the initial image.

Default: 'failure' Valid Options: 'failure+success'/'failure'/'none'

To use this feature please follow instructions on <https://github.com/IonicaBizau/image-to-ascii/blob/master/INSTALLATION.md>

If set to 'true', capture from chrome all logs after each expect or spec
## imageToAsciiOpts

*NOTE: This works only on chrome!*
Options for imageToAscii conversion, more info can be found at <https://github.com/IonicaBizau/image-to-ascii>

Default: 'true'
Valid Options: true/false
Default: ``{bg:true}``Â

In order to make chrome' console works properly, you need to modify your ``protractor.conf`` as follows https://github.com/webdriverio/webdriverio/issues/491#issuecomment-95510796
## withLogs (Chrome only)

If set to 'true', capture from chrome all logs after each expect or spec

_NOTE: This works only on chrome!_

Default: 'true' Valid Options: true/false

In order to make chrome' console works properly, you need to modify your `protractor.conf` as follows <https://github.com/webdriverio/webdriverio/issues/491#issuecomment-95510796>

## writeReportFreq

By default, the output JSON file with tests results is written at the end of the execution of jasmine tests. However for debug process is better to get it immediately after each expectation - specify the option 'asap'. Also, there is a less usual option to write it after each test - use the option 'spec'. The recommended is to left it out for a CI server and for a local debugging use the option 'asap'.

Default: 'end'
Valid Options: 'asap', 'spec', 'end'
Default: 'end' Valid Options: 'asap', 'spec', 'end'

## screenshotPath

The path where the final report including screenshots will be saved. If the path does not exist, will be created.
e.g './reports/something/samewhere/', please take care of './' and '/' at the beginning and end.
The path where the final report including screenshots will be saved. If the path does not exist, will be created. e.g './reports/something/samewhere/', please take care of './' and '/' at the beginning and end.

Please note that due to an HTML reporter sugar, the final screenshots are stored in the subfolder relative to this $screenshotPath parameter, e.g. in the folder ``$screenshotPath/screenshots'``
Please note that due to an HTML reporter sugar, the final screenshots are stored in the subfolder relative to this $screenshotPath parameter, e.g. in the folder `$screenshotPath/screenshots'`

Default: 'reports/e2e'
Default: 'reports/e2e'

## clearFoldersBeforeTest

If this flag set to true, screenshot and HTML report directories will be emptied before generating new reports and screenshots
If this flag set to true, screenshot and HTML report directories will be emptied before generating new reports and screenshots

Default: false
Default: false

## failTestOnErrorLog (Chrome only)

Contains a set of configuration for console log. When browser console has errors of a certain log level (default:>900), the spec/test is marked failed along with log in the error report/stacktrace.

*NOTE: This works only on chrome!*
_NOTE: This works only on chrome!_

### failTestOnErrorLogLevel

Expand All @@ -251,15 +270,17 @@ Please do not specify this flag , if you don't supply any such keywords.

After cloning the project you can run tests as follows:

1. ``npm install``
2. ``npm run setup``
3. ``npm run server &``
4. ``npm test``
1. `npm install`
2. `npm run setup`
3. `npm run server &`
4. `npm test`

## Committing
Please use ``git-cz`` to format your commit message.

Please use `git-cz` to format your commit message.

### Releasing

To deploy a new version run commands. If all tests are passed it will be published to npm on its own.

```
Expand All @@ -268,6 +289,7 @@ git push --follow-tags origin master
```

## TODO
* Convert to typescript based es6 npm plugin with a proper test infrastructure
* Support Mocha framework
* 100% Test coverage

- Convert to typescript based es6 npm plugin with a proper test infrastructure
- Support Mocha framework
- 100% Test coverage
26 changes: 23 additions & 3 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ var uuid = require('uuid');
var moment = require('moment');
var path = require('path');
var dereferenceJSON = require('extendr').dereferenceJSON;
var imageToAscii = require("image-to-ascii")

/**
* This plugin does few things:
Expand Down Expand Up @@ -60,7 +61,9 @@ protractorUtil.takeScreenshot = function(context, report) {
var stream = fse.createWriteStream(finalFile);
stream.write(new Buffer(png, 'base64'));
stream.end();
report(screenshotFile, browserName);
stream.on('finish', function() {
report(screenshotFile, browserName, finalFile);
});
}, function(err) {
console.warn('Error in browser instance ' + browserName + ' while taking the screenshot: ' + finalFile + ' - ' + err.message);
});
Expand Down Expand Up @@ -96,23 +99,36 @@ protractorUtil.takeScreenshotOnExpectDone = function(context) {
expectation.when = new Date();

var makeScreenshotsFromEachBrowsers = false;
var makeAsciiLog = false;
if (passed) {
protractorUtil.test.passedExpectations.push(expectation);
makeScreenshotsFromEachBrowsers = context.config.screenshotOnExpect === 'failure+success';
makeAsciiLog = context.config.imageToAscii === 'failure+success';
} else {
protractorUtil.test.failedExpectations.push(expectation);
makeScreenshotsFromEachBrowsers = context.config.screenshotOnExpect === 'failure+success' || context.config.screenshotOnExpect === 'failure';
makeAsciiLog = context.config.imageToAscii === 'failure+success' || context.config.imageToAscii === 'failure';
}
if (makeScreenshotsFromEachBrowsers) {
protractorUtil.takeScreenshot(context, function(file, browserName) {
protractorUtil.takeScreenshot(context, function(filename, browserName, finalFile) {
expectation.screenshots.push({
img: file,
img: filename,
browser: browserName,
when: new Date()
});
if (context.config.writeReportFreq === 'asap') {
protractorUtil.writeReport(context);
}
if (makeAsciiLog) {
try {
imageToAscii(finalFile, context.config.imageToAsciiOpts, function(err, converted) {
console.error(err || converted);
});
} catch (err) {
console.warn(err);
console.info('Please check the installation at https://github.com/IonicaBizau/image-to-ascii/blob/master/INSTALLATION.md');
}
}
});
}
if (context.config.withLogs) {
Expand Down Expand Up @@ -364,6 +380,10 @@ protractorUtil.prototype.setup = function() {
withLogs: true,
screenshotOnExpect: 'failure+success',
screenshotOnSpec: 'failure+success',
imageToAscii: 'failure',
imageToAsciiOpts: {
bg: true
},
htmlReport: true,
writeReportFreq: 'end'
}
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"dependencies": {
"extendr": "^3.2.2",
"fs-extra": "^1.0.0",
"image-to-ascii": "^3.0.5",
"lodash": "^4.16.4",
"mkdirp": "^0.5.1",
"moment": "^2.15.1",
Expand Down
Loading

0 comments on commit 163a9a2

Please sign in to comment.