fix: taking a screenshot with null viewport should be possible

Closes #8673
puppeteer · Jul 21, 2022 · ec121b3 · ec121b3
1 parent d734c14
commit ec121b3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/common/ElementHandle.ts b/src/common/ElementHandle.ts
@@ -785,11 +785,11 @@ export class ElementHandle<
     assert(boundingBox, 'Node is either not visible or not an HTMLElement');
 
     const viewport = this.#page.viewport();
-    assert(viewport);
 
     if (
-      boundingBox.width > viewport.width ||
-      boundingBox.height > viewport.height
+      viewport &&
+      (boundingBox.width > viewport.width ||
+        boundingBox.height > viewport.height)
     ) {
       const newViewport = {
         width: Math.max(viewport.width, Math.ceil(boundingBox.width)),
@@ -826,7 +826,7 @@ export class ElementHandle<
       )
     );
 
-    if (needsViewportReset) {
+    if (needsViewportReset && viewport) {
       await this.#page.setViewport(viewport);
     }
 

diff --git a/test/src/screenshot.spec.ts b/test/src/screenshot.spec.ts
@@ -21,6 +21,7 @@ import {
   setupTestPageAndContextHooks,
   itFailsFirefox,
   itHeadfulOnly,
+  itChromeOnly,
 } from './mocha-utils.js';
 
 describe('Screenshots', function () {
@@ -214,6 +215,27 @@ describe('Screenshots', function () {
       const screenshot = await elementHandle.screenshot();
       expect(screenshot).toBeGolden('screenshot-element-bounding-box.png');
     });
+    itChromeOnly('should work with a null viewport', async () => {
+      const {defaultBrowserOptions, puppeteer, server} = getTestState();
+
+      const browser = await puppeteer.launch({
+        ...defaultBrowserOptions,
+        defaultViewport: null,
+      });
+
+      try {
+        const page = await browser.newPage();
+        await page.goto(server.PREFIX + '/grid.html');
+        await page.evaluate(() => {
+          return window.scrollBy(50, 100);
+        });
+        const elementHandle = (await page.$('.box:nth-of-type(3)'))!;
+        const screenshot = await elementHandle.screenshot();
+        expect(screenshot).toBeTruthy();
+      } finally {
+        await browser.close();
+      }
+    });
     it('should take into account padding and border', async () => {
       const {page} = getTestState();