fix(testing): use viewport for Puppeteer screenshot clip dimensions

Fixes #5353

STENCIL-1135

src/testing/puppeteer/puppeteer-screenshot.ts

@@ -106,11 +106,6 @@ export async function pageCompareScreenshot(
     });
   });
 
-  const screenshotOpts = createPuppeteerScreenshotOptions(opts);
-  const screenshotBuf = await page.screenshot(screenshotOpts);
-  const pixelmatchThreshold =
-    typeof opts.pixelmatchThreshold === 'number' ? opts.pixelmatchThreshold : screenshotBuildData.pixelmatchThreshold;
-
   let width = emulateConfig.viewport.width;
   let height = emulateConfig.viewport.height;
 
@@ -123,6 +118,11 @@ export async function pageCompareScreenshot(
     }
   }
 
+  const screenshotOpts = createPuppeteerScreenshotOptions(opts, width, height);
+  const screenshotBuf = await page.screenshot(screenshotOpts);
+  const pixelmatchThreshold =
+    typeof opts.pixelmatchThreshold === 'number' ? opts.pixelmatchThreshold : screenshotBuildData.pixelmatchThreshold;
+
   const results = await compareScreenshot(
     emulateConfig,
     screenshotBuildData,
@@ -137,7 +137,7 @@ export async function pageCompareScreenshot(
   return results;
 }
 
-function createPuppeteerScreenshotOptions(opts: ScreenshotOptions) {
+function createPuppeteerScreenshotOptions(opts: ScreenshotOptions, width: number, height: number) {
   const puppeteerOpts: puppeteer.ScreenshotOptions = {
     type: 'png',
     fullPage: opts.fullPage,
@@ -152,6 +152,13 @@ function createPuppeteerScreenshotOptions(opts: ScreenshotOptions) {
       width: opts.clip.width,
       height: opts.clip.height,
     };
+  } else {
+    puppeteerOpts.clip = {
+      x: 0,
+      y: 0,
+      width,
+      height,
+    };
   }
 
   return puppeteerOpts;