npmpackage.info

Gathering detailed insights and metrics for protractor-screenshoter-plugin

Other packages similar to protractor-screenshoter-plugin

miller-svt--protractor-screenshoter-plugin

0.11.1

A jasmine2 protractor plugin that captures for each browser instance a screenshot and browsers' console logs. The snapshot is made optionally for each expect or spec. Plugins comes with a beautiful angular based analytics tool to visually check and fix te

protractor-screenshoter-plugin

A brand new jasmine2 protractor plugin that captures for each browser instance a screenshot, console logs, raw HTML and DB dumps. The snapshot is made optionally for each expect or spec. Plugins comes with a beautiful angular based analytics tool to visually check and fix tests results.

0.10.3

NOASSERTION

JavaScript

117.13 kB

1,830,448 1.7

Installations

npm install protractor-screenshoter-plugin

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.11.0

NPM Version

6.4.1 Score

71.2

Supply Chain

95.8

Quality

74.6

Maintenance

100

Vulnerability

99.3

License

Pull Requests

Open

11

Total

38

Closed

15

Merged

12

Issues

Open

11

Total

62

Closed

51

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

JavaScript

JavaScript (100%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

azachar

Download Statistics

Total Downloads

1,830,448

Last Day

277

Last Week

1,256

Last Month

4,712

Last Year

116,340

GitHub Statistics

89 Stars

163 Commits

24 Forks

9 Watching

88 Branches

1 Contributors

Bundle Size

431.00 kB

Minified

117.13 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.10.3

Package Id

protractor-screenshoter-plugin@0.10.3

Unpacked Size

66.31 kB

Size

18.49 kB

File Count

NPM Version

6.4.1

Node Version

10.11.0

Total Downloads

Cumulative downloads

Total Downloads

1,830,448

Last day

50.5%

277

Compared to previous day

Last week

50.1%

1,256

Compared to previous week

Last month

8.7%

4,712

Compared to previous month

Last year

-44.6%

116,340

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

circular-json fs-extra klaw-sync lodash mkdirp moment q screenshoter-report-analyzer uuid

Dev Dependencies

codecov cz-conventional-changelog eslint jasmine nyc protractor standard-version

Versions

protractor-screenshoter-plugin

It captures screenshots, console logs, raw HTMLs and DB dumps in your e2e protractor tests out-of-box.

All is then visualized in a beautiful HTML5 report analyzer.

We support multi capabilities and multi browsers instances, too.

Features

This plugin can take screenshots of each Jasmine2 expect success/failure on multiple-browsers instances at once.
It can take screenshots of each spec failure/success as well
For each expectation or spec can capture console logs for each browser instance
It can generate a report analyzer - angular+bootstrap HTML reports with active filtering to easily find out why your tests are failing
HTML reports allow you to analyze your browser's console logs as well.
Supports extracting build information (the report displays a build number, a branch, etc. ) for GitLab CI/CD, CircleCI and Travis.
Supports parallel tests execution
Makes optional Ascii screenshots
Multi capabilities are supported
For each expectation or spec can capture raw HTML for each browser instance
For each expectation or spec can obtain a DB dump via a function returning callback(err, dumpAsString)

Additional HTML reporter features:

domain log filter (to narrow down your test classes faster)
excludes certain repetitive logs
opens for each screenshot its rendered HTML code

Screenshots

Reporter Controls

Screenshoter reporter controlls

Expanded Spec

Screenshoter reporter spec

Forked Browser Support

Screenshoter multi browsers

Console log management

Screenshoter reporter console

Stacktrace filtering

Screenshoter reporter stacktrace filtering

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.

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.

The included HTML reporter is Angular based standalone app with a beautiful Bootstrap theme. It allows filtering and narrows down to the root cause. Each screenshot has attached console logs. And we are making screenshots by every expectation not just when the spec is done (this is usually too late to find out, why your test is failing).

Using this plugin without the HTML report doesn't make sense. The main added value is to have a great analytics tool for your reports that visualize all possible available data to provide a holistic approach.

From the code perspective, I split up the report code from the protractor plugin. Perhaps you can plugin in your reporter instead. Also, I think that any open source project must have good test coverage. So I provided the initial set of unit and integrational tests. :beer:

Also, I created a list of alternatives to this plugin and why I think they are just not good enough.

How to install

If your protractor is installed locally, then

npm install protractor-screenshoter-plugin

If your protractor is installed globally, then

npm install --global protractor-screenshoter-plugin

or install this plugin locally, but then you must specify the plugin's path like this:

    plugins: [{
        package: 'node_modules/protractor-screenshoter-plugin/index.js',
        ...
    }],

as mentioned in #37.

NOTE:

This plugin depends on screenshoter-report-analyzer. So sometimes even if this plugin version is not updated, the reporter might be.
If you want to use the option imageToAscii, then you need to install additional dependencies depending on your OS. By default is this option turned off.

1  # Ubuntu
2  sudo apt-get install graphicsmagick
3
4  # Fedora
5  sudo dnf install GraphicsMagick
6
7  # CentOS / RHEL
8  sudo yum install --enablerepo epel GraphicsMagick
9
10  # OS X
11  brew install graphicsmagick
12
13  # Windows users can install the binaries from http://www.graphicsmagick.org/
14  # ...or using the command line:
15  # Chocolatey (package manager for Windows)
16  # (Restart of cmd/PowerShell is required)
17  choco install graphicsmagick

Then, install this optional package

1  npm install image-to-ascii@3.0.11

Experimental features

Please always check our branches started with feat-. There are some new and shiny features that are working but aren't yet published. Each branch has information how to use it and install it. Once it is stable enough, it will be merged into the master branch. Feel free to provide feedback to them.

Usage

Add this plugin to the protractor config file:

Example:

1exports.config = {
2    framework: 'jasmine2',
3
4    plugins: [{
5        package: 'protractor-screenshoter-plugin',
6        screenshotPath: './REPORTS/e2e',
7        screenshotOnExpect: 'failure+success',
8        screenshotOnSpec: 'none',
9        withLogs: true,
10        writeReportFreq: 'asap',
11        imageToAscii: 'none',
12        clearFoldersBeforeTest: true
13      }],
14
15      onPrepare: function() {
16          // returning the promise makes protractor wait for the reporter config before executing tests
17          return global.browser.getProcessedConfig().then(function(config) {
18              //it is ok to be empty
19          });
20      }
21};

Here is the full list of possible options, more details see below in the config reference section.

1exports.config = {
2       plugins: [{
3       package: 'protractor-screenshoter-plugin',
4       screenshotOnExpect: {String}    (Default - 'failure+success', 'failure', 'none'),
5       screenshotOnSpec: {String}    (Default - 'failure+success', 'failure', 'none'),
6       htmlOnExpect: {String}    (Default - 'failure', 'failure+success', 'none'),
7       htmlOnSpec: {String}    (Default - 'failure', 'failure+success', 'none'),
8       withLogs: {Boolean}      (Default - true),
9       htmlReport: {Boolean}      (Default - true),
10       screenshotPath: {String}                (Default - '<reports/e2e>/screenshots')
11       writeReportFreq: {String}      (Default - 'end', 'spec', 'asap'),
12       verbose: {String} (Default - 'info', 'debug'),
13       pauseOn: {String}    (Default - 'never', 'failure', 'spec'),
14       imageToAscii: {String}    (Default - 'none', 'failure+success', 'failure'),
15       imageToAsciiOpts:{Obbject} (Default - {bg:true})
16       clearFoldersBeforeTest: {Boolean}       (Default - false),
17       failTestOnErrorLog: {
18                failTestOnErrorLogLevel: {Number},  (Default - 900)
19                excludeKeywords: {A JSON Array}
20                suites: {A JSON Array}
21           }
22       }],
23       dumpOnExpect: {String}    (Default - 'failure', 'failure+success', 'none'),
24       dumpOnSpec: {String}    (Default - 'none', 'failure+success', 'failure'),
25       dump: {Function} (Default - null),
26       onPrepare: function () {
27        // returning the promise makes protractor wait for the reporter config before executing tests
28        return global.browser.getProcessedConfig().then(function (config) {
29          //it is ok to be empty
30        });
31       }
32     };

Single browser app

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

1var a  = browser.forkNewDriverInstance();
2var b  = browser.forkNewDriverInstance();
3
4global.screenshotBrowsers['anyCustomNameOfBrowserDisplayedInReports'] = a;
5global.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.

delete global.screenshotBrowsers.userB;

to reset screenshotBrowsers from your previous spec use this code

1beforeAll(function() {
2    global.screenshotBrowsers = {};
3  });

Running tests in parallel

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

The configuration such as this one are supported as of version 0.3.x:

1exports.config = {
2    framework: 'jasmine2',
3    //like usual (no change in config api)
4    plugins: [{
5        package: 'protractor-screenshoter-plugin',
6        screenshotPath: './REPORTS/e2e',
7        screenshotOnExpect: 'failure+success',
8        screenshotOnSpec: 'none',
9        withLogs: true,
10        writeReportFreq: 'asap',
11        clearFoldersBeforeTest: true
12    }],
13    //this is new and supported
14    capabilities: {
15        'browserName':'chrome',
16        'shardTestFiles': true,
17        'maxInstances': 5
18    }
19};

Ascii screenshots

If there is a failure (based on the config) it creates also an ASCII image into a log file. For this feature, you need to install additional OS dependent libraries. For more information read the doc imageToAscii bellow.

Config reference

Environmental variables

Screenshoter out-of-box obtains build information. However, some CI does not have an environmental variable for a commit message. Thus you need to obtain it manually:

GitLab

1   export CI_COMMIT_MSG=$(git log -1 --pretty=%B)

CircleCI

1   export CIRCLE_MSG=$(git log -1 --pretty=%B)

If CI will support one day these variables, you won't need to enter anything in your build process.

Do you want to see exactly what is extracted, consult the code directly obtainCIVariables

dump

If set a function, allows you to run extra command that produce a dump. The dump is taken depending on value in dumpOnSpec or dumpOnExpect.

This allows you to greater examine your failed expectation/spec from multiple perspectives,

one is a screenshot (unfortunately selenium cannot make a whole page screenshot, only what is in the visible browser's window),

the second is a whole page raw HTML ( this helps to overcome limitations in seeing only screenshots)

and the third could be for example a DB dump that is all nicely linked to expectations.

Note: Implementation of the dump function is up to you, you provide any function that must return a string directly or in a callback(err, dumpString).

Default: null

Valid Options: null / Function

dumpOnExpect

Calls the dump function for each Jasmine2 expect failure or success, depending on value.

Default: 'failure'

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

dumpOnSpec

Calls the dump function for each Jasmine2 spec failure or success, depending on value.

Default: none

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

htmlReport

If set to false, disables HTML report generation.

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'

screenshotOnSpec

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

Default: failure+success

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

htmlOnExpect

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

Default: 'failure'

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

htmlOnSpec

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

Default: 'failure'

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

pauseOn

If fails, pause browser on expectation failure or spec failure or never.

Default: 'never'

Valid Options: 'failure'/'spec'

verbose

If set to debug display internal logging.

Default: 'info'

Valid Options: 'debug'/'info'

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 options of screenshotOnExpect or screenshotOnSpec must be used to generate the initial screenshot that as additionally transformed into an ASCII image.

If you are using multiple browsers instances you can disable generating ASCII images individually by setting

1browser.skipImageToAscii = true;

Then this browser instance will be not generated in the log file.

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

and also please install the optional dependency

npm install image-to-ascii

imageToAsciiOpts

Options for imageToAscii conversion, more info can be found at https://github.com/IonicaBizau/image-to-ascii

Default: {bg:true}

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 debugging, is better to get it written 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'

_NOTE: Using option ASAP might introduce unpredictable race conditions if multiple browsers are tested at once. It happens when we automatically collect results of all particulars JSON report files into one final.

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.

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'

clearFoldersBeforeTest

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

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!

failTestOnErrorLogLevel

Log level, the test fails of the browser console log has logs more than this specified level.

Default: 900

excludeKeywords

An array of keywords to be excluded while searching for error logs. i.e If a log contains any of these keywords, spec/test will not be marked failed.

Please do not specify this flag, if you don't supply any such keywords.

suites

An array of suites (protractor.config.suites) where the failTestOnErrorLog will run.

Please do not specify this flag, if you want all your tests to run through this failTestOnErrorLog validation.

Development

Please follow CONTRIBUTING.md.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

56 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-mh2h-6j8q-x246
Warn: Project is vulnerable to: GHSA-5q88-cjfq-g2mh
Warn: Project is vulnerable to: GHSA-xp63-6vf5-xf3v
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-3gx7-xhv7-5mx3
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-jg8v-48h5-wgxg
Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-7xcx-6wjh-7xp2
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2025-02-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More