@browserless/screenshot 13.9.16 → 13.9.17

package/package.json

@@ -2,7 +2,7 @@
   "name": "@browserless/screenshot",
   "description": "Capture high-quality screenshots of websites with overlay support, device emulation, and automated image optimization.",
   "homepage": "https://browserless.js.org/#/?id=screenshoturl-options",
-  "version": "13.9.16",
+  "version": "13.9.17",
   "main": "src/index.js",
   "author": {
     "email": "hello@microlink.io",
@@ -33,7 +33,7 @@
   ],
   "dependencies": {
     "@browserless/errors": "13.9.11",
-    "@browserless/goto": "13.9.16",
+    "@browserless/goto": "13.9.17",
     "@kikobeats/content-type": "~1.0.4",
     "@kikobeats/time-span": "~1.0.13",
     "automad-prism-themes": "~0.3.8",
@@ -70,5 +70,5 @@
     "timeout": "2m",
     "workerThreads": false
   },
-  "gitHead": "5333e392cef2c9d71503a8d4a43037ea8ef78f06"
+  "gitHead": "23a3064ebf0ebc903178c705e223cc70907e256b"
 }

package/src/evaluate-isolated.js

@@ -0,0 +1,9 @@
+'use strict'
+
+const isolatedRealm = page =>
+  typeof page.mainFrame === 'function' ? page.mainFrame().isolatedRealm() : page
+
+const evaluateIsolated = (page, pageFunction, ...args) =>
+  isolatedRealm(page).evaluate(pageFunction, ...args)
+
+module.exports = { evaluateIsolated }

package/src/index.js

@@ -7,6 +7,7 @@ const pReflect = require('p-reflect')
 
 const isTransientContextLoss = require('./is-transient-context-loss')
 const isWhiteScreenshot = require('./is-white-screenshot')
+const { evaluateIsolated } = require('./evaluate-isolated')
 const waitForPrism = require('./pretty')
 const prettyTimeSpan = require('./time-span')
 const overlay = require('./overlay')
