https://github.com/sudharsan-selvaraj/protractor-screenshot-utils
A simple utility to capture fullpage screenshot, screenshot of any element and crop the screenshot by any screen coordinates from your e2e protractor tests out-of-box
https://github.com/sudharsan-selvaraj/protractor-screenshot-utils
chrome-screenshot fullpage-screenshot protractor protractor-screenshot
Last synced: 2 months ago
JSON representation
A simple utility to capture fullpage screenshot, screenshot of any element and crop the screenshot by any screen coordinates from your e2e protractor tests out-of-box
- Host: GitHub
- URL: https://github.com/sudharsan-selvaraj/protractor-screenshot-utils
- Owner: sudharsan-selvaraj
- Created: 2018-08-12T18:31:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-21T09:08:28.000Z (almost 5 years ago)
- Last Synced: 2025-03-30T20:51:35.833Z (3 months ago)
- Topics: chrome-screenshot, fullpage-screenshot, protractor, protractor-screenshot
- Language: JavaScript
- Homepage:
- Size: 2.02 MB
- Stars: 6
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/sudharsan-selvaraj/protractor-screenshot-utils)
[](https://codecov.io/gh/sudharsan-selvaraj/protractor-screenshot-utils/branch/master)
# protractor-screenshot-utils
**A simple utility to capture fullpage screenshot, screenshot of any element and crop the screenshot by any screen coordinates from your e2e protractor tests out-of-box.**
# Features
1. This module can take **fullpage screenshots** of any webpage.
2. It can take **screenshot** of any given **WebElement**.
3. It also has the ability to crop the screenshot with given co-ordinates of screen.
4. Automatically save the captured screenshot in given path.
5. Overrides default `browser.getScreenshot()` method to capture full page screenshots.
# Preview
Default Screenshot
Fullpage Screenshot
Element Screenshot
_____________________________________
_____________________________________
# How to install
```
npm install protractor-screenshot-utils
```
# Usage
Add add the below code to protractor config file:
Example:
*protractor.config.js*
```javascript
var screenShotUtils = require("protractor-screenshot-utils").ProtractorScreenShotUtils;
exports.config = {
framework: 'jasmine2',
onPrepare: function() {
global.screenShotUtils = new screenShotUtils({
browserInstance : browser
});
}
};
```
That's it. Now you can take fullpage screenshots from your tests by just using any of the below code.
## Taking fullPage screenshot
```javascript
screenShotUtils.takeScreenshot().then(function(base64string){
//logic to save the image to file.
})
```
or you can also directly save the image as file using
```javascript
screenShotUtils.takeScreenshot({
saveTo: "fullpageScreenshot.png"
})
```
Above code will automatically saves the screenshot as `fullpageScreenshot.png` file.
## Taking screenshot of any element
```javascript
screenShotUtils.takeScreenshot({
element : element(by.id("header")), //you can pass any protractor element
saveTo: "headerElement.png"
})
```
## Taking screenshot by screen co-ordinates
```javascript
screenShotUtils.takeScreenshot({
dimensions : {
x:20, //starting x point
y:40, //startng y point
width : 200,
height: 200
},
saveTo: "croppedImage.png"
})
```
You can also crop the screenshot of an element by using
```javascript
screenShotUtils.takeScreenshot({
element : element(by.id("main-container")),
dimensions : {
x:20, //starting x point
y:40, //startng y point
width : 200,
height: 200
},
saveTo: "croppedElementImage.png"
})
```
# Additional Funtionalities:
## Override default browser.takeScreenshot()
If your using any html-screenshot reporter in your test,then those reporters will call `browser.takeScreenshot()` to capture the screenshot of webpage in case of any failures in test. If you want to override default behaviour of `browser.takeScreenshot()` to caputer full page screenshot, you can use,
```javascript
global.screenShotUtils = new screenShotUtils({
browserInstance : browser,
setAsDefaultScreenshotMethod : true //this will override default browser.takeScreenshot() method to take full page image.
});
```
And you can now take fullpage screen shot, element screenshot using browser.takeScreenshot() with all options given in above examples.