Web application testing: How to get the most out of your sessions

Web applications

We’re now living in a time where users expect as much functionality, reliability and flexibility from Web apps as desktop programs. All our data is slowly but surely moving into the cloud, and businesses are looking to the Web for software to easily implement and deploy across the board – whether it’s accounting, CRM or inventory management. That puts a lot of pressure on developers to deliver rock-solid Web apps that users can genuinely depend on for work and play.

That’s why it’s so important to thoroughly test your Web application before launch. Presenting a quality web app that doesn’t break, works efficiently and delights users naturally builds a foundation of trust between you and your customers, and they’ll be happy to use it more often and even refer it to peers. Plus, you’ll have far fewer customer support issues to deal with, leading to savings on costs and manpower.

Let’s take a look at how we can test our web applications to ensure that we’re on track for a successful opening day.

What should you test?

Whether your app helps users edit photos, send invoices, connect with friends or track social influence, you’ll generally need to look at four broad areas while testing your web application:

Functionality testing

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

Users expect web apps to function accurately, quickly and consistently. That means you have to kick the tires on everything that helps a user achieve a result of some sort. Some common functional elements that require thorough testing include:

Forms: everything from feedback surveys to creating new to-dos, to subscribing to a newsletter. Check that submissions work correctly and are properly connected to your database, and that all fields accept input as necessary.

File manipulation and calculations: image and document uploads, editing and computation functionality and correct output. Ensure that you try as many scenarios as you can think of in which users might try your app, and accommodate them as far as possible. Also, look at how efficient your app is at computing and displaying results, to allow for a smooth user experience.

Search: if your app allows users to search through content, files or documentation, ensure that your search engine comprehensively indexes this information, updates itself regularly and is quick to look up and display relevant results.

Media components: test for smooth and seamless audio and video playback, animations and interactive media (like games and graphics tools). These components should function as expected and not break or slow down the rest of the app while loading or running.

Scripts and libraries: ensure that your scripts (say, for image display or Ajax page loads) are compatible with all the various browsers your audience may use to access your app, and measure their load times to help optimize performance. If your scripts are only compatible with certain browsers, make sure they degrade gracefully on others so that all users get the best possible experience of your app.

Other elements you should check for complete functionality in, include notification systems, user profiles, and administration dashboards.

User interface and usability testing

Not only should your Web app run like a well-oiled machine, but it should also provide a quality front-end experience for all your users. To achieve this, you’ll need to consider all the visual and textual elements that your users encounter, and test them to ensure they are displayed correctly and efficiently. What should you keep your eye on?

Navigation: all links to and from your homepage should be prominent and pointed to the right destination pages.

Accessibility: ensure, as far as possible, that your app is easy to use even for those with disabilities or impairments of vision or motor functions. The W3C‘s Web Content Accessibility Guidelines should help you identify and approach ways to make your app more universally user-friendly.

Cross browser testing: users will likely access your site from numerous combinations of browsers and operating systems, and your app may not display the same way across all of them. Be sure to test as many of these combinations as possible to ensure that your app works as intended, for as wide a user base as possible.

Error messages and warnings: your app is bound to break at some point, even if it’s not your fault. Make sure that your app is descriptive and helpful when users encounter an issue such as a 404 page or an unsuccessful upload.

Help and documentation: not all users will be equally comfortable using your app; some may need assistance the first few times, while others might experience an issue even though they’re familiar with the product. Run through your app to check that documentation and/or support channels are easily found and accessible from any module or page.

Layouts: test your app to make sure it displays correctly and consistently in as many browsers and viewport sizes as possible.

You’ll also want to go over all animations, interactions (such as drag-and-drop features and modal windows), fonts and glyphs (especially web fonts) and of course, front-end performance (page render speeds, and image and script load times) while you’re at it.

Security testing

Most Web apps capture and store data from users, including their personal details, billing information and work/personal files — and these users trust you to keep that data secure. Your app should:

1. Keep private data private
2. Insist on authentication before granting access to data, and limit/allow access data as necessary
3. Ensure that data integrity isn’t compromised.

Hackers can target your app at any time and from anywhere, so it’s a good idea to familiarize yourself with their methods and the kinds of vulnerabilities they look for. The most common attacks launched on web sites and apps include:

Cross-site scripting: when a website is tricked into accepting malicious code, which it spreads to visitors)

SQL injection: when a hacker, through a user input vulnerability, runs an SQL command on the app’s database, leading to damage or theft of user data. These generally occur due to the improper neutralization of special elements used in SQL commands or OS commands.

DDoS (Distributed Denial of Service) attacks: when an app is rendered unavailable to users, usually by flooding the target server with requests so that it slows to a crawl or becomes unresponsive.

Be sure to test for common programming errors that could expose your app to such attacks. Some examples of these errors include missing authentication checks, using hard-coded credentials which hackers can find in source code, leaving sensitive data unencrypted and not locking down web server directory access.

You can test for the above and more, with the help of white-hat security experts or any of a number of web tools designed for automated security probes and tests.

Load testing

