Testing Web Applications

Introduction

Welcome to this lesson. Today we are talking about one of the most widespread kinds of application in our digital world: web applications. Every day you use dozens of sites — Facebook, Gmail, Amazon, Netflix, Twitter — all of them web applications. But what makes them distinct? And how do we test them? Let's explore.

What you will learn

By the end of this lesson you will be able to:

• Know what distinguishes web applications from other kinds of application
• Test a web application through the UI, the API and the database
• Prioritise the test types according to the kind of site you are working on

What is a web application?

A web application is any application that runs inside the browser. You do not need to download it to your device, you do not need to install it — you just open the browser, type the URL, and start using it.

Examples you know:

• Facebook — open facebook.com from any device and your account is there
• Gmail — your email available from anywhere
• Amazon — you shop from the browser without downloading anything
• Netflix — you watch films and series from the browser
• Twitter/X — you browse and post from the site
• LinkedIn — you look for jobs and connect with people

Characteristics of web applications

What makes a web application different from other kinds of application?

You open it through a URL

Every web application has an address: amazon.com, gmail.com, netflix.com. You type the URL in the browser and you are there.

It needs no installation

There is no installer, no "Next, Next, Finish". You open the link and that is it — ready to use.

It runs on the server, it appears in the browser

The application itself lives on the company's servers (Netflix's servers, for example), and you only see the result in your browser. All the heavy computation happens on the server, not on your device.

Cross-platform — it works on any device

The same site runs on:

• Windows — Chrome, Firefox, Edge
• Mac — Safari, Chrome, Firefox
• Linux — any browser
• Mobile — the browser on the phone
• Tablet — the browser on the tablet

The operating system does not matter — what matters is that there is a browser.

It usually needs a connection

Most web applications need the internet to work. Some modern applications can work offline for a limited time (Gmail, for instance), but that is the exception, not the rule.

Updates happen automatically

When the company updates the site, every user gets the new version immediately. There is no "Update to version 2.0" — you just open the site and it is already updated.

How do we test web applications?

There is more than one way to test a web application:

Testing through the browser (UI Testing)

This is the most obvious approach — you open the site in the browser and interact with it as an ordinary user:

• You click the buttons
• You fill in the forms
• You move between pages
• You check whether everything works correctly

Example: if you are testing Amazon:

• You search for a product
• You add it to the basket
• You go to Checkout
• You enter the payment details
• You confirm the order

All of this through the interface you see in the browser.

Testing through the API (Backend Testing)

Web applications have an API (Application Programming Interface) — a programmatic interface that lets the Frontend talk to the Backend. You can test this API directly, without opening the browser at all.

Example: when you add a product to the basket on Amazon:

• The interface sends a request to the API: POST /cart/add
• The API adds the product to the database
• The API returns a response: "Added successfully"

You can test these steps directly against the API with tools like Postman or a REST client:

curl -X POST https://api.example.com/cart/add \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"productId": "B08N5WRWNW", "quantity": 2}'

Testing through the database (Database Testing)

Sometimes you need to confirm that the data was actually stored correctly in the database:

• Was the order really recorded?
• Is the amount correct?
• Was the status updated?

You can connect to the database directly and look at the data.

Example: after placing an order on a food delivery site, you go to the database and confirm:

• There is a new row in the Orders table
• The amount is written correctly
• The address is there
• The status is pending

select id, status, total_amount, created_at
from orders
where customer_id = 4821
order by created_at desc
limit 1;

Testing on different browsers (Cross-Browser Testing)

The same site can appear differently on different browsers:

• Chrome — the most used
• Firefox — a popular browser
• Safari — the default browser on Mac and iPhone
• Edge — the default browser on Windows

You have to test that the site works properly on all of them.

Why? Because each browser interprets the code slightly differently. Something can work perfectly in Chrome and be broken in Safari.

Testing on different devices (Cross-Device Testing)

The site has to work on:

