cartoony image of developer building a website

Website testing strategies can have different definition depending on the organisation. However there are some common guidelines and practices that everybody should follow.
Moreover every business needs to have a website to get that internet exposure and benefit from the sweet organic traffic. Having a strong online presence can be a huge advantage over the competitors. By having a great website you can basically automate the customer acquisition process. However the internet nowadays is a brutal place and the competition is very strong. Issues that are minor at first glance might be the defining factor of whether your website will perform well or it will end up in the 13th page of the google search. This way customers may never discover it.

Common Problems

What minor issues are we talking about? Firstly these could be functional problems with the page like buttons not working or leaving the website in a unusable state. On other hand they could be visual problems like bad colors, misaligned elements or hard to read text. Check our post for more detailed list on common problems in websites.

Software developers have been struggling with these problems for a very long time. That’s why they develop many tools for the purpuse. Moreover it became obvious that discovering issues in the early stages of developments process makes them easier to fix and minimises the impact. Nowadays people are considering downtime of dew hours to be unacceptable. Just look at some of the SLAs of the popular hosting providers. “99.999% up time”, this is 5 minutes downtime per year! Clearly the demand for reliable services and availability has become one of the most important aspects of building a software project.

Websites need QA testing now more than ever. For website in particular, losing a customer on your landing page might mean losing him/her to your competitors. You might never see them again. This is why businesses can no longer afford to have critical bugs on their webpages.

This leads to different website testing strategies to be specified and we are going to describe the most useful ones.

Functional Testing

image of code for functional website testing strategy using jest

People often associate functional testing with black-box testing. Meaning we are not that concerned with the source code but more with the behaviour of the webpage. Every functionality of the system is tested without bothering with the internals or how every component is implemented. However this process can be very expensive. This is why choosing the right testing tools and services can be very crucial.

There are four types of testing that together form the functional testing strategy.

Smoke Testing

Often times people refer to Smoke Testing as “Build Verification Testing”. In fact it is a functional testing that consists of a small set of tests. The aim is to ensure that the most important functions work. Most often quality engineers use the result of this testing to decide if a build is stable enough to proceed with further testing, or whether the release candidate is stable enough for the production environment. This is actually amongst the most used website testing strategies.

The term ‘smoke testing’ came to software testing from a similar type of hardware testing. The device passes the test when it does not detect fire (or smoke) the first time it is ON.

Sanity Testing

the joker

Sanity testing is a kind of functional testing which testers perform upon receiving a software build. Usually with minor changes in code, or functionality. Sanity testing asserts that the bugs are no longer present and no further issues have been introduced to the system. The goal is to determine that the proposed functionality works roughly as expected. If sanity test fails, the build gets rejected to save time and costs involved in a more rigorous testing. Sanity tests are usually very basic and quick. Sometimes QA teams execute them agains production environments.

Regression Testing

Functional regression testing confirms that a recent program or code change has not adversely affected existing features. Regression Testing is nothing but a full or partial selection of already executed test cases. Test engineers re-execute to ensure existing functionalities work as expected. Moreover they do this testing to make sure new code changes do not have side effects on the existing functionalities. It ensures that the old code still works once the latest code changes are done.
Regression testing runs on any environment as long as it has no actual impact on real live users.

Acceptance Testing

Acceptance testing is a level of functional testing where product owners check the website for acceptability. The purpose of this test is to evaluate the system’s compliance with the business requirements and assess whether it is acceptable for delivery. Moreover testing is performed with respect to user needs, requirements, and business processes conducted to determine whether or not a system satisfies the acceptance criteria and to enable the user, customers or other authorized entity to determine whether or not to accept the system.
These tests ensure that the requirements meets the stakeholders needs.

Visual Testing

website testing strategy - visual testing

You can view visual testing as an alternative to functional testing. It basically covers the same use cases, but it might give you better results in some cases. Visual testing is testing focused on how the site looks and it captures differences introduced in the web site. This is done by comparing screen shots of the web pages in different points of time.

Why should you care about visual testing?