Users will expect your app to run as fast as the day they first tried it, whether you’ve got 10 customers or 10,000. Plus, you might experience spikes in traffic at certain times of the day, month or year, or when your promo went viral or you were featured in a prominent publication.

Test your app and its server environment to ensure that your product works well regardless of how many users are logged in (within reason, of course). Most quality Web hosts offer solutions that can scale up to handle additional traffic in real-time, so be sure to look into that when shopping around for a host.

How should you test your web application?

Testing is an integral part of any web project build, and requires a systematic approach in order to cover maximum ground using the limited time and resources available to do so. Here’s are the steps involved in testing a typical Web app.

1) Set goals

In most cases, testing is a time-bound process, particularly when gearing up an app for launch. That’s why it’s important to prioritize which functions of your app you need to test thoroughly before your app is out the door and in the wild. For example, if you’re building an app to allow customers to create online stores, you’ll want to prioritize the testing of payment gateway connections over text alignment issues.

Prioritizing in this manner not only helps you ensure that the key functions of your app are up and running, but also allows you to set clear expectations for the entire team (testers, developers, management et al) at crunch-time, and have everyone focus in the right direction to ensure a smooth launch. You can always continue to test and sort out smaller issues and customer-reported issues after your app has gone live.

2) Define processes and use cases

Before beginning to test your app, it’s important to define exactly how you and your team will go about the entire process. Start by gathering all the available documentation (right from marketing content to user startup guides) and sharing it with your testers. Next, chalk out possible use cases and even improbable ones to account for as many scenarios in which your users may encounter your app, to see if your product breaks.

Be sure to set up a bug tracking tool that testers can use to report issues, and that developers and designers can use to identify, replicate and fix bugs.

3) Set up a test environment

Once your build is ready for testing, deploy it on a restricted-access server environment that’s identical to your intended live server. This will allow testers to take your app for a spin in conditions similar to when it’s out in the real world, and identify issues that may go unnoticed when developing and testing on a local server.

For example, in a location-aware app, a large SVG image of a map might take too long to load and time out, leaving a mobile user in the lurch and unsure of how to proceed or retrace his steps.

4) Actual unit testing

This is when you begin to really put your app through its paces, having prepared your processes for doing so.

“Most testing processes for Web apps are too laborious to run through in an afternoon — or even a week’s worth of afternoons —so it’s important to break it into manageable chunks for testing,” says Jeremy Petter, QA guru at Flow, an online task management and collaboration app.

“I use a list in Flow to tag each point of user interaction with its location in the app, as well as its general form and function. I also tag these widgets to indicate whether they animate, are sensitive to permissions, or otherwise relate to a specific feature of the app.

Because the list is modular, you can add or remove items or tags as the software changes through development. or as I identify likely points of regression. And while such plans exist to make sure the details don’t get forgotten, my focus shifts to specific areas based on the goals of our present sprint, what we hear from testers, and what our users report via support.”

5) Verify your code

In order to deliver a clean, error-free experience that’s easy to maintain, you should validate your code and ensure it’s up to established Web standards. Doing so will not only make for increased compatibility across browsers, but also better performance.

6) Load testing and performance tuning

Test your app and its environment to see if it can stand up to massive surges in traffic and bandwidth requirements, and look for snags that might be hindering your app’s performance. You can also consider using available online services to monitor user traffic, server utilization, and issues caused by imperfect code and slow-loading scripts, and make tweaks to increase speed and efficiency in your app.

7) Security testing

Finally, test your app to make sure it’s bullet-proof and safe from malicious hackers, beginning with basic app availability and uptime, right up to user data integrity.

Does Web application testing differ from mobile application testing?

Not by much, particularly if the mobile and Web apps offer similar functionality. Says Petter, “Most of the same principles apply to both web and mobile apps and we aim to have our web apps feel as immersive and responsive as our native applications. This means testing against a large number of browsers and devices, across desktop, mobile and tablet configurations to ensure the best possible experience.

“It also means predicting how our software will interact with both general browser features such as font restrictions and supplemental tools such as ad blockers and password managers. The landscape for such features is evolving rapidly, and our strategies to test against them must be informed by direct feedback via support and internal alpha testing.”

Two top tips for testing

Advanced testing involves getting your customer hat on. “Think how a customer would use each feature before testing it thoroughly,” says Sahil Parikh, who’s currently building Brightpod, a project management app for marketing teams. Putting yourself in a customer’s shoes will help you develop realistic use cases and scenarios to try out, and eliminate possible errors before they happen.

Jeremy Petter has a tip for hands-on testers. “Testing is detail-oriented and requires intense concentration. I find that my most productive testing takes place in the first hour or two of a given session, and I try to switch projects every few hours to maximize my focus and productivity,” he says.

“Even switching to Internet Explorer to incorporate compatibility testing into whatever else I’m working on can be enough of a change of to keep my mind alert. To use an analogy, chess is a highly strategic game, but is often won or lost based on a momentary loss of focus. Instead of honing in on a particular detail or strategy, I suggest doing everything possible to keep a relaxed, open mind and to avoid burnout.”

Image credit: Oleksiy Mark/Shutterstock