feat: use captureBeyondViewport in Page.captureScreenshot (#6805)

BREAKING CHANGE:
- `page.screenshot` makes a screenshot with the clip dimensions, not cutting it by the ViewPort size.

src/common/Page.ts

@@ -1680,20 +1680,8 @@ export class Page extends EventEmitter {
       const width = Math.ceil(metrics.contentSize.width);
       const height = Math.ceil(metrics.contentSize.height);
 
-      // Overwrite clip for full page at all times.
+      // Overwrite clip for full page.
       clip = { x: 0, y: 0, width, height, scale: 1 };
-      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,
-      });
     }
     const shouldSetDefaultBackground =
       options.omitBackground && format === 'png';
@@ -1705,6 +1693,7 @@ export class Page extends EventEmitter {
       format,
       quality: options.quality,
       clip,
+      captureBeyondViewport: true,
     });
     if (shouldSetDefaultBackground)
       await this._client.send('Emulation.setDefaultBackgroundColorOverride');

test/screenshot.spec.ts

@@ -50,26 +50,8 @@ describe('Screenshots', function () {
       });
       expect(screenshot).toBeGolden('screenshot-clip-rect.png');
     });
-    // TODO: enable after the screenshot is fixed.
-    // https://crbug.com/1173457
-    it.skip('should clip elements to the viewport size without artefacts', async () => {
-      const { page, server } = getTestState();
-      await page.setViewport({ width: 50, height: 50 });
-      await page.goto(server.PREFIX + '/grid.html');
-      const screenshot = await page.screenshot({
-        clip: {
-          x: 25,
-          y: 25,
-          width: 100,
-          height: 100,
-        },
-      });
-      expect(screenshot).toBeGolden('screenshot-offscreen-clip.png');
-    });
-    // TODO: remove after the screenshot is fixed.
-    // https://crbug.com/1173457
     itFailsFirefox(
-      'should clip elements to the viewport size with artefacts',
+      'should get screenshot bigger than the viewport',
       async () => {
         const { page, server } = getTestState();
         await page.setViewport({ width: 50, height: 50 });
@@ -82,9 +64,7 @@ describe('Screenshots', function () {
             height: 100,
           },
         });
-        expect(screenshot).toBeGolden(
-          'screenshot-offscreen-clip-artefacts.png'
-        );
+        expect(screenshot).toBeGolden('screenshot-offscreen-clip.png');
       }
     );
     it('should run in parallel', async () => {