Using a Browser For Testing

Using A Browser For Testing

When people think about testing web applications, they often imagine advanced tools. However, one of the most powerful testing tools is something you already use every day: your web browser.

Modern browsers such as Google Chrome, Mozilla Firefox, and Microsoft Edge include built-in developer tools that allow you to inspect, analyze, and test web applications.

What Does Testing With A Browser Mean

Using a browser for testing means:

• Inspecting how a website works
• Viewing network requests
• Modifying page content
• Testing input fields
• Analyzing JavaScript behavior
• Checking authentication and cookies

You are essentially investigating how the website behaves from the client side.

Opening Developer Tools

All major browsers include Developer Tools.

To open them:

• Press F12
• or
• Right-click on a page and select "Inspect"

This opens the Developer Tools panel.

The most important tabs are:

• Elements
• Console
• Network
• Application (or Storage)

Elements Tab

The Elements tab shows the HTML structure of the webpage.

You can:

• View HTML code
• Modify text
• Change attributes
• Test layout changes

For example, if a button is disabled in HTML:

<button disabled>Submit</button>

You can remove the disabled attribute inside DevTools and test whether the server properly validates the action.

Important lesson:

Client-side restrictions can be bypassed easily.

Servers must enforce validation.

Console Tab

The Console allows you to run JavaScript directly in the browser.

Example:

console.log("Testing console");

You can also inspect cookies:

document.cookie

This helps you understand:

• What session data is stored
• Whether cookies are accessible
• Whether security flags are set

If session cookies are readable via JavaScript, it may indicate missing HttpOnly protection.

Network Tab

The Network tab is one of the most powerful features for testing.

It shows:

• All HTTP requests
• Request headers
• Response headers
• Request body
• Response body
• Status codes

When you submit a login form, you can inspect the request.

Example HTTP request:

POST /login HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded

username=user&password=pass123

You can check:

• Is the password sent in plain text?
• Is HTTPS used?
• What status code is returned?
• Are tokens returned?

Testing Form Inputs

You can test input validation directly in the browser.

Example:

If a form says:

"Minimum password length is 8 characters"

Try entering:

• 1 character
• Special characters
• Very long strings
• Script tags

Example test input:

<script>alert('test')</script>

If this appears unescaped on the page, there may be an XSS vulnerability.

Editing And Resending Requests

In the Network tab:

1. Submit a request.
2. Right-click it.
3. Select "Edit and Resend" (in some browsers).

You can then modify:

• Parameters
• Headers
• Cookies

Example:

Original request:

GET /profile?id=5

Modified:

GET /profile?id=1

If you gain access to another user's data, the application may have an authorization flaw.

Application Or Storage Tab

This tab shows:

• Cookies
• Local Storage
• Session Storage
• IndexedDB

Testing tasks include:

Checking cookies for:

• HttpOnly flag
• Secure flag
• SameSite attribute

A secure cookie should ideally include:

• HttpOnly
• Secure
• SameSite=Strict or Lax

Testing JavaScript Behavior

In the Console, you can modify page behavior.

Example:

document.querySelector("input[name='username']").value = "admin";

You can also test client-side validation functions if they exist.

For example:

validateForm();

If you can bypass validation by directly sending requests, it shows that client-side validation is not sufficient.

Simple Local Practice Application

Below is a small Express application you can run locally to practice browser testing.

const express = require('express');
const app = express();

app.use(express.urlencoded({ extended: true }));

let users = [
    { id: 1, username: "admin", password: "admin123" },
    { id: 2, username: "user", password: "user123" }
];

app.get('/', (req, res) => {
    res.send(`
        <h2>Login Form</h2>
        <form method="POST" action="/login">
            <input name="username" placeholder="Username" />
            <input name="password" placeholder="Password" />
            <button type="submit">Login</button>
        </form>
    `);
});

app.post('/login', (req, res) => {
    const { username, password } = req.body;

    const user = users.find(
        u => u.username === username && u.password === password
    );

    if (user) {
        res.send("Login successful");
    } else {
        res.send("Invalid credentials");
    }
});

app.get('/profile', (req, res) => {
    const id = parseInt(req.query.id);
    const user = users.find(u => u.id === id);

    if (user) {
        res.send(`Profile of ${user.username}`);
    } else {
        res.send("User not found");
    }
});

app.listen(3000, () => {
    console.log("Server running on port 3000");
});

You can test:

• Modifying login inputs
• Inspecting network requests
• Changing the id parameter in /profile?id=1
• Observing server responses