• Desktop — large screen
• Laptop — medium screen
• Tablet — smaller screen
• Mobile — small screen

Responsive Design: modern sites change their shape according to the screen size. When you open Amazon on a phone, the site shows a different version — bigger buttons, simplified menus, clearer text.

You have to test every size and confirm that everything is clear and easy to use.

The important test types for web applications

Every kind of application needs a focus on particular test types. For web applications, these are the most important:

Functional Testing

What is it? Confirming that all the site's features work correctly.

Examples:

• Does login work?
• Does search return correct results?
• Does adding a product to the basket work?
• Do filtering and sorting work?

Why does it matter? This is the foundation — if the features do not work, the site is useless.

Compatibility Testing

What is it? Confirming that the site works on different browsers and devices.

What do we test?

• Browsers: Chrome, Firefox, Safari, Edge
• Devices: Desktop, Mobile, Tablet
• Operating systems: Windows, Mac, Linux, Android, iOS

Why does it matter? Your users are not all on the same browser. If the site does not work on Safari, you have lost every Mac and iPhone user.

A real example: a site works perfectly on Chrome but the buttons are hidden on Safari → users on Safari cannot complete their order → lost sales.

Visual/UI Testing

What is it? Confirming that the site looks right and reads clearly.

What do we test?

• Do the colours display correctly?
• Is the text readable?
• Do the images load?
• Is the layout tidy and unbroken?
• Does the Responsive Design work (does it adapt to the screen size)?

Why does it matter? First impressions matter. A site that looks broken or unclear sends users away to another site.

Example: you open a site on your phone and find:

• Text running off the screen
• Buttons far too small to tap
• Cropped images

These are visual problems and they need fixing.

Security Testing

What is it? Confirming that the site is safe and protected.

What do we test?

