Capture Screenshots by Freezing Animations

Animations, while visually appealing, can pose challenges during visual testing by causing false positives in visual diffs. These false positives often arise because animations can create minor variations between screenshots, even when there are no actual changes to the content. To address this, TestMu AI SmartUI provides the capability to automatically freeze animations during visual testing, ensuring consistent and reliable test results.

Freezing SVG Animations

Consider an SVG element on your page with a loading animation that spins using the transform attribute. To freeze this animation, you can add the following custom JavaScript to your page before taking a screenshot:

const freezeAnimations = () =>  {
    // Freeze all SVGs animated using animate and animateTransform tag
    // SVGs animated through CSS or JS will require custom solutions
    const allSVGs = document.getElementsByTagName('svg');
    let allSVGAnimations = [];
    for (let svg of allSVGs) {
        const svgAnimation = [...svg.getElementsByTagName('animate'), ...svg.getElementsByTagName('animateTransform')];
        allSVGAnimations = allSVGAnimations.concat(svgAnimation);
    }

    allSVGAnimations.forEach(animation => {
        const duration = animation.getAttribute('dur');
        animation.setAttribute('begin', '0s');
        animation.setAttribute('dur', '0s');
    });
}