Well aren’t web sites all about looks? With functional testing you can capture code issues with great accuracy. However that doesn’t guarantee anything about the site looks. Moreover with functional testing we are not able to test the styles (CSS), which is a major gap. Often times visual testing is not included in any website testing strategies listings.

To get more familiar with visual testing we have very detailed guide on How to test your web page for visual bugs?

Usability Testing

The main difference between usability and functional testing is that with usability testing we have real people testing the website. These are usually early users you have given beta access, or third party companies. We observe their behavior and reactions to the product. Whether you start small by watching session recordings or go all out and rent a lab with eye-tracking equipment, usability testing is a necessary step to make sure you build an effective, efficient, and enjoyable experience for your users.

Why do we need usability testing?

As mentioned usability testing is done by real-life users. They are likely to reveal issues that people familiar with a website can no longer identify—very often. In-depth knowledge can blind designers, marketers, and product owners to a website’s usability issues. Moreover bringing in new users to test your site and/or observing how real people are already using it are effective ways to determine whether your visitors:

  • Understand how your site works and don’t get ‘lost’ or confused
  • Can complete the main actions they need to
  • Don’t encounter usability issues or bugs 
  • Have a functional and efficient experience
  • Notice any other usability problems

This type of research is exceptionally important for new products or design updates. Without it, you may be stuck with a design process that your team members understand, but your target audience does not. This is more common scenario that you might think.

Main benefits of usability testing

Validate your MVP or prototype

Getting early feedback for your website might drastically change your development process or priorities. Moreover it might turn out your users lack the technical skills to understand your services or simply don’t need them. Testing on a prototype first can validate your concept. Also it helps making plans for future functionality before you spend a lot of money to build a complete website.

Align your expectations

Once your product is completed, perform a usability testing again to make sure everything works the way it was intended. How’s the ease of use? Is something still missing in the interface?

Identify issues with complex flows

There are multiple step functionalities on your website which users may find difficult to follow. For example an e-commerce checkout process. Runing usability testing will make sure these processes are as straightforward and intuitive as possible.

Complement and illuminate other data points

Usability testing can often provide the why behind data points accumulated from other methods.

Catch minor errors

In addition to large-scale usability issues, usability testing can help identify smaller errors. A new pair of eyes is more likely to pick up on broken links, site errors, and grammatical issues that have been inadvertently glossed over. Individually these incorrect details may not matter a lot. However collectively they contribute to the perception of a site’s professionalism and trustworthiness.

Develop empathy

It’s not unusual for the people working on a project to develop tunnel vision around their product. They happen to forget they have access to knowledge their typical website visitor may not have. Usability testing is a good way to develop empathy for the real people and look at things from their perspective.

Get buy-in for change

It’s one thing to know about a website issue; it’s another to see users actually struggle with it. When it’s evident that something is being misunderstood by users, it’s natural to want to make it right. Watching short clips of key usability testing findings can be a very persuasive way to lobby for change within your organization.

Interface Testing

Interface Testing verifies whether the communication between two different software systems is done correctly. A connection that integrates two components is called interface. This interface in a computer world could be anything like API’s, web services, etc. Testing of these connecting services or interface is referred to as interface testing. In the context of website testing strategies it is usually based around third party libraries or services the web page is making requests to.

Code change might break the communication between the website and the third parties. Or the third party might change its application interface. We need a way to ensure that the service to service communication is working properly.

  • Failing requests to external or internal service
  • Networking issues
  • SSL certificates problems. For example a certificate might have expired or is invalid
  • Browsers blocking requests under certain conditions like cross origin blocked requests

Compatibility Testing (Cross browser testing)

all browser logos in one image

Cross browser compatibility website testing strategies have been gaining more and more popularity in the recent years. And there is a very good reason why. While technology is evolving rapidly, people aren’t. Many people are resistant to changes or simply refuse to upgrade their technical skills. In this situation, it’s browser compatibility testing that enables businesses to ensure that they don’t lose potential customers, or ruin the user experience of existing ones. Even though browsers like Google Chrome and Firefox dominate the market, there are people using their older versions, or other browsers.

