From aa664b7c2ad1b7d41bb06f76ac3d8489419e0b32 Mon Sep 17 00:00:00 2001 From: Max Lincoln Date: Thu, 22 Oct 2020 14:07:21 -0400 Subject: [PATCH 1/2] Exposed fethMisMatchPercentage and added support for ignoredBoxes/boundingBoxes --- index.js | 49 ++++++++++++++++++++++++------------------------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/index.js b/index.js index 680741d..a1ffe83 100644 --- a/index.js +++ b/index.js @@ -42,19 +42,17 @@ class ResembleHelper extends Helper { const actualImage = this.screenshotFolder + image; // check whether the base and the screenshot images are present. - fs.access(baseImage, fs.constants.F_OK | fs.constants.R_OK, (err) => { + fs.access(baseImage, fs.constants.F_OK | fs.constants.W_OK, (err) => { if (err) { throw new Error( - `${baseImage} ${err.code === 'ENOENT' ? 'base image does not exist' : - 'base image has an access error'}`); + `${baseImage} ${err.code === 'ENOENT' ? 'base image does not exist' : 'is read-only'}`); } }); - fs.access(actualImage, fs.constants.F_OK | fs.constants.R_OK, (err) => { + fs.access(actualImage, fs.constants.F_OK | fs.constants.W_OK, (err) => { if (err) { throw new Error( - `${actualImage} ${err.code === 'ENOENT' ? 'screenshot image does not exist' : - 'screenshot image has an access error'}`); + `${actualImage} ${err.code === 'ENOENT' ? 'screenshot image does not exist' : 'is read-only'}`); } }); @@ -66,6 +64,8 @@ class ResembleHelper extends Helper { resemble.outputSettings({ boundingBox: options.boundingBox, ignoredBox: options.ignoredBox, + ignoredBoxes: options.ignoredBoxes, + boundingBoxes: options.boundingBoxes, ...options.outputSettings, }); @@ -79,16 +79,16 @@ class ResembleHelper extends Helper { if (!data.isSameDimensions) { let dimensions1 = sizeOf(baseImage); let dimensions2 = sizeOf(actualImage); - reject(new Error(`The base image is of ${dimensions1.height} X ${dimensions1.width} and actual image is of ${dimensions2.height} X ${dimensions2.width}. Please use images of same dimensions so as to avoid any unexpected results.`)); + reject(new Error("The base image is of " + dimensions1.height + " X " + dimensions1.width + " and actual image is of " + dimensions2.height + " X " + dimensions2.width + ". Please use images of same dimensions so as to avoid any unexpected results.")); } resolve(data); if (data.misMatchPercentage >= tolerance) { if (!fs.existsSync(getDirName(this.diffFolder + diffImage))) { - fs.mkdirSync(getDirName(this.diffFolder + diffImage)); + fs.mkdirSync(getDirName(this.diffFolder + diffImage)); } fs.writeFileSync(this.diffFolder + diffImage + '.png', data.getBuffer()); const diffImagePath = path.join(process.cwd(), this.diffFolder + diffImage + '.png'); - this.debug(`Diff Image File Saved to: ${diffImagePath}`); + this.debug("Diff Image File Saved to: " + diffImagePath); } } }); @@ -101,7 +101,7 @@ class ResembleHelper extends Helper { * @param options * @returns {Promise<*>} */ - async _fetchMisMatchPercentage(image, options) { + async fetchMisMatchPercentage(image, options) { const diffImage = "Diff_" + image.split(".")[0]; const result = this._compareImages(image, diffImage, options); const data = await Promise.resolve(result); @@ -116,13 +116,15 @@ class ResembleHelper extends Helper { */ async screenshotElement(selector, name) { const helper = this._getHelper(); - if (this.helpers['Puppeteer'] || this.helpers['Playwright']) { + if (this.helpers['Puppeteer']) { await helper.waitForVisible(selector); const els = await helper._locate(selector); if (!els.length) throw new Error(`Element ${selector} couldn't be located`); const el = els[0]; - await el.screenshot({path: `${global.output_dir}/${name}.png`}); + await el.screenshot({ + path: global.output_dir + "/" + name + '.png' + }); } else if (this.helpers['WebDriver']) { await helper.waitForVisible(selector); const els = await helper._locate(selector); @@ -137,7 +139,7 @@ class ResembleHelper extends Helper { const { t } = this.helpers['TestCafe']; await t.takeElementScreenshot(els, name); - } else throw new Error("Method only works with Playwright, Puppeteer, WebDriver or TestCafe helpers."); + } else throw new Error("Method only works with Puppeteer, WebDriver or TestCafe helpers."); } /** @@ -308,11 +310,12 @@ class ResembleHelper extends Helper { options.tolerance = 0; } - const prepareBaseImage = options.prepareBaseImage !== undefined - ? options.prepareBaseImage - : (this.prepareBaseImage === true) + if (this.prepareBaseImage) { + options.prepareBaseImage = true; + } + const awsC = this.config.aws; - if (awsC !== undefined && prepareBaseImage === false) { + if (awsC !== undefined && options.prepareBaseImage === false) { await this._download(awsC.accessKeyId, awsC.secretAccessKey, awsC.region, awsC.bucketName, baseImage); } if (options.prepareBaseImage !== undefined && options.prepareBaseImage) { @@ -321,7 +324,7 @@ class ResembleHelper extends Helper { if (selector) { options.boundingBox = await this._getBoundingBox(selector); } - const misMatch = await this._fetchMisMatchPercentage(baseImage, options); + const misMatch = await this.fetchMisMatchPercentage(baseImage, options); this._addAttachment(baseImage, misMatch, options.tolerance); this._addMochaContext(baseImage, misMatch, options.tolerance); if (awsC !== undefined) { @@ -380,7 +383,7 @@ class ResembleHelper extends Helper { const helper = this._getHelper(); await helper.waitForVisible(selector); const els = await helper._locate(selector); - + if (this.helpers['TestCafe']) { if (await els.count != 1) throw new Error(`Element ${selector} couldn't be located or isn't unique on the page`); } @@ -390,7 +393,7 @@ class ResembleHelper extends Helper { let location, size; - if (this.helpers['Puppeteer'] || this.helpers['Playwright']) { + if (this.helpers['Puppeteer']) { const el = els[0]; const box = await el.boundingBox(); size = location = box; @@ -446,11 +449,7 @@ class ResembleHelper extends Helper { return this.helpers['TestCafe']; } - if (this.helpers['Playwright']) { - return this.helpers['Playwright']; - } - - throw new Error('No matching helper found. Supported helpers: Playwright/WebDriver/Appium/Puppeteer/TestCafe'); + throw new Error('No matching helper found. Supported helpers: WebDriver/Appium/Puppeteer/TestCafe'); } } From 65a060dfad86c9e1d1092d96a590d2292a475dcb Mon Sep 17 00:00:00 2001 From: Max Lincoln Date: Thu, 22 Oct 2020 14:21:45 -0400 Subject: [PATCH 2/2] exposed fetchMisMatchPercentage --- index.js | 45 ++++++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/index.js b/index.js index a1ffe83..2b9e68f 100644 --- a/index.js +++ b/index.js @@ -42,17 +42,19 @@ class ResembleHelper extends Helper { const actualImage = this.screenshotFolder + image; // check whether the base and the screenshot images are present. - fs.access(baseImage, fs.constants.F_OK | fs.constants.W_OK, (err) => { + fs.access(baseImage, fs.constants.F_OK | fs.constants.R_OK, (err) => { if (err) { throw new Error( - `${baseImage} ${err.code === 'ENOENT' ? 'base image does not exist' : 'is read-only'}`); + `${baseImage} ${err.code === 'ENOENT' ? 'base image does not exist' : + 'base image has an access error'}`); } }); - fs.access(actualImage, fs.constants.F_OK | fs.constants.W_OK, (err) => { + fs.access(actualImage, fs.constants.F_OK | fs.constants.R_OK, (err) => { if (err) { throw new Error( - `${actualImage} ${err.code === 'ENOENT' ? 'screenshot image does not exist' : 'is read-only'}`); + `${actualImage} ${err.code === 'ENOENT' ? 'screenshot image does not exist' : + 'screenshot image has an access error'}`); } }); @@ -64,8 +66,8 @@ class ResembleHelper extends Helper { resemble.outputSettings({ boundingBox: options.boundingBox, ignoredBox: options.ignoredBox, - ignoredBoxes: options.ignoredBoxes, boundingBoxes: options.boundingBoxes, + ignoredBoxes: options.ignoredBoxes, ...options.outputSettings, }); @@ -79,16 +81,16 @@ class ResembleHelper extends Helper { if (!data.isSameDimensions) { let dimensions1 = sizeOf(baseImage); let dimensions2 = sizeOf(actualImage); - reject(new Error("The base image is of " + dimensions1.height + " X " + dimensions1.width + " and actual image is of " + dimensions2.height + " X " + dimensions2.width + ". Please use images of same dimensions so as to avoid any unexpected results.")); + reject(new Error(`The base image is of ${dimensions1.height} X ${dimensions1.width} and actual image is of ${dimensions2.height} X ${dimensions2.width}. Please use images of same dimensions so as to avoid any unexpected results.`)); } resolve(data); if (data.misMatchPercentage >= tolerance) { if (!fs.existsSync(getDirName(this.diffFolder + diffImage))) { - fs.mkdirSync(getDirName(this.diffFolder + diffImage)); + fs.mkdirSync(getDirName(this.diffFolder + diffImage)); } fs.writeFileSync(this.diffFolder + diffImage + '.png', data.getBuffer()); const diffImagePath = path.join(process.cwd(), this.diffFolder + diffImage + '.png'); - this.debug("Diff Image File Saved to: " + diffImagePath); + this.debug(`Diff Image File Saved to: ${diffImagePath}`); } } }); @@ -116,15 +118,13 @@ class ResembleHelper extends Helper { */ async screenshotElement(selector, name) { const helper = this._getHelper(); - if (this.helpers['Puppeteer']) { + if (this.helpers['Puppeteer'] || this.helpers['Playwright']) { await helper.waitForVisible(selector); const els = await helper._locate(selector); if (!els.length) throw new Error(`Element ${selector} couldn't be located`); const el = els[0]; - await el.screenshot({ - path: global.output_dir + "/" + name + '.png' - }); + await el.screenshot({path: `${global.output_dir}/${name}.png`}); } else if (this.helpers['WebDriver']) { await helper.waitForVisible(selector); const els = await helper._locate(selector); @@ -139,7 +139,7 @@ class ResembleHelper extends Helper { const { t } = this.helpers['TestCafe']; await t.takeElementScreenshot(els, name); - } else throw new Error("Method only works with Puppeteer, WebDriver or TestCafe helpers."); + } else throw new Error("Method only works with Playwright, Puppeteer, WebDriver or TestCafe helpers."); } /** @@ -310,12 +310,11 @@ class ResembleHelper extends Helper { options.tolerance = 0; } - if (this.prepareBaseImage) { - options.prepareBaseImage = true; - } - + const prepareBaseImage = options.prepareBaseImage !== undefined + ? options.prepareBaseImage + : (this.prepareBaseImage === true) const awsC = this.config.aws; - if (awsC !== undefined && options.prepareBaseImage === false) { + if (awsC !== undefined && prepareBaseImage === false) { await this._download(awsC.accessKeyId, awsC.secretAccessKey, awsC.region, awsC.bucketName, baseImage); } if (options.prepareBaseImage !== undefined && options.prepareBaseImage) { @@ -383,7 +382,7 @@ class ResembleHelper extends Helper { const helper = this._getHelper(); await helper.waitForVisible(selector); const els = await helper._locate(selector); - + if (this.helpers['TestCafe']) { if (await els.count != 1) throw new Error(`Element ${selector} couldn't be located or isn't unique on the page`); } @@ -393,7 +392,7 @@ class ResembleHelper extends Helper { let location, size; - if (this.helpers['Puppeteer']) { + if (this.helpers['Puppeteer'] || this.helpers['Playwright']) { const el = els[0]; const box = await el.boundingBox(); size = location = box; @@ -449,7 +448,11 @@ class ResembleHelper extends Helper { return this.helpers['TestCafe']; } - throw new Error('No matching helper found. Supported helpers: WebDriver/Appium/Puppeteer/TestCafe'); + if (this.helpers['Playwright']) { + return this.helpers['Playwright']; + } + + throw new Error('No matching helper found. Supported helpers: Playwright/WebDriver/Appium/Puppeteer/TestCafe'); } }