Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
protractor-image-comparison
Advanced tools
protractor-image-comparison - npm Package Compare versions
Comparing version 1.7.0 to 1.7.1
| # CHANGELOG | ||
| <a name="1.7.1"></a> | ||
| # [1.7.1](https://github.com/wswebcreation/protractor-image-comparison/compare/v1.7.0...v1.7.1) (2018-05-09) | ||
| ### Bugfix | ||
| * Fixed issue with minor differences recognition, see [61](https://github.com/wswebcreation/protractor-image-comparison/pull/61), tnx to [IgorSasovets](https://github.com/IgorSasovets) | ||
| <a name="1.7.0"></a> | ||
@@ -8,3 +14,3 @@ # [1.7.0](https://github.com/wswebcreation/protractor-image-comparison/compare/v1.6.1...v1.67.0) (2018-04-19) | ||
| * Added tolerance property that prevents saving result image to diff folder [55](https://github.com/wswebcreation/protractor-image-comparison/pull/55), tnx to [IgorSasovets](https://github.com/IgorSasovets ) | ||
| * Added tolerance property that prevents saving result image to diff folder [55](https://github.com/wswebcreation/protractor-image-comparison/pull/55), tnx to [IgorSasovets](https://github.com/IgorSasovets) | ||
@@ -11,0 +17,0 @@ <a name="1.6.1"></a> |
@@ -386,3 +386,3 @@ /* | ||
| data.misMatchPercentage = (mismatchCount / (height * width) * 100).toFixed(2); | ||
| data.misMatchPercentage = (mismatchCount / (height * width) * 100).toFixed(5); | ||
| data.diffBounds = diffBounds; | ||
@@ -389,0 +389,0 @@ data.analysisTime = Date.now() - time; |
| { | ||
| "name": "protractor-image-comparison", | ||
| "version": "1.7.0", | ||
| "version": "1.7.1", | ||
| "description": "npm-module to compare images with protractor", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -10,4 +10,2 @@ protractor-image-comparison | ||
| > **DUE TO CHROME REMOVING THE `disable-infobars` IN CHROME 65 MANY AUTOMATED VISUAL TESTS ON CHROME FAIL. I'M WORKING ON A SOLUTION FOR PROTRACTOR-IMAGE-COMPARISON. SORRY FOR THE INCONVENIENCE** | ||
| ## What can it do? | ||
@@ -14,0 +12,0 @@ *protractor-image-comparison* is a lightweight *protractor* plugin for browsers / mobile browsers / hybrid apps to do image comparison on screens or elements. |
@@ -18,182 +18,182 @@ 'use strict'; | ||
| if (environment === 'saucelabs') { | ||
| baselineFolder = './test/baseline/desktop/'; | ||
| baselineFolder = './test/baseline/desktop/'; | ||
| } else { | ||
| baselineFolder = `./${localConfig.localBaseline}/desktop/`; | ||
| baselineFolder = `./${localConfig.localBaseline}/desktop/`; | ||
| } | ||
| describe('protractor-image-comparison', () => { | ||
| beforeEach(done => { | ||
| browser.imageComparson = new imageComparison({ | ||
| baselineFolder: baselineFolder, | ||
| debug: false, | ||
| formatImageName: `{tag}-${logName}-{width}x{height}`, | ||
| screenshotPath: localConfig.screenshotFolder | ||
| }); | ||
| browser.get(browser.baseUrl) | ||
| .then(() => browser.sleep(500)) | ||
| .then(done); | ||
| beforeEach(done => { | ||
| browser.imageComparson = new imageComparison({ | ||
| baselineFolder: baselineFolder, | ||
| debug: false, | ||
| formatImageName: `{tag}-${logName}-{width}x{height}`, | ||
| screenshotPath: localConfig.screenshotFolder | ||
| }); | ||
| browser.get(browser.baseUrl) | ||
| .then(() => browser.sleep(500)) | ||
| .then(done); | ||
| }); | ||
| // Chrome remembers the last postion when the url is loaded again, this will reset it. | ||
| afterEach(() => browser.executeScript('window.scrollTo(0, 0);')); | ||
| // Chrome remembers the last postion when the url is loaded again, this will reset it. | ||
| afterEach(() => browser.executeScript('window.scrollTo(0, 0);')); | ||
| const logName = camelCase(browser.logName); | ||
| const resolution = '1366x768'; | ||
| const dangerAlert = $('.uk-alert-danger'); | ||
| const headerElement = $('h1.uk-heading-large'); | ||
| const canvasElement = $('#canvasBlocks'); | ||
| const canvasBlocks = 'canvasBlocks'; | ||
| const dangerAlertElement = 'dangerAlert-compare'; | ||
| const dangerAlertElementFail = `${dangerAlertElement}-fail`; | ||
| const exampleFullPage = 'example-fullpage-compare'; | ||
| const exampleFullPageFail = `${exampleFullPage}-fail`; | ||
| const examplePage = 'example-page-compare'; | ||
| const examplePageFail = `${examplePage}-fail`; | ||
| const tagName = 'examplePage'; | ||
| const logName = camelCase(browser.logName); | ||
| const resolution = '1366x768'; | ||
| const dangerAlert = $('.uk-alert-danger'); | ||
| const headerElement = $('h1.uk-heading-large'); | ||
| const canvasElement = $('#canvasBlocks'); | ||
| const canvasBlocks = 'canvasBlocks'; | ||
| const dangerAlertElement = 'dangerAlert-compare'; | ||
| const dangerAlertElementFail = `${dangerAlertElement}-fail`; | ||
| const exampleFullPage = 'example-fullpage-compare'; | ||
| const exampleFullPageFail = `${exampleFullPage}-fail`; | ||
| const examplePage = 'example-page-compare'; | ||
| const examplePageFail = `${examplePage}-fail`; | ||
| const tagName = 'examplePage'; | ||
| // Only test this on chrome, also for ci | ||
| if (browser.browserName === 'chrome') { | ||
| describe('basics', () => { | ||
| it('should save the screen', () => { | ||
| // Only test this on chrome, also for ci | ||
| if (browser.browserName === 'chrome') { | ||
| describe('basics', () => { | ||
| it('should save the screen', () => { | ||
| browser.imageComparson.saveScreen(tagName) | ||
| .then(() => expect(helpers.fileExistSync(`${screenshotPath}/${tagName}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| browser.imageComparson.saveScreen(tagName) | ||
| .then(() => expect(helpers.fileExistSync(`${screenshotPath}/${tagName}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| it('should save an element', () => { | ||
| const tagName = 'examplePageElement'; | ||
| it('should save an element', () => { | ||
| const tagName = 'examplePageElement'; | ||
| browser.imageComparson.saveElement(headerElement, tagName) | ||
| .then(() => expect(helpers.fileExistSync(`${screenshotPath}/${tagName}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| browser.imageComparson.saveElement(headerElement, tagName) | ||
| .then(() => expect(helpers.fileExistSync(`${screenshotPath}/${tagName}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| it('should save a fullpage screenshot', () => { | ||
| const tagName = 'fullPage'; | ||
| it('should save a fullpage screenshot', () => { | ||
| const tagName = 'fullPage'; | ||
| browser.imageComparson.saveFullPageScreens(tagName, {timeout: '1500a'}) | ||
| .then(() => expect(helpers.fileExistSync(`${screenshotPath}/${tagName}-${logName}-${resolution}.png`)).toBe(true)); | ||
| browser.imageComparson.saveFullPageScreens(tagName, { timeout: '1500a' }) | ||
| .then(() => expect(helpers.fileExistSync(`${screenshotPath}/${tagName}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| }); | ||
| it('should copy an image to the baseline when autoSaveBaseline is true', () => { | ||
| const tagName = 'autoSaveBaseline'; | ||
| const autoSaveBaselineFolder = path.resolve(__dirname, '../.tmp/baseline/desktop/'); | ||
| it('should copy an image to the baseline when autoSaveBaseline is true', () => { | ||
| const tagName = 'autoSaveBaseline'; | ||
| const autoSaveBaselineFolder = path.resolve(__dirname, '../.tmp/baseline/desktop/'); | ||
| browser.imageComparson = new imageComparison({ | ||
| baselineFolder: autoSaveBaselineFolder, | ||
| autoSaveBaseline: true, | ||
| formatImageName: `{tag}-${logName}-{width}x{height}`, | ||
| screenshotPath: localConfig.screenshotFolder | ||
| }); | ||
| browser.imageComparson = new imageComparison({ | ||
| baselineFolder: autoSaveBaselineFolder, | ||
| autoSaveBaseline: true, | ||
| formatImageName: `{tag}-${logName}-{width}x{height}`, | ||
| screenshotPath: localConfig.screenshotFolder | ||
| }); | ||
| expect(helpers.fileExistSync(`${baselineFolder}/${tagName}-${logName}-${resolution}.png`)).toBe(false, 'Error: Baseline image already exists.'); | ||
| browser.imageComparson.checkScreen(tagName) | ||
| .then(() => expect(helpers.fileExistSync(`${autoSaveBaselineFolder}/${tagName}-${logName}-${resolution}.png`)).toBe(true, 'File is saved in the baseline')); | ||
| }); | ||
| expect(helpers.fileExistSync(`${baselineFolder}/${tagName}-${logName}-${resolution}.png`)).toBe(false, 'Error: Baseline image already exists.'); | ||
| browser.imageComparson.checkScreen(tagName) | ||
| .then(() => expect(helpers.fileExistSync(`${autoSaveBaselineFolder}/${tagName}-${logName}-${resolution}.png`)).toBe(true, 'File is saved in the baseline')); | ||
| }); | ||
| if (environment === 'saucelabs') { | ||
| describe('resemble api', () => { | ||
| it('should succeed comparing 2 non identical images with each other with ignoreAntialiasing enabled', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView(); arguments[0].style.color = "#2d7091";', dangerAlert.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(dangerAlert, `${dangerAlertElementFail}-ignore-antialiasing`, {ignoreAntialiasing: true})).toEqual(0)); | ||
| }); | ||
| }); | ||
| } | ||
| if (environment === 'saucelabs') { | ||
| describe('resemble api', () => { | ||
| it('should succeed comparing 2 non identical images with each other with ignoreAntialiasing enabled', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView(); arguments[0].style.color = "#2d7091";', dangerAlert.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(dangerAlert, `${dangerAlertElementFail}-ignore-antialiasing`, { ignoreAntialiasing: true })).toEqual(0)); | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| describe('compare screen', () => { | ||
| it('should not save a difference when mismatches percentage less than saveAboveTolerance value', () => { | ||
| browser.executeScript('arguments[0].innerHTML = "Test Demo Page";', headerElement.getWebElement()); | ||
| browser.imageComparson.checkScreen(examplePageFail, { saveAboveTolerance: 3 }) | ||
| .then(() => expect(helpers.fileExistSync(`${differencePath}/${examplePageFail}-${logName}-${resolution}.png`)).toBe(false)); | ||
| }); | ||
| it('should compare successful with a baseline', () => { | ||
| expect(browser.imageComparson.checkScreen(examplePage)).toEqual(0); | ||
| }); | ||
| it('should not save a difference when mismatches percentage less than saveAboveTolerance value', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView(); arguments[0].style.color = "#2d7091";', dangerAlert.getWebElement()); | ||
| browser.imageComparson.checkElement(dangerAlert, dangerAlertElementFail, { saveAboveTolerance: 3 }) | ||
| .then(() => expect(helpers.fileExistSync(`${differencePath}/${dangerAlertElementFail}-${logName}-${resolution}.png`)).toBe(false)); | ||
| }); | ||
| }); | ||
| } | ||
| it('should not save a difference when mismatches percentage less than saveAboveTolerance value', () => { | ||
| browser.executeScript('arguments[0].innerHTML = "Test Demo Page";', headerElement.getWebElement()); | ||
| browser.imageComparson.checkScreen(examplePageFail, {saveAboveTolerance: 3}) | ||
| .then(() => expect(helpers.fileExistSync(`${differencePath}/${examplePageFail}-${logName}-${resolution}.png`)).toBe(false)); | ||
| }); | ||
| describe('compare screen', () => { | ||
| it('should save a difference after failure', () => { | ||
| browser.executeScript('arguments[0].innerHTML = "Test Demo Page";', headerElement.getWebElement()); | ||
| browser.imageComparson.checkScreen(examplePageFail) | ||
| .then(() => expect(helpers.fileExistSync(`${differencePath}/${examplePageFail}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| it('should compare successful with a baseline', () => { | ||
| expect(browser.imageComparson.checkScreen(examplePage)).toEqual(0); | ||
| }); | ||
| it('should fail comparing with a baseline', () => { | ||
| browser.executeScript('arguments[0].innerHTML = "Test Demo Page";', headerElement.getWebElement()) | ||
| .then(() => expect(browser.imageComparson.checkScreen(examplePageFail)).toBeGreaterThan(0)); | ||
| }); | ||
| it('should save a difference after failure', () => { | ||
| browser.executeScript('arguments[0].innerHTML = "Test Demo Page";', headerElement.getWebElement()); | ||
| browser.imageComparson.checkScreen(examplePageFail) | ||
| .then(() => expect(helpers.fileExistSync(`${differencePath}/${examplePageFail}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| it('should throw an error when no baseline is found', () => { | ||
| browser.imageComparson.checkScreen('noImage') | ||
| .then(() => fail(new Error('This should not succeed'))) | ||
| .catch((error) => expect(error).toEqual('Image not found, saving current image as new baseline.')); | ||
| }); | ||
| it('should fail comparing with a baseline', () => { | ||
| browser.executeScript('arguments[0].innerHTML = "Test Demo Page";', headerElement.getWebElement()) | ||
| .then(() => expect(browser.imageComparson.checkScreen(examplePageFail)).toBeGreaterThan(0)); | ||
| }); | ||
| describe('compare element', () => { | ||
| it('should compare successful with a baseline', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView();', dangerAlert.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(dangerAlert, dangerAlertElement)).toEqual(0)); | ||
| }); | ||
| if (browser.logName !== 'IE11' && browser.logName !== 'Safari 9') { | ||
| it('should compare a canvas screenshot successful with a baseline', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView();', canvasElement.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(canvasElement, `${canvasBlocks}-compare`, {canvasScreenshot: true})).toEqual(0)); | ||
| it('should throw an error when no baseline is found', () => { | ||
| browser.imageComparson.checkScreen('noImage') | ||
| .then(() => fail(new Error('This should not succeed'))) | ||
| .catch((error) => expect(error).toEqual('Image not found, saving current image as new baseline.')); | ||
| }); | ||
| }); | ||
| }); | ||
| } | ||
| describe('compare element', () => { | ||
| it('should compare successful with a baseline', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView();', dangerAlert.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(dangerAlert, dangerAlertElement)).toEqual(0)); | ||
| }); | ||
| if (browser.logName !== 'IE11' && browser.logName !== 'Safari 9') { | ||
| it('should compare a canvas screenshot successful with a baseline', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView();', canvasElement.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(canvasElement, `${canvasBlocks}-compare`, { canvasScreenshot: true })).toEqual(0)); | ||
| it('should compare successful with a baseline with custom dimensions that is NOT scrolled', () => { | ||
| expect(browser.imageComparson.checkElement(headerElement, 'resizeDimensions-header-element', {resizeDimensions: 15})).toEqual(0); | ||
| }); | ||
| }); | ||
| } | ||
| it('should compare successful with a baseline with custom dimensions that is scrolled', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView();', dangerAlert.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(dangerAlert, `resizeDimensions-${dangerAlertElement}`, {resizeDimensions: 15})).toEqual(0)); | ||
| it('should compare successful with a baseline with custom dimensions that is NOT scrolled', () => { | ||
| expect(browser.imageComparson.checkElement(headerElement, 'resizeDimensions-header-element', { resizeDimensions: 15 })).toEqual(0); | ||
| }); | ||
| }); | ||
| it('should compare successful with a baseline with custom dimensions that is scrolled', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView();', dangerAlert.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(dangerAlert, `resizeDimensions-${dangerAlertElement}`, { resizeDimensions: 15 })).toEqual(0)); | ||
| it('should not save a difference when mismatches percentage less than saveAboveTolerance value', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView(); arguments[0].style.color = "#2d7091";', dangerAlert.getWebElement()); | ||
| browser.imageComparson.checkElement(dangerAlert, dangerAlertElementFail, {saveAboveTolerance: 3}) | ||
| .then(() => expect(helpers.fileExistSync(`${differencePath}/${dangerAlertElementFail}-${logName}-${resolution}.png`)).toBe(false)); | ||
| }); | ||
| }); | ||
| it('should save a difference after failure', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView(); arguments[0].style.color = "#2d7091";', dangerAlert.getWebElement()); | ||
| browser.imageComparson.checkElement(dangerAlert, dangerAlertElementFail) | ||
| .then(() => expect(helpers.fileExistSync(`${differencePath}/${dangerAlertElementFail}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| it('should save a difference after failure', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView(); arguments[0].style.color = "#2d7091";', dangerAlert.getWebElement()); | ||
| browser.imageComparson.checkElement(dangerAlert, dangerAlertElementFail) | ||
| .then(() => expect(helpers.fileExistSync(`${differencePath}/${dangerAlertElementFail}-${logName}-${resolution}.png`)).toBe(true)); | ||
| }); | ||
| it('should fail comparing with a baseline', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView(); arguments[0].style.color = "#2d7091";', dangerAlert.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(dangerAlert, dangerAlertElementFail)).toBeGreaterThan(0)); | ||
| }); | ||
| it('should fail comparing with a baseline', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView(); arguments[0].style.color = "#2d7091";', dangerAlert.getWebElement()) | ||
| .then(() => browser.sleep(500)) | ||
| .then(() => expect(browser.imageComparson.checkElement(dangerAlert, dangerAlertElementFail)).toBeGreaterThan(0)); | ||
| }); | ||
| it('should throw an error when no baseline is found', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView();', dangerAlert.getWebElement()) | ||
| .then(() => browser.imageComparson.checkElement(dangerAlert, 'noImage')) | ||
| .then(() => fail(new Error('This should not succeed'))) | ||
| .catch((error) => expect(error).toEqual('Image not found, saving current image as new baseline.')); | ||
| }); | ||
| it('should throw an error when no baseline is found', () => { | ||
| browser.executeScript('arguments[0].scrollIntoView();', dangerAlert.getWebElement()) | ||
| .then(() => browser.imageComparson.checkElement(dangerAlert, 'noImage')) | ||
| .then(() => fail(new Error('This should not succeed'))) | ||
| .catch((error) => expect(error).toEqual('Image not found, saving current image as new baseline.')); | ||
| }); | ||
| }); | ||
| describe('compare fullpage screenshot', () => { | ||
| describe('compare fullpage screenshot', () => { | ||
| it('should compare successful with a baseline', () => { | ||
| expect(browser.imageComparson.checkFullPageScreen(exampleFullPage)).toEqual(0); | ||
| }); | ||
| it('should compare successful with a baseline', () => { | ||
| expect(browser.imageComparson.checkFullPageScreen(exampleFullPage)).toEqual(0); | ||
| }); | ||
| it('should fail comparing with a baseline', () => { | ||
| browser.executeScript('arguments[0].innerHTML = "Test Demo Page"; arguments[1].style.color = "#2d7091";', headerElement.getWebElement(), dangerAlert.getWebElement()) | ||
| .then(() => expect(browser.imageComparson.checkFullPageScreen(exampleFullPageFail)).toBeGreaterThan(0)); | ||
| }); | ||
| it('should fail comparing with a baseline', () => { | ||
| browser.executeScript('arguments[0].innerHTML = "Test Demo Page"; arguments[1].style.color = "#2d7091";', headerElement.getWebElement(), dangerAlert.getWebElement()) | ||
| .then(() => expect(browser.imageComparson.checkFullPageScreen(exampleFullPageFail)).toBeGreaterThan(0)); | ||
| }); | ||
| }); | ||
| }); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
19141776
- Number of lines in readme file
- decreased by-2.08%
94
No dependency changes