Cross browser compatibility testing in a nutshell

Cross browser compatibility testing is a non-functional form of testing. It focuses on your website’s basic features and functionality but on several browsers and devices. It could be either manual or automated, but it is always conducted on multiple platforms.

Impact on the web site quality

Not all browsers and devices work on the same configuration, they face browser compatibility issues on different levels. You would not want a section of your prospective users to not be able to access the application features. Moreover most of the bigger websites out there are most definitely taking this into consideration when they are designing their website testing strategies.

More often we see web sites working great on Chrome and Firefox, but won’t even load properly on Internet Explorer, or Safari. If your projects start its development with cross browser/device compatibility in mind, it is usually not so expensive process to support all major platforms.

Performance Testing

Web page speed is becoming more and more important. Companies are paying lots of money for better hardware, hosting or network speed. However they seem to miss major web site performance issues. In long term improving the quality is always less expensive than huge monthly fees for hardware and hosting. We will go into details about the most common performance issues seen over and over again in different websites.

Not minified CSS/JavaScript/HTML

Minification is the process of replacing longer symbols in the code with shorter, removing comments, new and blank lines and dead code. It can greatly reduce the size of the static resources. This allows for faster initial loading of crucial resources. Furthermore by reducing the codebase size browsers are able to execute it faster. You might even see improvements in the JavaScript execution and HTML rendering speed.

To enable minification on a web site is usually very simple. The effort depends on the framework that is being used to develop it. To list a few:

Not using g-zip compression when serving text resources

This is more of a server configuration, but it is a must have. It can reduce the size of text based resources with up to 95%!
The process is essentially zip-ing the text before sending it to the client. Then the browsers unzip it upon receiving. This saves lots of network resources that can be redirected to downloading images in parallel or other bigger resources.

Serving huge images

Images are usually the biggest chunks of data we need to transfer to the client. However they don’t need to be in full hd size. You can experiment with different image quality for small image boxes. You may not really need to use such big images for them. Further more there are automatic image compression tools out there that you should definitely be taking advantage of. Moreover there is even more efficient format for images – next gen image format.

Not using browser cache

Modern browsers allow the server to specify a client side cache. Meaning the browser can store images and other bigger files in the clients device. In other words it will not download them from the server every time. This is achieved with the Cache Control HTTP header.
This is a very useful especially if you have many assets on your web pages.

Switching to HTTP2?

HTTP2 is a binary protocol where as HTTP1.X is text based, which makes is more efficient. Computers exchange binary data and then present it to the user in readable text forma. This means that HTTP2 doesn’t force servers to convert their binary streams of data to text, making the communication between them less CPU intensive.
HTTP2 also opens a single connection and reuses it to send all the data (this can vary). This can be either a good or bad thing for your website. The number of assets you have on your page and their size determine that.

But should you switch to HTTP2? Our suggestion is try it. See if you get performance boost, but don’t expect miracles, HTTP1.1 is very optimized on its own. Overall users have been reporting up to 5% performance boost. But there are quite a few that report performance degradations in certain cases. Read more about HTTP2 in this great digitalocean post.
Anyhow this might prove of little importance when you are designing your website testing strategies. However we decided to put it here just so you are aware of its existence.

Security Testing

Security testing is the process of checking whether the confidential data stays confidential or not. Only the user, limited group of website maintainers and authorized people can expose the user data. Whether it is a website testing strategy or not is up for debate. However we decided to include it since we think it is one of the most important aspects of testing.
Today data privacy and security is very sensitive topic. You necessary don’t want your name to be involved in data leaks or security breaches affecting your customers. To avoid any security issues you should follow all the specific guidelines for your web platforms, or even maybe hire some experts.

In conclusion

At the end how you are going to test your products is up to you. Knowing that other companies are using those popular website testing strategies might help you define your own custom solution. As always we at team@snapics.co are always ready to help, ping us with any problems or question you might have.