• Is login secure? (HTTPS, encryption)
• Is sensitive data protected?
• Are there security holes? (SQL Injection, XSS)
• Do permissions work correctly? (nobody can see somebody else's data)

Why does it matter so much for web applications? Because the web is open to everyone — anyone can reach the site and try to break into it. Sensitive information (passwords, payment details, addresses) has to be protected.

Example: a shopping site — without good security, someone could steal users' credit card details → a disaster for the company and the users.

Usability Testing

What is it? Confirming that the site is easy and clear for users.

What do we test?

• Is it easy to find what you want?
• Are the buttons clear and understandable?
• Are the steps logical?
• Does a new user understand what to do?

Why does it matter? A complicated or unclear site makes users give up and leave. It has to be simple and easy.

Example: you try to buy a product from a new site:

• There is no clear "Add to Cart" button
• The payment process is complicated — ten pages
• It is not clear where to enter the address

You will give up and go to Amazon, where everything is clear and direct.

API Testing

What is it? Testing the programmatic interface that lets the Frontend talk to the Backend.

What do we test?

• Does the API return the correct data?
• Are the status codes correct? (200 for success, 404 for not found, 500 for an error)
• Is the response fast?
• Does error handling work?

Why does it matter? The whole site depends on the API. If the API is broken or slow, the site will not work properly.

Example: you search for "laptop" on a shopping site:

• The Frontend sends: GET /search?query=laptop
• The API has to return a list of laptops
• If the API returns the wrong products or nothing at all, the user sees an empty page

Localization Testing

What is it? If the site is available in more than one language, we have to test each language.

What do we test?

• Is the translation correct?
• Does the text display properly? (especially Arabic, which runs right to left)
• Are dates and numbers in the correct format?
• Is every page translated?

Why does it matter? If your site is global, users from different countries speak different languages. Each one has to find the site in their own language.

Example: Facebook is available in more than 100 languages. They have to test that each language works correctly and the text is clear.

Considerations specific to web applications

There are particular things to keep in mind when testing sites:

Browser differences

Every browser interprets CSS and JavaScript slightly differently.

A common example:

• A Flexbox layout works perfectly in Chrome
• But on an older version of Safari there is an alignment problem
• The result: the elements are neatly arranged in Chrome and broken in Safari

The fix: test on all the common browsers.

Cache problems

The browser stores the site's files (images, CSS, JavaScript) so that the site loads faster next time. But sometimes this causes problems:

• The company updates the site
• But the browser is still using the old stored files
• The user sees the old version

The fix: test in Incognito mode, or clear the cache regularly.

Sessions and Cookies

Sites use sessions and cookies to remember you:

• You log in → a cookie is stored
• You leave and come back → you are still logged in

We have to test:

• Does the session persist when you leave and return?
• Is the cookie cleared when you log out?
• What happens when the session expires?

Example: you log in to a banking site, leave it open, and come back two hours later → the site should ask you to log in again (for security).

Responsive Design

The site has to adapt to the screen size:

• Desktop (1920x1080): side menus, large images, detailed tables
• Tablet (768x1024): smaller menus, medium images
• Mobile (375x667): hamburger menu, small images, a single column

We have to test every size.

Example: Amazon on a computer has a sidebar with all the categories. On mobile, that menu becomes a menu button so it does not take up space.

Connection speed

Users have different connection speeds:

• Fast internet → the site loads immediately
• Slow internet → the site takes time

We have to test that the site works even on a slow connection:

• Do the images load? (or is there a placeholder?)
• Is there a loading message?
• Does the site become usable before everything has loaded?

Example: you open a site on a slow connection — if it stays a white screen for a minute, you will give up and leave. But if there is a loading indicator and the essential content appears quickly, you will wait.

Browser Extensions

Some extensions can affect the site:

• An ad blocker can hide elements that are not adverts
• Privacy extensions can block certain scripts
• Password managers can change the shape of login forms

The fix: test with a clean browser (no extensions) and with a browser carrying the common ones.

Real examples from well-known sites

Let's look at how different kinds of site need a different focus in testing:

Amazon — e-commerce

Priorities:

• Functional Testing: search, add to basket and checkout have to work 100%
• Security Testing: payment details have to be protected
• Compatibility Testing: people shop from every kind of device
• Visual Testing: the site has to be attractive and tidy
• Usability Testing: buying has to be easy and fast

Why? Because Amazon is a commercial site — any problem in the buying process equals lost sales.

Gmail — email

Priorities:

• Functional Testing: sending and receiving mail, search, attachments
• Security Testing: email is extremely private — it has to be protected
• Usability Testing: organising and finding mail has to be easy
• Compatibility Testing: people open Gmail from many devices

Why? Email holds sensitive information, and people use it every day from different devices.

Netflix — video streaming

Priorities:

• Functional Testing: playing video, pausing, search
• Compatibility Testing: a lot of people watch on different devices (TV browser, laptop, tablet)
• Visual Testing: video quality, and the UI has to be clear
• Usability Testing: finding a film and playing it has to be easy

Why? Netflix is all about the viewing experience — if the video does not play properly or the site is hard to use, people cancel their subscription.

Facebook — social media

Priorities:

• Functional Testing: posting, comments, likes, sharing
• Visual Testing: images and videos have to display correctly
• Compatibility Testing: billions of users on countless devices and browsers
• Security Testing: user privacy matters

Why? Facebook has billions of users all over the world — it has to work on everything.

Lesson summary: web applications are everywhere

Web applications are the backbone of the modern internet. From shopping to communication to work to entertainment — everything has moved to the web. And as testers, our role is to make sure these applications work correctly, are secure, are fast, and are easy to use.

The key points:

• Web applications run in the browser and need no installation
• You test them through the UI, the API and the database
• Compatibility matters enormously — different browsers and devices
• Security is fundamental — especially for sensitive information
• Responsive Design has to work at every size

Next time you open any site, think about how many kinds of testing had to happen for it to look like that and run that smoothly. Behind every successful site there is a testing team working hard to guarantee an excellent experience for users.

Good luck!