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:
- Submit a request.
- Right-click it.
- 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
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");
});