feat: add ability to disable animations in assertView

BREAKING CHANGE: assertView now disables animations by default

README.md

@@ -645,6 +645,7 @@ Parameters:
    - compositeImage (optional) `Boolean` - overrides config [browsers](#browsers).[compositeImage](#compositeImage) value
    - screenshotDelay (optional) `Number` - overrides config [browsers](#browsers).[screenshotDelay](#screenshotDelay) value
    - selectorToScroll (optional) `String` - DOM-node selector which should be scroll when the captured element does not completely fit on the screen. Useful when you capture the modal (popup). In this case a duplicate of the modal appears on the screenshot. That happens because we scroll the page using `window` selector, which scroll only the background of the modal, and the modal itself remains in place. Works only when `compositeImage` is `true`.
+   - disableAnimation (optional): `Boolean` - ability to disable animations and transitions while capturing a screenshot.
 
 All options inside `assertView` command override the same options in the [browsers](#browsers).[assertViewOpts](#assertViewOpts).
 
@@ -1018,7 +1019,8 @@ Default options used when calling [assertView](https://github.com/gemini-testing
 ```javascript
     ignoreElements: [],
     captureElementFromTop: true,
-    allowViewportOverflow: false
+    allowViewportOverflow: false,
+    disableAnimation: true
 ```
 
 #### screenshotsDir

src/browser/client-scripts/index.js

@@ -33,9 +33,27 @@ exports.prepareScreenshot = function prepareScreenshot(areas, opts) {
     }
 };
 
+exports.disableFrameAnimations = function disableFrameAnimations() {
+    try {
+        return disableFrameAnimationsUnsafe();
+    } catch (e) {
+        return {
+            error: "JS",
+            message: e.stack || e.message
+        };
+    }
+};
+
+exports.cleanupFrameAnimations = function cleanupFrameAnimations() {
+    if (window.__cleanupAnimation) {
+        window.__cleanupAnimation();
+    }
+};
+
 function prepareScreenshotUnsafe(areas, opts) {
     var allowViewportOverflow = opts.allowViewportOverflow;
     var captureElementFromTop = opts.captureElementFromTop;
+    var disableAnimation = opts.disableAnimation;
     var scrollElem = window;
 
     if (opts.selectorToScroll) {
@@ -102,6 +120,10 @@ function prepareScreenshotUnsafe(areas, opts) {
         };
     }
 
+    if (disableAnimation) {
+        disableFrameAnimationsUnsafe();
+    }
+
     return {
         captureArea: rect.scale(pixelRatio).serialize(),
         ignoreAreas: findIgnoreAreas(opts.ignoreSelectors, {
@@ -125,6 +147,43 @@ function prepareScreenshotUnsafe(areas, opts) {
     };
 }
 
+function disableFrameAnimationsUnsafe() {
+    var everyElementSelector = "*:not(#hermione-q.hermione-w.hermione-e.hermione-r.hermione-t.hermione-y)";
+    var everythingSelector = ["", "::before", "::after"]
+        .map(function (pseudo) {
+            return everyElementSelector + pseudo;
+        })
+        .join(", ");
+
+    var styleElements = [];
+
+    util.forEachRoot(function (root) {
+        var styleElement = document.createElement("style");
+        styleElement.innerHTML =
+            everythingSelector +
+            [
+                "{",
+                "    animation-delay: 0ms !important;",
+                "    animation-duration: 0ms !important;",
+                "    animation-timing-function: step-start !important;",
+                "    transition-timing-function: step-start !important;",
+                "    scroll-behavior: auto !important;",
+                "}"
+            ].join("\n");
+
+        root.appendChild(styleElement);
+        styleElements.push(styleElement);
+    });
+
+    window.__cleanupAnimation = function () {
+        for (var i = 0; i < styleElements.length; i++) {
+            styleElements[i].remove();
+        }
+
+        delete window.__cleanupAnimation;
+    };
+}
+
 exports.resetZoom = function () {
     var meta = lib.queryFirst('meta[name="viewport"]');
     if (!meta) {

src/browser/client-scripts/util.js

@@ -88,3 +88,19 @@ exports.isSafariMobile = function () {
 exports.isInteger = function (num) {
     return num % 1 === 0;
 };
+
+exports.forEachRoot = function (cb) {
+    function traverseRoots(root) {
+        cb(root);
+
+        var treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+
+        for (var node = treeWalker.currentNode; node !== null; node = treeWalker.nextNode()) {
+            if (node instanceof Element && node.shadowRoot) {
+                traverseRoots(node.shadowRoot);
+            }
+        }
+    }
+
+    traverseRoots(document.documentElement);
+};

src/browser/commands/assert-view/index.js

@@ -17,7 +17,15 @@ const InvalidPngError = require("./errors/invalid-png-error");
 module.exports = browser => {
     const screenShooter = ScreenShooter.create(browser);
     const { publicAPI: session, config } = browser;
-    const { assertViewOpts, compareOpts, compositeImage, screenshotDelay, tolerance, antialiasingTolerance } = config;
+    const {
+        assertViewOpts,
+        compareOpts,
+        compositeImage,
+        screenshotDelay,
+        tolerance,
+        antialiasingTolerance,
+        disableAnimation,
+    } = config;
 
     const { handleNoRefImage, handleImageDiff } = getCaptureProcessors();
 
@@ -27,6 +35,7 @@ module.exports = browser => {
             screenshotDelay,
             tolerance,
             antialiasingTolerance,
+            disableAnimation,
         });
 
         const { hermioneCtx } = session.executionContext;
@@ -44,6 +53,7 @@ module.exports = browser => {
             allowViewportOverflow: opts.allowViewportOverflow,
             captureElementFromTop: opts.captureElementFromTop,
             selectorToScroll: opts.selectorToScroll,
+            disableAnimation: opts.disableAnimation,
         });
 
         const { tempOpts } = RuntimeConfig.getInstance();
@@ -55,7 +65,9 @@ module.exports = browser => {
             "screenshotDelay",
             "selectorToScroll",
         ]);
-        const currImgInst = await screenShooter.capture(page, screenshoterOpts);
+        const currImgInst = await screenShooter
+            .capture(page, screenshoterOpts)
+            .finally(() => browser.cleanupScreenshot(opts));
         const currSize = await currImgInst.getSize();
         const currImg = { path: temp.path(Object.assign(tempOpts, { suffix: ".png" })), size: currSize };
 

src/browser/commands/types.ts

@@ -54,6 +54,16 @@ export interface AssertViewOpts extends Partial<AssertViewOptsConfig> {
      * @defaultValue `undefined`
      */
     selectorToScroll?: string;
+    /**
+     * Ability to disable animations and transitions while making a screenshot
+     *
+     * @remarks
+     * Usefull when you capture screenshot of a page, having animations and transitions.
+     * Iframe animations are only disabled when using webdriver protocol.
+     *
+     * @defaultValue `true`
+     */
+    disableAnimation?: boolean;
 }
 
 export type AssertViewCommand = (state: string, selectors: string | string[], opts?: AssertViewOpts) => Promise<void>;

src/browser/existing-browser.js

@@ -74,9 +74,21 @@ module.exports = class ExistingBrowser extends Browser {
                 `Prepare screenshot failed with error type '${result.error}' and error message: ${result.message}`,
             );
         }
+
+        // https://github.com/webdriverio/webdriverio/issues/11396
+        if (this._config.automationProtocol === "webdriver" && opts.disableAnimation) {
+            await this._disableIframeAnimations();
+        }
+
         return result;
     }
 
+    async cleanupScreenshot(opts = {}) {
+        if (opts.disableAnimation) {
+            await this._cleanupPageAnimations();
+        }
+    }
+
     open(url) {
         return this._session.url(url);
     }
@@ -235,6 +247,56 @@ module.exports = class ExistingBrowser extends Browser {
             .then(clientBridge => (this._clientBridge = clientBridge));
     }
 
+    async _disableFrameAnimations() {
+        const result = await this._clientBridge.call("disableFrameAnimations");
+
+        if (result && result.error) {
+            throw new Error(
+                `Disable animations failed with error type '${result.error}' and error message: ${result.message}`,
+            );
+        }
+
+        return result;
+    }
+
+    async _disableIframeAnimations() {
+        const iframes = await this._session.findElements("css selector", "iframe");
+
+        try {
+            for (const iframe of iframes) {
+                await this._session.switchToFrame(iframe);
+                await this._disableFrameAnimations();
+            }
+        } finally {
+            await this._session.switchToParentFrame();
+        }
+    }
+
+    async _cleanupFrameAnimations() {
+        return this._clientBridge.call("cleanupFrameAnimations");
+    }
+
+    async _cleanupIframeAnimations() {
+        const iframes = await this._session.findElements("css selector", "iframe");
+
+        try {
+            for (const iframe of iframes) {
+                await this._session.switchToFrame(iframe);
+                await this._cleanupFrameAnimations();
+            }
+        } finally {
+            await this._session.switchToParentFrame();
+        }
+    }
+
+    async _cleanupPageAnimations() {
+        await this._cleanupFrameAnimations();
+
+        if (this._config.automationProtocol === "webdriver") {
+            await this._cleanupIframeAnimations();
+        }
+    }
+
     _stubCommands() {
         for (let commandName of this._session.commandList) {
             if (commandName === "deleteSession") {

src/config/browser-options.js

@@ -226,6 +226,8 @@ function buildBrowserOptions(defaultFactory, extra) {
             validate: value => utils.assertNonNegativeNumber(value, "antialiasingTolerance"),
         }),
 
+        disableAnimation: options.boolean("disableAnimation"),
+
         compareOpts: options.optionalObject("compareOpts"),
 
         buildDiffOpts: options.optionalObject("buildDiffOpts"),

src/config/defaults.js

@@ -13,6 +13,7 @@ module.exports = {
     diffColor: "#ff00ff",
     tolerance: 2.3,
     antialiasingTolerance: 4,
+    disableAnimation: true,
     compareOpts: {
         shouldCluster: false,
         clustersSize: 10,