How it WorksQuickly test your upgrade

Website Upgrade Tester takes screenshots of pages within your site before and after your Website upgrade. Then we compare the screenshots, examining pixel-by-pixel to see if there are any differences and report those to you if there are.

You can quickly view either a 'difference' image, which shows the changed pixels in red, or a side by side comparison of the before and after screenshot to see exactly what changed.

Read More

Testing StepsThere are 5 easy steps

Specify Pages to Test

You can upload an excel spreadsheet of URLs, point us to an existing sitemap.xml file, or have us spider your site, to build a 'Page Set' of URLs to hit.

1

Perform a
'Baseline' capture run

Next, we'll hit each of the pages in your Page Set, using one or more screen sizes you specify. We'll capture a 'baseline' screenshot of the entire page, which we'll use to compare against once you perform the upgrade.

2

Upgrade your CMS and/or JavaScript libraries

Next, you upgrade your site or its components as you normally would. This might be a new version of the CMS and/or JavaScript libraries. The upgrade can be done on the same server as the original capture or a different server.

3

Perform a
'comparison' run

Once the upgrade is completed, we'll hit each of the same pages in the 'baseline', using the same screen sizes, and will generate a new 'comparison' screenshot for each page/device size. Then, we'll do a pixel-by-pixel comparison to see if anything has changed.

4

View report of changed pages and take appropriate action

Finally, you simply view a report showing you what pages changed. We'll show you side-by-side the 'before', 'after' and 'difference' images, allowing you to quickly see what's changed.

5

7603369640

BenefitsWhy use Website Upgrade Tester?

Time

Shorten the testing
phase to allow faster go-live

You can test your site in a couple hours instead of days

Read More

Accuracy

Increase accuracy
of your testing

Know for sure exactly how each page looks and what‘s changed

905-783-4082

Peace of Mind

Eliminate embarrassments
of uncaught issues

Visually compare some or all of your pages to ensure nothing has changed

Read More

Resources

Utilize resources
more effectively

You don‘t need to have valuable resources spending days testing

Read More

FeaturesView some of the features of joomla Upgrade Tester

Specify some or all of the pages on your site to test by creating one or more Page Sets.

A Page Set is simply a listing of URLs. You can have one list of all pages or multiple lists of various portions of your site. What works best is up to you.

However, note that when defining and running a Baseline Run or Comparison Run only one Page Set can be specified.

You can create Page Sets in any of three ways:

  1. Import CSV spreadsheet file
  2. Specify SiteMap XML file
  3. Spider your site

Templates allow you to group similar pages, and then run specific actions against those pages.

This provides a couple of benefits. First, you can define dynamic regions and assign them to one or more templates. Then when performing the screenshot comparison these dynamic regions will be ignored for pages assigned to this template.

Secondly, you can filter and rerun pages by template name.

You can either manually define and manage your templates, or you can import them as part of importing a Page Set CSV file.

With the exponential rise of mobile usage and the ever-increasing number of new devices with different screen sizes, your testing efforts are becoming more and more substantial.

Fortunately, we make it easy to test multiple device sizes. Out-of-the-box we provide dimensions for many of the most common devices, plus you can add your own if needed.

Then when creating a Baseline Run, after you choose a Page Set, you can choose one or more device sizes to perform the run against. You can have one run with multiple device sizes, or multiple runs each with one device size, or any combination you choose.

The default screen sizes are listed here. You can also add custom screen sizes so you can test what is seen on various devices. The more sizes, the longer it will take.

If your site or a portion of it requires authentication, you can register the credentials for one or more test logins. Then when running a baseline or comparison run you can specify which login credentials to use.

Any page requests using a login will maintain the cookies set after the initial login.

Click the New Login... button to create a new login.

In order to perform any tests, you must create a site, and define at least one Page Set. For those customers that may have multiple sites (internet, intranet, extranet, or micro site), or design, development or hosting companies that have multiple customers, you can easily create and manage multiple sites under the same account.

Each site can have its own administrator and separate permissions to control access to the testing and/or results.

Dynamic Regions are a mechanism to mitigate the dynamic, interactive or randomized content on your site.  For example, you may have a weather widget or a list of recent news articles or social media posts.

If the content is known to possibly change between the time you run the Baseline Run and the Comparison Run, you should create a Dynamic Region to ignore this content, otherwise, pages with this content on it will be flagged by the tool as having differences, when they might not.

