4. Freeze GIF & CSS Animations For Perfect Visual Testing

by | Jul 17, 2021 | API's

Freeze Animations

How Can We Help?

< All Topics

Animations inside you webpage are a big challenge for any Visual Testing tool as it is a biggest contributor towards creating false positives.

These animations not only add visual noise in their region , but also in the other adjoining regions. So simply ignoring them may not work

Although Imagium’s AI engine takes care of majority of invisible pixel noise, it is still a good practice to disable/freeze these animations before performing visual testing

Checkout this beautiful article about animations and Visual Testing by one of our competitor here

In this article lets see how can we handle various animations for Visual Testing purpose. The animations in a webpage can be primarily be of two types CSS animations and GIF’s.

The CSS animations are very simple to to freeze by just turning the animation-play-state: paused; for the element. Following java script code can be used to turn off all the CSS animations in a webpage. 

var items = document.getElementsByTagName('*');
  for (var i=0; i < items.length; i++) {
    items[i].style.animationPlayState = "paused";
  }
Other culprits for any Visual Testing are Gif animations

Following code can be used to pause all the GIF animations in a webpage

function is_gif_image(i) {
  return /^(?!data:).*\.gif/i.test(i.src);
}

function freeze_gif(i) {
  var c = document.createElement('canvas');
  var w = c.width = i.width;
  var h = c.height = i.height;
  c.getContext('2d').drawImage(i, 0, 0, w, h);
  try {
    i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
  } catch(e) { // cross-domain -- mimic original with all its tag attributes
    for (var j = 0, a; a = i.attributes[j]; j++)
      c.setAttribute(a.name, a.value);
    i.parentNode.replaceChild(c, i);
  }
}
[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);

The above code simply freeze all the Gif animations in a webpage. It works by replacing the gif element with a canvas element and drawing the first frame of element. In some cases you will see only the background.

Courtesy John Sundstrom

Java & Selenium – Freeze Gifs

Following code can be used in a Java and selenium script to freeze all the animations. Use this code before taking the screenshot.

		((JavascriptExecutor) driver).executeScript("function is_gif_image(i) {\n  return /^(?!data:).*\\.gif/i.test(i.src);\n}\n\nfunction freeze_gif(i) {\n  var c = document.createElement('canvas');\n  var w = c.width = i.width;\n  var h = c.height = i.height;\n  c.getContext('2d').drawImage(i, 0, 0, w, h);\n  try {\n    i.src = c.toDataURL(\"image/gif\"); // if possible, retain all css aspects\n  } catch(e) { // cross-domain -- mimic original with all its tag attributes\n    for (var j = 0, a; a = i.attributes[j]; j++)\n      c.setAttribute(a.name, a.value);\n    i.parentNode.replaceChild(c, i);\n  }\n}\n\n\n[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);");