@applitools/spec-driver-browser-extension 1.5.13 → 1.5.14

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.5.14](https://github.com/Applitools-Dev/sdk/compare/js/spec-driver-browser-extension@1.5.13...js/spec-driver-browser-extension@1.5.14) (2026-10-15)
+
+
+### Bug Fixes
+
+* wait for a paint before captureVisibleTab | [#4280](https://github.com/Applitools-Dev/sdk/issues/4280) ([#4282](https://github.com/Applitools-Dev/sdk/issues/4282)) ([f4e3459](https://github.com/Applitools-Dev/sdk/commit/f4e34596da89adc12a5683cf2674ab350f262b71))
+
 ## [1.5.13](https://github.com/Applitools-Dev/sdk/compare/js/spec-driver-browser-extension@1.5.12...js/spec-driver-browser-extension@1.5.13) (2026-10-13)
 
 

package/dist/spec-driver.js

@@ -78,6 +78,7 @@ function throwInjectionError(error) {
     throw err;
 }
 async function executeScript(context, script, arg) {
+    touchFrame(context.tabId, context.frameId);
     // Dispatch a stamped snippet by id through the page registry: executeScript structured-clones args
     // (so the content-script deref reviver never fires), and the page returns a {status, value|error}
     // envelope because MV3 nulls in-page throws.
@@ -270,12 +271,76 @@ async function getCookies(_driver) {
     });
 }
 exports.getCookies = getCookies;
+const PAINT_TIMEOUT_MS = 1000;
+// Chrome allows at most 2 captureVisibleTab calls per second (MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND).
+const MIN_CAPTURE_INTERVAL_MS = 500;
+// Frames where the driver ran a script since the last capture of the tab. A scroll always runs as
+// a script in the frame it scrolls, so these are the frames that can have a pending paint.
+const touchedFrames = new Map();
+let forgetClosedTabs = false;
+function touchFrame(tabId, frameId) {
+    if (!forgetClosedTabs) {
+        webextension_polyfill_1.default.tabs.onRemoved.addListener(closedTabId => touchedFrames.delete(closedTabId));
+        forgetClosedTabs = true;
+    }
+    let frames = touchedFrames.get(tabId);
+    if (!frames)
+        touchedFrames.set(tabId, (frames = new Set()));
+    frames.add(frameId || 0);
+}
+// captureVisibleTab returns the last frame the compositor produced. After a scroll or a tab switch
+// that frame can still show the old state. So the top frame and every touched frame read their
+// scroll position and layout, which applies a pending scroll, and then wait for two animation
+// frames. This makes a stale frame less likely, but the browser does not promise it. Other frames
+// are not waited for: a hidden or offscreen cross-origin frame runs no animation frames and would
+// always hit the timeout. A frame that is gone or does not allow injection is skipped. The
+// timeout inside the page does not help when the injection itself does not return, so the whole
+// wait also stops after PAINT_TIMEOUT_MS + 500 ms.
+async function waitForPaint(driver) {
+    var _a;
+    const frameIds = new Set([0, ...((_a = touchedFrames.get(driver.tabId)) !== null && _a !== void 0 ? _a : [])]);
+    touchedFrames.delete(driver.tabId);
+    let stop = () => { };
+    const timeout = new Promise(resolve => (stop = resolve));
+    const timer = setTimeout(() => stop(), PAINT_TIMEOUT_MS + 500);
+    const waits = Promise.allSettled(Array.from(frameIds, frameId => webextension_polyfill_1.default.scripting.executeScript({
+        target: { tabId: driver.tabId, frameIds: [frameId] },
+        func: (timeout) => new Promise(resolve => {
+            var _a;
+            const scrollingElement = (_a = document.scrollingElement) !== null && _a !== void 0 ? _a : document.documentElement;
+            void scrollingElement.scrollTop;
+            void scrollingElement.getBoundingClientRect();
+            const timer = setTimeout(resolve, timeout);
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                clearTimeout(timer);
+                resolve();
+            }));
+        }),
+        args: [PAINT_TIMEOUT_MS],
+    })));
+    await Promise.race([waits, timeout]);
+    clearTimeout(timer);
+}
+// Captures run one at a time, also across tabs, because the limit is not per tab. A capture
+// waits only for what is left of MIN_CAPTURE_INTERVAL_MS since the previous one.
+let lastCaptureAt = 0;
+let captureQueue = Promise.resolve();
 async function takeScreenshot(driver) {
-    const [activeTab] = await webextension_polyfill_1.default.tabs.query({ windowId: driver.windowId, active: true });
-    await webextension_polyfill_1.default.tabs.update(driver.tabId, { active: true });
-    const url = await webextension_polyfill_1.default.tabs.captureVisibleTab(driver.windowId, { format: 'png' });
-    await webextension_polyfill_1.default.tabs.update(activeTab.id, { active: true });
-    await utils.general.sleep(500);
+    const capture = captureQueue.then(async () => {
+        const [activeTab] = await webextension_polyfill_1.default.tabs.query({ windowId: driver.windowId, active: true });
+        await webextension_polyfill_1.default.tabs.update(driver.tabId, { active: true });
+        const gate = utils.general.sleep(Math.max(0, lastCaptureAt + MIN_CAPTURE_INTERVAL_MS - Date.now()));
+        await Promise.all([waitForPaint(driver), gate]);
+        try {
+            return await webextension_polyfill_1.default.tabs.captureVisibleTab(driver.windowId, { format: 'png' });
+        }
+        finally {
+            lastCaptureAt = Date.now();
+            await webextension_polyfill_1.default.tabs.update(activeTab.id, { active: true });
+        }
+    });
+    captureQueue = capture.catch(() => undefined);
+    const url = await capture;
     return url.replace(/^data:image\/png;base64,/, '');
 }
 exports.takeScreenshot = takeScreenshot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/spec-driver-browser-extension",
-  "version": "1.5.13",
+  "version": "1.5.14",
   "keywords": [
     "playwright",
     "chrome devtools protocol",