Blog

Wow, that seems magical.  How can I test upgrading my website without actually upgrading it?  That can’t be.

Let me explain.

If your website is typical of today’s modern sites, it uses numerous front-end modules, libraries, frameworks and plugins to provide a positive user interface experience to your site visitors.  Like any software, the version you are relying on is not perfect. The vendors of these front-end components often release patches, bug fixes, service packs, minor and major upgrades that you may want to take advantage of, but simply can’t because of the time, resources and risks that the upgrade process may incur.

For example, maybe you want to upgrade to a newer version of a jQuery plugin so that you can utilize a new capability in its latest version.  Or perhaps you want to upgrade to the latest version of jQuery itself because they fixed an issue that is affecting some of your users. The task of doing the actual upgrade is easy.  Simply replace a couple of CSS and JS files and you’re all set. But you know that’s not really the case. There are two primary reasons that stop you from upgrading quickly.

Reason #1 - No Suitable Test Environment

Since it’s bad form to install and test in your production environment, you need to stand up a proper testing environment.  But, maybe you can’t because your Web or IT resources are stretched too thin right now, and it just isn’t worth the effort to clone off Production and stand up a new test/staging environment just to get this one new release upgraded on your site.

Reason #2 - Long Manual Testing Effort

Secondly, you may not have the resources to test the affected parts of the site thoroughly.  In the past you would have needed to enlist a couple of the content owners to ensure that the areas of the site that utilize this new front-end component are not adversely affected. However they can’t be called upon for each and every new front-end update.  

As such, either one or the other, or both of these two reasons often prohibit you from improving your website here and now.  You end up putting off the enhancement or hoping your visitors won’t be bothered too much by the bug. Maybe you’ll upgrade once new versions of some of the other components are released.  That way you can justify those costs.

But, wouldn’t it be great if you can solve both issues? I’m happy to say that you can now.

Solution

As you may already know, the WebsiteUpgradeTester.com tool solves the testing resource issue by eliminating your time-consuming manual testing effort through automated visual testing.  The tool does this by taking digital screenshot images of all your pages, at the screens sizes you specify, before you apply the upgrade and then again after you upgrade. It then detects if anything is different, and reports those differences to you.

Because the tool is automated, it can process all of the pages in your site in a very short amount of time.  An hour or so for sites with hundreds of pages and overnight for sites with thousands or tens of thousands of pages.  No site is too large.

The WebsiteUpgradeTester.com tool can also eliminate the time and resources needed to set up a new development environment, just for you to test a few replacement front-end library files.   With the tool’s “Resource Definitions” feature, you can configure the tool to swap out the old version of the front-end JavaScript and CSS files, with the newer versions of those files when it tests the post-upgrade or “after” version of your site. Let me explain this in more detail.

WebsiteUpgradeTester.com drives what's known as a headless browser (or a browser without a user interface) to take the screenshots of your pages at the desired device size.  As it processes the CSS and JS resources for your pages, it swaps out the old version of those resources and instead loads the new versions.

This makes it easy to test your site running the new version with no server setup work.  

Simply point the WebsiteUpgradeTester.com tool at your Production site and let it capture screen shots of some or all of your pages at the device sizes you want to test.  This set of screen captures will be referred to as the “before” set. Then, using the Resource Definitions feature, configure the JS and CSS files to replace, add, or remove and have the tool capture your site again.  However this time, the tool will replace the old JavaScript and CSS files, loading the new versions of the front-end files, and will take the “after” versions of these screenshots using those newer resources.

The tool will then compare digitally, pixel-by-pixel screen captures with the old version of the library, with the screen captures of the new version.  Even the slightest differences in rendering will be reported to you.

The tool can also be configured to test various user actions such as mouse clicks, hovers, or text input.  For example, if the new version of the plugin was used to render an accordion, you can configure the tool to simulate a set of mouse clicks to simulate clicking each accordion panel.  A screenshot of the page after each click action will be taken and then compared with the pre-upgrade versions for differences.

Please note this feature only works with upgrades to front-end components that load JavaScript and/or CSS resources.  If you need to upgrade a back-end component, such as a WordPress plugin or a new version of a database driver, then this feature won’t work for you.  Also if your front-end component requires more complex testing of user interactions, such as drag and drop, etc., this approach may not work. It still can be used to thoroughly test the rendering, just not the more complex user interactions beyond simple clicks, moves, and user input.  

So that’s pretty cool.  You can use the WebsiteUpgradeTester.com tool to efficiently test your website upgrade to front-end components, without actually upgrading your site.   This allows you to upgrade your front-end components more often, saving time and resources.

---

WebsiteUpgradeTester.com is the only cloud-based, automated visual testing tool designed to help you efficiently and affordably test your website upgrade. Whether it’s a major version upgrade, service pack or security patch, you can quickly test your entire site, no matter how large, to uncover any lurking issues due to the upgrade.

Don't waste time manually testing your next Website upgrade. Visit WebsiteUpgradeTester.com and sign up for a free trial.

For more detailed information about best practices on upgrading your website and improving your website maintenance processes, we recommend reading The Ultimate Guide to Upgrading and Patching Your Website.