There are two types of Dynamic Regions you can create:

  1. Dynamic Region based on CSS Selector
  2. Dynamic Region based on Coordinates

JavaScript Snippets are registered JavaScript code blocks that are executed after a page loads, and just before the screenshot image is taken. An example might be to open a menu, or activate a tab or accordion panel, or hide a piece of dynamic content.

Once registered, JavaScript Snippets are then added to a named JavaScript Action and tied to one or more screen sizes. JavaScript Actions can then be associated with pages in a Page Set.

To create a JavaScript Snippet by specifying the following:

  • Name - a unique name for the snippet.
  • JavaScript Code - the small block of JavaScript code
  • Parameters - zero or more parameters
  • Test Information - A test URL, optional Login information and browser size to test the snippet.

In the JavaScript Code block, you simply write JavaScript or jQuery (if you have loaded the jQuery library on your page) code that performs your desired action.  If your snippet registered parameters, these parameters will be made available to your JavaScript code by accessing the local variable named 'snippet_data'

The snippets are easy to write and we provide several examples that you can use as a starting point. And if you don't have someone that knows JavaScript our support team can help you.

There are three special case JavaScript functions that you can call from your Snippet to help classify the page. They are:

  • upgradeTester_applyTag( string tag, boolean applyToBaseline ) - Applies the specified tag to the page/screen size.
    • Param 1 - tag - The name of the tag to be applied.
    • Param 2 - applyToBaseline - If the screenshot capture is for a Comparison run and appyToBaseline = 1, then the tag will be applied to both the Baseline and Comparison runs.  If the screenshot capture is for a Comparison run and appyToBaseline = 0, then the tag will be applied to only the Comparison runs. If the screenshot capture is for a Baseline run, this parameter is ignored and the tag will be applied to the Baseline run.
       
  • upgradeTester_setExcludeState( boolean exclude )  - Sets the exclude/include state for the page in the Page Set.
    • Param 1 - exclude - If 0 the page will be excluded from the Page Set.  If 1, the page will be included in the Page Set.
       
  • upgradeTester_setTemplate( string templatename )  - Sets the current page's template .
    • Param 1 - template name - Set the page to this template.

 

This dialogue allows you to either create a new Baseline Run or edit the properties of any existing Baseline Run.

You can create one or more 'baseline' runs as the foundation for your testing. A Baseline Run captures a screenshot of each page defined in your Page Set, for each device size. Then after you upgrade your site, and perform a Comparison Run, the baseline screenshot is compared with the comparison screenshot to see if anything has changed.

To create a Baseline Run, click the camera icon in the left-side menu, then click the 'New Baseline Run...' button.

In this dialogue, fields are group under three tabs: 

General Tab
Under the first tab you will: 

  • provide a name for the run,
  • choose the pages to run by specifying a Page Set
  • select one or more Screen Size(s)
  • provide the root URL to access the site before the upgrade

Authentication Tab
Under the second tab, you can define what login is used when capturing the snapshots of the baseline pages.  You will need to register your possible logins, prior to accessing this dialogue.

Schedule Tab
If you wish to perform the Baseline Run in the future, you can provide a future date/time.

Once the Baseline Run completes it will show on the Dashboard and Recent Baseline Runs pages where you can view the run stats.

To test what's changed to your pages after you perform your upgrade, you will kick off one or more 'Comparison Runs'.  A Comparison Run will create a comparison, or 'after', snapshot for each page/screen size, and will perform a pixel-by-pixel image difference to determine if any changes have occurred.

When creating a Comparison Run, you choose the Baseline Run to compare against, the root URL, and optionally a Login to use.  The same Page Set and device sizes defined for the Baseline Run are used for the Comparison.

As the run proceeds, a comparison screenshot is created for each page in the Page Set and each device size. Then immediately after the screenshot capture, a pixel by pixel comparison is made between the baseline screenshot and the new comparison screenshot. If any differences are found, a 'Difference Image' is created, which highlights in red the changed pixels.

You can create as many Comparison Runs as you need against a Baseline Run, or you can re-run selected pages from an existing Comparison Run.

If you manually kick off (versus schedule) either a baseline run or comparison run, you will see real-time status updates for the run.

