Being able to easily run a visual compare when plugins have been updated on your site and then to make sure that nothing was broken visually can be a very complex process to deal with.
But there is a solid service which deals with this called Diffy. Diffy also provides an easy to use WordPress plugin to be able to integrate it with your site. Visual testing allows you to confirm any updates did not break anything visually on your site.
You will first need to create an account Diffy. Once you have created an account in Diff you will need to create a project. The project will include the site URL of your site and then make any changes needed to the settings in the project.
Next, you will need to create an API key in Diffy. You will need to install the Diffy plugin on your site and then activate it. Diffy will add a new menu item called Diffy in to wp-admin.
In the Diffy plugin settings, you will need to copy the ID of the project that you created along with the API key that you created.
In the Diffy project settings, you can set up to three environments such as production, staging, and development. If your staging or development site is password protected you can also include the username and password credentials in the environment settings.
Diffy unlike a number of visual comparison services has advanced settings so that you can mask and exclude DOM elements. Those type of DOM elements would be dynamic elements such as a video in the homepage slider or a widget which pulls in dynamic content. Being able to exclude those elements means that your visual compare results will be more accurate since there will not be false positives by those elements causing the issue. In the advanced settings, you can delay if assets are loading by JavaScript after the initial load or you can scroll in the screenshot before the result is recorded if there is an image that loads by scroll. Also if you are using Cloudflare CDN then you can bypass Cloudflare protection so that a correct result is returned on the site.
Diffy is very fast to preview the screenshots created for any of the diffs created of your site.
Every time you update the plugin on your site Diffy will compare production against the production site over all of the site URLs that you have entered in the project settings. You can send notifications to emails when a compare has been run as well as Slack. You would review the report and then check that nothing was broken visually on your site.
Comments are closed.