- protractorImageComparison
protractorImageComparison
- checkElement(element, tag, options) ⇒
Promise Runs the comparison against an element
- checkFullPageScreen(tag, options) ⇒
Promise Runs the comparison against the fullpage screenshot
- checkScreen(tag, options) ⇒
Promise Runs the comparison against the screen
- saveElement(element, tag, options) ⇒
Promise Saves an image of the screen element
- saveFullPageScreen(tag, options) ⇒
Promise Saves a full page image of the screen
- saveScreen(tag, options) ⇒
Promise Saves an image of the screen
protractorImageComparison
Kind: global class
Properties
| Name | Type | Description |
|---|---|---|
| actualFolder | string |
Path where the actual screenshots are saved |
| addressBarShadowPadding | number |
Mobile Chrome and mobile Safari have a shadow below the addressbar, this property will make sure that it wont be seen in the image |
| androidOffsets | object |
Object that will hold de defaults for the statusBar, addressBar and toolBar |
| browserHeight | number |
height of the browser |
| browserName | string |
name of the browser that is used to execute the test on |
| browserWidth | number |
width of the browser |
| deviceName | string |
the kind of mobile device or emulator to use |
| diffFolder | string |
Path where the differences are saved |
| devicePixelRatio | number |
Ratio of the (vertical) size of one physical pixel on the current display device to the size of one device independent pixels(dips) |
| fullPageHeight | number |
fullPageHeight of the browser including scrollbars |
| fullPageWidth | number |
fullPageWidth of the browser including scrollbars * |
| iosOffsets | object |
Object that will hold de defaults for the statusBar and addressBar |
| isLastScreenshot | boolean |
boolean tells if it is the last fullpage screenshot |
| logName | string |
logName from the capabilities |
| name | string |
Name from the capabilities |
| platformName | string |
mobile OS platform to use |
| resizeDimensions | number |
dimensions that will be used to make the the element coordinates bigger. This needs to be in pixels |
| screenshotHeight | number |
height of the screenshot of the page |
| tempFullScreenFolder | string |
Path where the temporary fullscreens are saved |
| fullPageScrollTimeout | number |
Default timeout to wait after a scroll |
| saveType | object |
Object that will the type of save that is being executed |
| testInBrowser | boolean |
boolean that determines if the test is executed in a browser or not |
| toolBarShadowPadding | number |
Mobile mobile Safari has a shadow above the toolbar, this property will make sure that it wont be seen in the image |
| viewPortHeight | number |
is the height of the browser window's viewport (was innerHeight |
| Param | Type | Description |
|---|---|---|
| options | object |
|
| options.baselineFolder | string |
Path to the baseline folder |
| options.screenshotPath | string |
Path to the folder where the screenshots are saved |
| options.autoSaveBaseline | boolean |
If no baseline image is found the image is automatically copied to the baselinefolder |
| options.debug | boolean |
Add some extra logging and always save the image difference (default:false) |
| options.formatImageName | string |
Custom variables for Image Name (default:{tag}-{browserName}-{width}x{height}-dpr-{dpr}) |
| options.disableCSSAnimation | boolean |
Disable all css animations on a page (default:false) |
| options.hideScrollBars | boolean |
Hide all scrolls on a page (default:true) |
| options.nativeWebScreenshot | boolean |
If a native screenshot of a device (complete screenshot) needs to be taken (default:false) |
| options.blockOutStatusBar | boolean |
If the statusbar on mobile / tablet needs to blocked out by default |
| options.ignoreAntialiasing | boolean |
compare images an discard anti aliasing |
| options.ignoreColors | boolean |
Even though the images are in colour, the comparison wil compare 2 black/white images |
| options.ignoreTransparentPixel | boolean |
Will ignore all pixels that have some transparency in one of the images |
| options.androidOffsets | object |
Object that will hold custom values for the statusBar, addressBar, addressBarScrolled and toolBar |
| options.iosOffsets | object |
Object that will hold the custom values for the statusBar, addressBar, addressBarScrolled and toolBar |
Runs the comparison against an element
Kind: global function
Returns: Promise - When the promise is resolved it will return the percentage of the difference
Access: public
| Param | Type | Description |
|---|---|---|
| element | Promise |
The ElementFinder that is used to get the position |
| tag | string |
The tag that is used |
| options | object |
non-default options |
| options.blockOut | object |
blockout with x, y, width and height values |
| options.resizeDimensions | int |
the value to increase the size of the element that needs to be saved |
| options.ignoreAntialiasing | boolean |
compare images an discard anti aliasing |
| options.ignoreColors | boolean |
Even though the images are in colour, the comparison wil compare 2 black/white images |
| options.ignoreTransparentPixel | boolean |
Will ignore all pixels that have some transparency in one of the images |
Example
// default usage
browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA');
// blockout example
browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {blockOut: [{x: 10, y: 132, width: 100, height: 50}]});
// Add 15 px to top, right, bottom and left when the cut is calculated (it will automatically use the DPR)
browser.protractorImageComparison.saveElement(element(By.id('elementId')), 'imageA', {resizeDimensions: 15});
browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {resizeDimensions: 15});
// Disable css animation on all elements
browser.protractorImageComparison.saveElement(element(By.id('elementId')), 'imageA', {disableCSSAnimation: true});
// Ignore antialiasing
browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {ignoreAntialiasing: true});
// Ignore colors
browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {ignoreColors: true});
// Ignore alpha pixel
browser.protractorImageComparison.checkElement(element(By.id('elementId')), 'imageA', {ignoreTransparentPixel: true});Runs the comparison against the fullpage screenshot
Kind: global function
Returns: Promise - When the promise is resolved it will return the percentage of the difference
Access: public
| Param | Type | Description |
|---|---|---|
| tag | string |
The tag that is used |
| options | object |
(non-default) options |
| options.blockOutStatusBar | boolean |
blockout the statusbar yes or no, it will override the global |
| options.blockOut | object |
blockout with x, y, width and height values |
| options.disableCSSAnimation | boolean |
enable or disable CSS animation |
| options.fullPageScrollTimeout | int |
The time that needs to be waited when scrolling to a point and save the screenshot |
Example
// default
browser.protractorImageComparison.checkFullPageScreen('imageA');
// Blockout the statusbar
browser.protractorImageComparison.checkFullPageScreen('imageA', {blockOutStatusBar: true});
// Blockout a given region
browser.protractorImageComparison.checkFullPageScreen('imageA', {blockOut: [{x: 10, y: 132, width: 100, height: 50}]});
// Disable css animation on all elements
browser.protractorImageComparison.checkFullPageScreen('imageA', {disableCSSAnimation: true});
// Add timeout between scrolling and taking a screenshot
browser.protractorImageComparison.checkFullPageScreen('imageA',{fullPageScrollTimeout: 5000});
// Ignore antialiasing
browser.protractorImageComparison.checkFullPageScreen('imageA', {ignoreAntialiasing: true});
// Ignore colors
browser.protractorImageComparison.checkFullPageScreen('imageA', {ignoreColors: true});
// Ignore alpha pixel
browser.protractorImageComparison.checkFullPageScreen('imageA', {ignoreTransparentPixel: true});Runs the comparison against the screen
Kind: global function
Returns: Promise - When the promise is resolved it will return the percentage of the difference
Access: public
| Param | Type | Description |
|---|---|---|
| tag | string |
The tag that is used |
| options | object |
(non-default) options |
| options.blockOutStatusBar | boolean |
blockout the statusbar yes or no, it will override the global |
| options.blockOut | object |
blockout with x, y, width and height values |
| options.disableCSSAnimation | boolean |
enable or disable CSS animation |
| options.ignoreAntialiasing | boolean |
compare images an discard anti aliasing |
| options.ignoreColors | boolean |
Even though the images are in colour, the comparison wil compare 2 black/white images |
| options.ignoreTransparentPixel | boolean |
Will ignore all pixels that have some transparency in one of the images |
Example
// default
browser.protractorImageComparison.checkScreen('imageA');
// Blockout the statusbar
browser.protractorImageComparison.checkScreen('imageA', {blockOutStatusBar: true});
// Blockout a given region
browser.protractorImageComparison.checkScreen('imageA', {blockOut: [{x: 10, y: 132, width: 100, height: 50}]});
// Disable css animation on all elements
browser.protractorImageComparison.checkScreen('imageA', {disableCSSAnimation: true});
// Ignore antialiasing
browser.protractorImageComparison.checkScreen('imageA', {ignoreAntialiasing: true});
// Ignore colors
browser.protractorImageComparison.checkScreen('imageA', {ignoreColors: true});
// Ignore alpha pixel
browser.protractorImageComparison.checkScreen('imageA', {ignoreTransparentPixel: true});Saves an image of the screen element
Kind: global function
Returns: Promise - The images has been saved when the promise is resolved
Access: public
| Param | Type | Description |
|---|---|---|
| element | Promise |
The ElementFinder that is used to get the position |
| tag | string |
The tag that is used |
| options | object |
(non-default) options |
| options.resizeDimensions | int |
the value to increase the size of the element that needs to be saved |
| options.disableCSSAnimation | boolean |
enable or disable CSS animation |
Example
// Default
browser.protractorImageComparison.saveElement(element(By.id('elementId')), 'imageA');
// Add 15 px to top, right, bottom and left when the cut is calculated (it will automatically use the DPR)
browser.protractorImageComparison.saveElement(element(By.id('elementId')), 'imageA', {resizeDimensions: 15});
// Disable css animation on all elements
browser.protractorImageComparison.saveElement(element(By.id('elementId')), 'imageA', {disableCSSAnimation: true});Saves a full page image of the screen
Kind: global function
Returns: Promise - The image has been saved when the promise is resolved
Access: public
| Param | Type | Description |
|---|---|---|
| tag | string |
The tag that is used |
| options | object |
(non-default) options |
| options.fullPageScrollTimeout | int |
The time that needs to be waited when scrolling to a point and save the screenshot |
| options.disableCSSAnimation | boolean |
enable or disable CSS animation |
Example
// Default
browser.protractorImageComparison.saveFullPageScreen('imageA');
// Disable css animation on all elements
browser.protractorImageComparison.saveFullPageScreen('imageA',{disableCSSAnimation: true});
// Add timeout between scrolling and taking a screenshot
browser.protractorImageComparison.saveFullPageScreen('imageA',{fullPageScrollTimeout: 5000});Saves an image of the screen
Kind: global function
Returns: Promise - The image has been saved when the promise is resolved
Access: public
| Param | Type | Description |
|---|---|---|
| tag | string |
The tag that is used |
| options | object |
(non-default) options |
| options.disableCSSAnimation | boolean |
enable or disable CSS animation |
Example
// Default
browser.protractorImageComparison.saveScreen('imageA');
// Disable css animation on all elements
browser.protractorImageComparison.saveScreen('imageA',{disableCSSAnimation: true});