From 10564c02af0eee58365514c9c03263f42727abf6 Mon Sep 17 00:00:00 2001 From: trevornelms Date: Wed, 31 Jan 2024 09:37:32 -0700 Subject: [PATCH] SBVT-2272: lower image resolution on DPR --- commands.js | 65 ++++++++++++++++++++++++++++++----------------- package-lock.json | 16 ++++++------ package.json | 4 +-- plugin.js | 26 ++++++++++++++++++- 4 files changed, 77 insertions(+), 34 deletions(-) diff --git a/commands.js b/commands.js index 062a548..b2e2a98 100644 --- a/commands.js +++ b/commands.js @@ -167,15 +167,20 @@ const takeScreenshot = (element, name, modifiedOptions, win) => { let testScreenshotProps; cy.screenshot( name, - {capture: 'viewport', + { + capture: 'viewport', onAfterScreenshot($el, props) { testScreenshotProps = props; - }}, + } + }, ).then(() => { cy.task('deleteImage', {path: testScreenshotProps.path}); if (testScreenshotProps.dimensions.height !== viewportHeight) { // This is due to an ongoing issue where Chrome Cypress viewport screenshots are not capturing the whole viewport and then when going to stitch it together it has issues, so default back to Cypress's default - cy.task('logger', {type: 'info', message: `starting cypress's default full-page screenshot chrome because of the mismatch`}); + cy.task('logger', { + type: 'info', + message: `starting cypress's default full-page screenshot chrome because of the mismatch` + }); if (modifiedOptions.freezePage) freezePageResult = runFreezePage(win, toolkitScripts.freezePage); takeDefaultFullpageScreenshot(win, scrollArray, numScrolls, viewportHeight, offsetHeight, viewportWidth, imageName, initialPageState, modifiedOptions); } else { @@ -532,31 +537,45 @@ const takeAllTheViewportScreenshots = (win, scrollArray, numScrolls, viewportHei }); return; } - picProps = { - path: imageData.path, - dimensions: { - height: imageData.height, - width: imageData.width - } - }; - // Reset browser to initial state - cy.task('logger', { - type: 'trace', - message: `After fullpage cy.screenshot('${name}')` - }); - win.eval(`window.scrollTo(${initialPageState.scrollX}, ${initialPageState.scrollY})`); - win.eval(`document.body.style.transform='${initialPageState.transform}'`); - ensureScrolledToTop(win); - captureDom(win); - win.eval(`document.documentElement.style.overflow='${initialPageState.documentOverflow}'`); - - // Read the new image base64 to blob to be sent to AWS - readImageAndBase64ToBlob(); + if (viewportWidth !== imageData.width) { + cy.task('lowerImageResolution', { + image: imageData.path, + viewportWidth: viewportWidth, + tmpPath: fullpageData.tmpPath + }).then((newImageData) => { + imageData.path = newImageData.path + imageData.width = newImageData.width + imageData.height = newImageData.height + + takeTheStitchImage(imageData, win, initialPageState) + }) + } else { + takeTheStitchImage(imageData, win, initialPageState) + } }); } }); }); } + +const takeTheStitchImage = (imageData, win, initialPageState) => { + picProps = { + path: imageData.path, + dimensions: { + height: imageData.height, + width: imageData.width + } + }; + // Reset browser to initial state + win.eval(`window.scrollTo(${initialPageState.scrollX}, ${initialPageState.scrollY})`); + win.eval(`document.body.style.transform='${initialPageState.transform}'`); + ensureScrolledToTop(win); + captureDom(win); + win.eval(`document.documentElement.style.overflow='${initialPageState.documentOverflow}'`); + + // Read the new image base64 to blob to be sent to AWS + readImageAndBase64ToBlob(); +} const runLazyload = (waitTime, scrollArray, numScrolls, viewportHeight) => { cy.task('logger', { type: 'debug', diff --git a/package-lock.json b/package-lock.json index 3cebcb3..0fa5054 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,9 @@ "version": "1.9.1", "license": "ISC", "dependencies": { - "axios": "^1.6.5", + "axios": "^1.6.6", "chalk": "^4.1.2", - "dotenv": "^16.4.0", + "dotenv": "^16.4.1", "fs-extra": "^11.2.0", "pino": "^8.17.2", "pino-pretty": "^10.3.1", @@ -1090,9 +1090,9 @@ } }, "node_modules/axios": { - "version": "1.6.5", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz", - "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==", + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.6.tgz", + "integrity": "sha512-XZLZDFfXKM9U/Y/B4nNynfCRUqNyVZ4sBC/n9GDRCkq9vd2mIvKjKKsbIh1WPmHmNbg6ND7cTBY3Y2+u1G3/2Q==", "dependencies": { "follow-redirects": "^1.15.4", "form-data": "^4.0.0", @@ -1665,9 +1665,9 @@ } }, "node_modules/dotenv": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.0.tgz", - "integrity": "sha512-WvImr5kpN5NGNn7KaDjJnLTh5rDVLZiDf/YLA8T1ZEZEBZNEDOE+mnkS0PVjPax8ZxBP5zC5SLMB3/9VV5de9g==", + "version": "16.4.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.1.tgz", + "integrity": "sha512-CjA3y+Dr3FyFDOAMnxZEGtnW9KBR2M0JvvUtXNW+dYJL5ROWxP9DUHCwgFqpMk0OXCc0ljhaNTr2w/kutYIcHQ==", "engines": { "node": ">=12" }, diff --git a/package.json b/package.json index cad1370..1934706 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "publish-npm-public": "scripts/publish-NPM-public.sh" }, "dependencies": { - "axios": "^1.6.5", + "axios": "^1.6.6", "chalk": "^4.1.2", - "dotenv": "^16.4.0", + "dotenv": "^16.4.1", "fs-extra": "^11.2.0", "pino": "^8.17.2", "pino-pretty": "^10.3.1", diff --git a/plugin.js b/plugin.js index f23e706..0dc036c 100644 --- a/plugin.js +++ b/plugin.js @@ -349,7 +349,7 @@ function makeGlobalRunHooks() { if (configFile.debug) { // copy all the contents of tmp/folderPath to the configFile.debug folder await fs.ensureDir(configFile.debug); - await fs.copy(folderPath, (configFile.debug + path.sep + imageName+ "-fullPage" ), { + await fs.copy(folderPath, (configFile.debug + path.sep + imageName + "-fullPage"), { overwrite: true, }); } @@ -435,6 +435,30 @@ function makeGlobalRunHooks() { path: userPath }; }, + async lowerImageResolution({image, viewportWidth, tmpPath}) { + const folderPath = tmpPath.substring(0, tmpPath.lastIndexOf(path.sep)); + logger.info(`lowerImageResolution() viewportWidth: ${viewportWidth}, imagePath: ${image}`); + const sharp = require('sharp'); + try { + const buffer = await sharp(image) + .resize(viewportWidth) + .toBuffer(); + await fs.ensureDir(folderPath) + const newFilePath = folderPath +'-final-reduced.png' + await sharp(image) + .resize(viewportWidth) + .toFile(newFilePath); + const metaData = await getMetaData(sharp(buffer)); + return { + path: newFilePath, + height: metaData.height, + width: metaData.width, + }; + } catch (error) { + console.error(error); + throw new Error(`Error with lowering image resolution: ${error}`); + } + }, async copy({path, imageName, imageType}) { if (configFile.debug) await fs.copy(path, `${debugFolderPath}/${imageName}-${imageType}/${imageName}.png`); //copy the final image to debug folder return null;