Handling redirections

Learn how to navigate around issues caused by redirections when performing automated visual testing

This document describes the issues that occur due to redirections in the webpage and some suggested solutions to cater to those issues. Read more about redirections here.

Types of redirection

• Server Redirects: The user’s browser requests the original URL. The server automatically displays the webpage for the new URL (the redirect target).

• Meta Refresh Redirects: Meta refreshes happen at the page level (client-side) rather than the server level. That means they happen in your browser rather than on a server, unlike server redirects.
  Below example will redirect to percy.io as soon as the page loads.
  <meta http-equiv="refresh" content="0; url=https://www.percy.io/">

• JavaScript Redirects: These redirects also happen on the client side rather than the server side using JS scripts.

Why is it important?

Percy captures the DOM and assets of the rendered webpage in the browser when users run Percy snapshot using any SDKs, if redirection happens in the webpage some assets of the original webpage will be captured while some assets of the redirected webpage will be captured. We capture DOM specific to a webpage, this means when we replay the captured DOM in our infrastructure we will not have all the required assets to render the user’s webpage which may result in undesired screenshots.
Unstable webpages might adversely affect overall visual testing stability & result in poor user experience.

Possible Solutions for stable snapshots

• Percy will try to handle most types of redirects so that DOM remains stable throughout multiple snapshots. That said, enabling JS limits Percy’s abilities due to the vast number of ways the user’s JS code can trigger redirections. For javascript redirects one can try disabling JS by setting enable_javascript: false, this will disable redirections as no JS will be executed during the snapshot process. For more information related to this config refer here.
• If the user wants to capture both the original web page and redirected one, it is recommended that they take both snapshots separately i.e calling Percy snapshot separately for both the pages ensuring there are no further redirections, which will ensure that assets of both the webpages are captured correctly.

How Percy handles redirections

• If redirection happens during the DOM rendering phase Percy will try to detect it in most of the scenarios and show a default “Percy generated screenshot” instead of the redirected web page.
• User action: When you see Percy generated redirection screenshot, please check your SDK integration to make sure webpage DOM is in stable state when snapshot is captured and no redirection is expected.
  • if you can’t prevent the redirection, then try to increase the redirection time during Percy visual testing, so that Percy can render the snapshot & take stable screenshots for visual comparison.
  • Contact us for more help related to Percy.