You can drill into the details of the pages that have already been run and see their results. If it looks like something is off, you can cancel the run, with the option of picking it back up after you correct the problem, or just start it again from the beginning.

Dynamic, randomized or interactive content within your site can cause the image comparison of a page's 'before' screenshot and 'after' screenshot to appear different even though everything else is the same on the page except the rendering of this content.

In these cases, need to remove, or 'white-out' the known dynamic content so that it does not cause the tool to report false differences.

There are three mechanisms to do that:

 

You can visually test content within interactive portions of your page such as slider menus, tabs, accordion and carousels, by creating JavaScript Action Scripts. These scripts can simulate a mouse click, hover, or user input action, after the page loads, to allow comparison of the screen after the user action.

For example, let's say that you wanted to ensure that your mega menus operate properly. In your JavaScript Action Script, you can simulate the user clicking (or hovering) over a menu item to open it.

To test all menu options, you would simply load the same page multiple times, applying a different JavaScript Action Script that opens individual menus.

You can cancel and restart Baseline and Comparison Runs at any time.  To cancel a run from within the Run Details Dialog, simply click the red Cancel button in the lower corner of the dialogue.  To cancel a run from the Baseline Runs or Comparison Runs page, simply click the cancel icon in the Actions column.

Cancelling a run allows you to efficiently manage your testing resources.  For example, if you have a re-occurring error happening during a run, you can simply cancel the run, fix the issues and then restart it

When a run is cancelled, and there are pages remaining that have not been run, the run's status will show as 'Incomplete - Cancelled'.   To restart the run, simply click the recycle icon in the Actions column for that run.

Please note that you can also cancel a re-run of selected pages.  In this case, you will be prompted to confirm the cancel and any pages that have not been re-run yet will be removed from the re-run queue.

You don't have to kick off a run immediately when you create it. You can schedule when a baseline or comparison run starts at a time that makes sense for you.

This allows you to optimize testing and/or control load on your site.

If, after a Baseline or Comparison run, you see issues with any page, it's easy to re-run them and generate new screenshots.

Here are some of the ways to rerun pages:

  1. Rerun selected pages
  2. Rerun pages with errors
  3. Rerun modified pages
  4. Rerun pages by tag
  5. Rerun pages by template
  6. Rerun all Differences

Most of these options are available by checking the checkbox for one or more items on the results page and then opening the More Actions menu.

You can see the overall stats for both baseline and comparison runs from the dashboard or the baseline or capture report views.

From here you can drill into the detail of the result views as well.

All of these views provide filtering options, allowing you to narrow down the result sets.

For example in a baseline run, you probably just want to focus on those pages with errors, or pages with a specific error. On a comparison run, you may just want to view pages where a difference was detected.

No problem. Just set your filter criteria and the results will be narrowed appropriately.

After performing a comparison run, you can see a visual screenshot comparison for any page that rendered differently. Within the comparison run view, click the magnifying glass icon and a dialog will display showing the 'before', 'after' and 'difference' images.

From here you can zoom in on the differences in a few different ways:

  1. Full Size
  2. Side-by-side with splitter
  3. Flicker

Differences between the baseline run and comparison run are detected by performing a pixel by pixel comparison of the baseline screenshot against the comparison screenshot. Based on your 'fuzz' factor, if there are any differences, the page is marked as such and a 'difference image' is created showing in red, any pixels that are not the same. By looking at this image you can quickly tell what has changed. For subtle differences, you may view the images side-by-side with a slider or overlay with flickering effects.

Comparing before and after images may be done via:

  • A single image
  • Side by Side images
  • A slider that shows the before image on the left and after image on the right as you slide it over the screenshot.
  • A flicker screen that flashes the pixels quickly between the 2 images.

As an account administrator, you can create and manage users within your account and grant them appropriate permissions per site.

Administrators can control access to and action taken on a site by site basis though granular permissions.

Such permissions include:

  1. Account Administrator - Can create and manage users and sites, and can perform all actions.
  2. Site Administrator - Can administer permissions and settings for a site, and can perform all actions.
  3. Editor - Can create and manages Page Sets and Templates, and can kick off both baseline and comparison runs.
  4. Viewer - Can only view the results of runs. Can not perform any actions.

Depending on how your upgrade environment is configured, you may or may not perform the comparison run on the same server as the baseline run.

