SBVT-2272: lower image resolution on DPR

SmartBear · Jan 31, 2024 · 10564c0 · 10564c0
1 parent 0c51da9
commit 10564c0
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 34 deletions.
diff --git 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
diff --git 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
@@ -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;