fix: fix fromSurface:false screenshoting

docs/api/puppeteer.page.screenshot.md

@@ -44,6 +44,6 @@ Options object which might have the following properties:
 
 - `captureBeyondViewport` : When true, captures screenshot [beyond the viewport](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot). When false, falls back to old behaviour, and cuts the screenshot by the viewport size. Defaults to `true`.
 
-- `fromSurface` : When true, captures screenshot [from the surface rather than the view](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot). When false, works only in headful mode and ignores page viewport (but not browser window's bounds). Defaults to `true`.
+- `fromSurface` : When true, captures screenshot [from the surface rather than the view](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot). When false, works only in headful mode. Defaults to `true`.
 
 NOTE: Screenshots take at least 1/6 second on OS X. See [https://crbug.com/741689](https://crbug.com/741689) for discussion.

src/common/Page.ts

@@ -2791,8 +2791,7 @@ export class Page extends EventEmitter {
    * - `fromSurface` : When true, captures screenshot
    *   {@link https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot
    *   | from the surface rather than the view}. When false, works only in
-   *   headful mode and ignores page viewport (but not browser window's
-   *   bounds). Defaults to `true`.
+   *   headful mode. Defaults to `true`.
    *
    * NOTE: Screenshots take at least 1/6 second on OS X. See
    * {@link https://crbug.com/741689} for discussion.
@@ -2909,6 +2908,8 @@ export class Page extends EventEmitter {
         ? options.fromSurface
         : undefined;
 
+    const viewport = this.#viewport;
+
     if (options.fullPage) {
       const metrics = await this.#client.send('Page.getLayoutMetrics');
       // Fallback to `contentSize` in case of using Firefox.
@@ -2918,22 +2919,7 @@ export class Page extends EventEmitter {
       clip = {x: 0, y: 0, width, height, scale: 1};
 
       if (!captureBeyondViewport) {
-        const {
-          isMobile = false,
-          deviceScaleFactor = 1,
-          isLandscape = false,
-        } = this.#viewport || {};
-        const screenOrientation: Protocol.Emulation.ScreenOrientation =
-          isLandscape
-            ? {angle: 90, type: 'landscapePrimary'}
-            : {angle: 0, type: 'portraitPrimary'};
-        await this.#client.send('Emulation.setDeviceMetricsOverride', {
-          mobile: isMobile,
-          width,
-          height,
-          deviceScaleFactor,
-          screenOrientation,
-        });
+        this.setViewport({...viewport, width, height});
       }
     }
     const shouldSetDefaultBackground =
@@ -2942,6 +2928,10 @@ export class Page extends EventEmitter {
       await this.#setTransparentBackgroundColor();
     }
 
+    if (fromSurface === false && this.#viewport) {
+      await this.setViewport(this.#viewport);
+    }
+
     const result = await this.#client.send('Page.captureScreenshot', {
       format,
       quality: options.quality,
@@ -2953,8 +2943,8 @@ export class Page extends EventEmitter {
       await this.#resetDefaultBackgroundColor();
     }
 
-    if (options.fullPage && this.#viewport) {
-      await this.setViewport(this.#viewport);
+    if (options.fullPage && !captureBeyondViewport && viewport) {
+      await this.setViewport(viewport);
     }
 
     const buffer =

test/src/golden-utils.ts

@@ -65,9 +65,7 @@ const compareImages = (
       ? PNG.sync.read(expectedBuffer)
       : jpeg.decode(expectedBuffer);
   if (expected.width !== actual.width || expected.height !== actual.height) {
-    throw new Error(
-      `Sizes differ: expected image ${expected.width}px X ${expected.height}px, but got ${actual.width}px X ${actual.height}px.`
-    );
+    return {diff: PNG.sync.write(new PNG(actual))};
   }
   const diff = new PNG({width: expected.width, height: expected.height});
   const count = pixelmatch(

test/src/screenshot.spec.ts

@@ -197,7 +197,7 @@ describe('Screenshots', function () {
       const screenshot = await page.screenshot({
         fromSurface: false,
       });
-      expect(screenshot).toBeDefined(); // toBeGolden('screenshot-fromsurface-false.png');
+      expect(screenshot).toBeGolden('screenshot-fromsurface-false.png');
     });
   });