To handle this, the URLs that you define in Page Sets are server relative.  These are then combined with the base server URL when performing a run to get the fully qualified URL.

Depending on the size of your site, you can choose what size server the Upgrade Tester tool runs on to meet your needs. Additionally, you can control the number of threads used to capture screenshots of your pages and can control the time to wait for a response.

You can set a global page timeout value for the site, override it for a Page Set if desired, or override it for individual pages.

For example, the default 30-second value may be fine for 95 percent of your pages. After the first baseline run, if you see any timeout errors, you can go back and increase the timeout for just those pages

There are three (3) factors that determine the cost of running the upgrade tester tool.  They are:

You can configure the right combination of these three factors for your testing needs.  Remember that you can always up-size your configuration, but you cannot downsize it once you make a purchase.

 

Website Upgrade Tester provides numerous benefits over manually testing your website upgrade, including the following:

TIME

Using our automated toolset, you can test your site in a matter of hours instead of days or weeks, saving you a significant amount of time.

ACCURACY

Manual testing is prone to errors.  By using our digital, pixel-by-pixel comparison of each page you'll get super accurate results. 

PEACE OF MIND

With manual testing, you're never quite sure of your testing results.  Did you find all issues, across all devices?  You hope that site visitors are the ones to find uncaught issues. But by using the Website Upgrade Tester tool, you don't have to worry any longer.  You can now know for sure how each page looks after performing the upgrade and whether anything has changed, allowing you to eliminate embarrassments of uncaught issues.

RESOURCES

Why use your valuable resources to perform mundane testing, especially if an automated and digit precise process can do the job significantly faster with near 100% accuracy.

If your site has hundreds or even thousands of pages, testing it thoroughly can be a very time consuming and labour intensive task that's prone to error.

With the Website Upgrade Tester's automated testing tool, you can digitally test hundreds or thousands of pages in just a few hours.  

By taking a digital snapshot of your site's pages before and after the upgrade, the Website Upgrade Tester tool can quickly compare each of your pages, pixel-by-pixel, giving you an accurate list of pages that have changed.  You can then concentrate your efforts on this list, again saving you time.

Not only will the Website Upgrade Tester tool save you time, it will be extremely accurate at identifying differences in your site caused by the upgrade.

Traditionally, testing a site after an upgrade consists of one or more team members navigating to a subset of pages to see if they appear OK.  There are a number of reasons why changes may be overlooked: 

  • Doing any task repetitively is prone to error. That's just human nature.
  • Your tester(s) may not be familiar with all of the content, so it will be hard for them to know if it is rendering correctly.
  • If you are upgrading in-place you will not be able to compare to know if it has changed.
  • Unless your site is small, testing every page may not be possible.

Because Website Upgrade Tester tests each page in your site digitally, the level of accuracy is increased tremendously.  The tool compares every page at the resolutions you specify and compares the 'before' and 'after' snapshot pixel-by-pixel.  It will catch even the slightest change in position, color or size that may be caused by the upgrade.

For most companies, their public facing website is their most important marketing tool.  Making sure that it is working properly is imperative.

If you are the person responsible for the Website Upgrade, it is probably important to you that the upgrade runs successfully and that it does not adversely affect your site.  For anything but small sites, it's tough to know with 100% certainty that everything is still working.

However, with the Website Upgrade Tester tool, we can give you peace of mind that every single page on your site is rendering the same after the upgrade, as it did before the upgrade. And any page that doesn't, you'll know of, so you can fix it.  No longer do you have to worry about site visitors finding issues with your site.  You will know for sure how you stand after the upgrade.

 

 

 

Knowing that every page will have digital "eyes" on it for every screen size you determine is important, and helps what can often be a stressful endeavour. You will only need to examine pages that are different so the anxiety of checking every page is eliminated.

Since Website Upgrade Tester is doing most of the heavy lifting, you can apply your resources where they will provide the most benefit, addressing the pages that need attention. No wasted time reviewing anything that renders the same. Reports allow you to zero in on pages that are different, make changes then rerun just those changes.

PricingGet started today.

We offer a range of plans to fit your needs, starting with our complimentary free trial.

Our plans are based on the duration of time you need to test your upgrade, how many pages you wish to test, and the size of the servers needed to perform the testing in a reasonable time period.

Create Free Trial Account View Pricing Calculator

Use when performing any upgrade