@@ -22,6 +23,8 @@ const {
 
 const timeSpan = require('@kikobeats/time-span')()
 
+const ELEMENT_CLIP_ATTEMPTS = 2
+
 // No pacing here on purpose: `waitUntilAuto` is a network-idle wait, which on a
 // live page costs at least its idle window (~500ms) and at most what is left of
 // the budget. The runaway case was never a fast loop — it was retrying a page
@@ -43,7 +46,7 @@ const captureWithNavigationRetry = async (capture, { page, goto, timeout }) => {
 }
 
 const getPageMeta = page =>
-  page.evaluate(() => ({
+  evaluateIsolated(page, () => ({
     title: document.title || '',
     bodyText: document.body ? document.body.innerText || '' : '',
     url: window.location.href || ''
@@ -63,15 +66,10 @@ const checkPageReady = async (page, { isPageReady, response, screenshot, isWhite
   return !pageReadyResult.isRejected && !!pageReadyResult.value
 }
 
-const getBoundingClientRect = element => {
-  const { top, left, height, width, x, y } = element.getBoundingClientRect()
-  return { top, left, height, width, x, y }
-}
-
 const waitForImagesOnViewport = page =>
-  page.$$eval('img[src]:not([aria-hidden="true"])', elements =>
+  evaluateIsolated(page, () =>
     Promise.all(
-      elements
+      Array.from(document.querySelectorAll('img[src]:not([aria-hidden="true"])'))
         .filter(el => {
           if (el.naturalHeight === 0 || el.naturalWidth === 0) return false
           const { top, left, bottom, right } = el.getBoundingClientRect()
@@ -86,15 +84,21 @@ const waitForImagesOnViewport = page =>
     )
   )
 
-const waitForElement = async (page, element) => {
-  const screenshotOpts = {}
-  if (element) {
-    await page.waitForSelector(element, { visible: true })
-    screenshotOpts.clip = await page.$eval(element, getBoundingClientRect)
-    screenshotOpts.fullPage = false
-    return screenshotOpts
+const readElementClip = async (page, element) => {
+  const handle = await page.waitForSelector(element, { visible: true })
+  try {
+    return await handle.boundingBox()
+  } finally {
+    await handle.dispose()
   }
-  return screenshotOpts
+}
+
+const waitForElement = async (page, element, screenshotOpts) => {
+  for (let attempt = 0; attempt < ELEMENT_CLIP_ATTEMPTS; attempt++) {
+    screenshotOpts.clip = await readElementClip(page, element)
+    if (screenshotOpts.clip !== null) break
+  }
+  screenshotOpts.fullPage = false
 }
 
 const SCREENSHOT_DEFAULT_OPTS = {
@@ -143,10 +147,10 @@ module.exports = ({ goto, ...gotoOpts }) => {
       const beforeScreenshot = async (page, response, { element, fullPage = false } = {}) => {
         const timeout = goto.timeouts.action(opts.timeout)
 
-        let screenshotOpts = {}
+        const screenshotOpts = {}
         const tasks = [
           {
-            fn: () => page.evaluate('document.fonts.ready'),
+            fn: () => evaluateIsolated(page, 'document.fonts.ready'),
             debug: 'beforeScreenshot:fontsReady'
           },
           {
@@ -164,9 +168,7 @@ module.exports = ({ goto, ...gotoOpts }) => {
 
         if (element && !fullPage) {
           tasks.push({
-            fn: async () => {
-              screenshotOpts = await waitForElement(page, element)
-            },
+            fn: () => waitForElement(page, element, screenshotOpts),
             debug: 'beforeScreenshot:waitForElement'
           })
         }
@@ -181,6 +183,10 @@ module.exports = ({ goto, ...gotoOpts }) => {
           )
         )
 
+        if (screenshotOpts.clip === null) {
+          throw new Error(`Element \`${element}\` detached before its clip could be read`)
+        }
+
         return screenshotOpts
       }
 

package/src/prepare-full-document.js

@@ -4,6 +4,7 @@ const debug = require('debug-logfmt')('browserless:prepare')
 const pReflect = require('p-reflect')
 
 const { waitForDomStability } = require('./wait-for-dom')
+const { evaluateIsolated } = require('./evaluate-isolated')
 
 const SCROLL_STEP_MS = 50
 const OVERFLOW_MIN_PX = 200
@@ -25,14 +26,14 @@ function findTallestOverflowScroller (minPx) {
   return best
 }
 
-// page.evaluate only serializes the function it is given, so an in-page helper
+// An evaluate only serializes the function it is given, so an in-page helper
 // can't be shared across evaluates by reference. Compose the scanner source in
 // front of `fn` on the Node side (no in-page eval, so page CSP is untouched) to
 // give every caller the same scanner.
 const evaluateInPage = (page, fn, ...args) => {
   const source = `${findTallestOverflowScroller}\nreturn (${fn}).apply(null, arguments)`
   // eslint-disable-next-line no-new-func
-  return page.evaluate(new Function(source), ...args)
+  return evaluateIsolated(page, new Function(source), ...args)
 }
 
 const waitForOverflowHeight = (page, timeout = OVERFLOW_WAIT_MS) =>
@@ -91,7 +92,7 @@ const expandOverflow = (page, minPx = OVERFLOW_MIN_PX) =>
 
 const settleDom = async (page, { idle, timeout }, label) => {
   const started = Date.now()
-  const result = await page.evaluate(waitForDomStability, { idle, timeout })
+  const result = await evaluateIsolated(page, waitForDomStability, { idle, timeout })
   debug(label, { ...result, duration: Date.now() - started })
 }
 

package/src/wait-for-ready.js

@@ -2,6 +2,7 @@
 
 const { setTimeout: sleep } = require('node:timers/promises')
 const isTransientContextLoss = require('./is-transient-context-loss')
+const { evaluateIsolated } = require('./evaluate-isolated')
 
 const DEFAULT_QUIET_MS = 300
 const DEFAULT_POLL_MS = 150
@@ -191,7 +192,7 @@ const waitForReady = async (
   while (Date.now() < deadline) {
     let signals
     try {
-      signals = await page.evaluate(paintSignals)
+      signals = await evaluateIsolated(page, paintSignals)
     } catch (error) {
       if (!isTransientContextLoss(page, error)) throw error
       resets++