Warm-up: From Manual to Automation
🤔 Quick Poll: How many of you have tested these manually?
Session Flow: Your Testing Journey
Warm-up
From manual testing to automation mindset
Variables (var, let, const)
Storing test data safely
Console.log & typeof
Debugging your test data
Data Types
Understanding what you're testing
Conditions (if, else)
Making decisions in tests
Loops (while, do-while, for)
Testing multiple scenarios
Arrays & Methods
Managing test data collections
Variables: Your Test Data Storage
🏪 Real QA Scenario: OpenCart Test Data Management
"Think of your test data like items in a store. Sometimes you need to change prices (let), sometimes you need fixed prices (const), and sometimes you need old-fashioned pricing that can be overwritten (var)."
var - Old Storeroom
Anyone can overwrite labelsOld way of declaring variables. Can be redeclared and reassigned anywhere.
let - Modern Locker
Safe, block-scopedModern way to declare variables that can be reassigned but not redeclared in the same scope.
const - Sealed Box
Once written, can't changeConstants that cannot be reassigned or redeclared. Perfect for values that should never change.
🎯 Interactive Demo: OpenCart Test Variables
Try the code:
// OpenCart Test Variables Example
var siteName = "OpenCart";
var siteName = "BugKart"; // re-declared ✅
console.log("Site Name:", siteName);
let currentUser = "demo";
currentUser = "admin"; // reassigned ✅
console.log("Current User:", currentUser);
const BASE_URL = "https://demo.opencart.com/";
const LOGIN_SELECTOR = "#input-email";
// Try to change const (this will cause error)
// BASE_URL = "https://new-site.com/"; // ❌ Error
console.log("Base URL:", BASE_URL);
console.log("Login Selector:", LOGIN_SELECTOR);
// Interactive Question: What will this print?
var a = 10;
if (true) {
var a = 20;
}
console.log("Value of 'a':", a);Output:
Click "Run Code" to see the output...
📝 Mini Assignment: Create Your Test Variables
Task 1: Create username and password using let
Task 2: Create BASE_URL using const
Console.log & typeof: Your Debugging Tools
🔍 Real QA Scenario: Debugging Test Failures
"When your automated tests fail, you need to understand what data you're working with. console.log and typeof are your best friends for debugging - just like checking what's inside a box!"
console.log()
Outputs messages to the browser console for debugging
console.log('User logged in:', userName);
typeof
Returns the data type of a variable or expression
typeof productPrice; // "number"
🔍 Debug OpenCart Test Data
Debug this test data:
// OpenCart Test Data Debugging
let email = "demo@demo.com";
let age = 25;
let isLoggedIn = false;
console.log("Email type:", typeof email);
console.log("Age type:", typeof age);
console.log("Login status type:", typeof isLoggedIn);
// Interactive Question: What will this print?
let quantity = "5";
console.log("Quantity type:", typeof quantity);
// Real OpenCart scenario
let productName = "iPhone 14";
let productPrice = 999.99;
let inStock = true;
let productCategories = ["Electronics", "Phones"];
let productDetails = {
brand: "Apple",
model: "iPhone 14",
color: "Black"
};
console.log("Product Name type:", typeof productName);
console.log("Product Price type:", typeof productPrice);
console.log("In Stock type:", typeof inStock);
console.log("Categories type:", typeof productCategories);
console.log("Product Details type:", typeof productDetails);
// Debug a potential issue
let userInput = "admin"; // Simulating form input
console.log("User Input:", userInput, "Type:", typeof userInput);Console Output:
Click "Debug Data" to see the output...
🤔 Interactive Question
What will this code print?
let quantity = "5";
console.log(typeof quantity);💡 Explanation: As testers, if an API expects a number but the frontend sends a string, it's a bug! This is why understanding data types is crucial for automation.
Data Types: Understanding What You're Testing
📊 Real QA Scenario: OpenCart Product Data
"In OpenCart testing, you deal with product names (strings), prices (numbers), availability (booleans), and complex data (objects). Understanding types is crucial for automation!"
String
Text data enclosed in quotes
Number
Numeric values (integers and decimals)
Boolean
True or false values
Array
Ordered collection of values
Object
Collection of key-value pairs
🛒 OpenCart Data Types in Action
Real OpenCart Data:
// OpenCart Product Data Example
let product = "Laptop"; // string
let price = 500; // number
let available = true; // boolean
let categories = ["Phone", "Laptop", "Camera"]; // array
let user = { id: 1, name: "Admin" }; // object
console.log("Product (String):", typeof product);
console.log("Price (Number):", typeof price);
console.log("Available (Boolean):", typeof available);
console.log("Categories (Array):", Array.isArray(categories));
console.log("User (Object):", typeof user);
// Interactive Question: If you were testing OpenCart search,
// which datatype would you use to store results?
let searchResults = ["iPhone", "Samsung", "Google Pixel"];
console.log("Search Results Type:", typeof searchResults);
console.log("Is Array:", Array.isArray(searchResults));
// Real testing scenario
let testData = {
productName: "iPhone 14",
productPrice: 999.99,
inStock: true,
categories: ["Electronics", "Phones"],
specifications: {
storage: "256GB",
color: "Space Black"
}
};
console.log("Test Data Structure:");
console.log("- Product Name:", typeof testData.productName);
console.log("- Product Price:", typeof testData.productPrice);
console.log("- In Stock:", typeof testData.inStock);
console.log("- Categories:", Array.isArray(testData.categories));
console.log("- Specifications:", typeof testData.specifications);Type Analysis:
Click "Analyze Data" to see the type analysis...
🤔 Interactive Question
If you were testing OpenCart search, which datatype would you use to store results?
💡 Explanation: Search results are typically stored as an array because you get multiple products back. Each product in the array can be an object with properties like name, price, etc.