AutomationCodes

Complete TypeScript in 30 Minutes

2026-05-27T18:19:07.393+05:30

🚀 Learn TypeScript from Scratch

A complete beginner's guide — no JavaScript experience needed!

Hey there, future TypeScript developer!

If you've never written a line of code before, you're in the right place. This guide assumes nothing. We'll start from the absolute basics and build up to professional-level patterns that companies like Google and Microsoft use every day.

By the end, you'll understand not just how to write TypeScript, but why it makes your life easier. Let's dive in! 🏊

📖What Is TypeScript, Really?

Imagine you're writing a letter to a friend. In regular JavaScript, you can write anything you want — but if you make a spelling mistake or address it to the wrong person, you won't know until your friend reads it (or doesn't!).

TypeScript is like having a helpful editor proofread your letter before you send it. It catches mistakes while you're writing, not after. It makes sure you're addressing the right person, using the right words, and following the right format.

🍕 Real-World Analogy

Think of a pizza ordering app. In JavaScript, you could accidentally order "42" pizzas instead of "4" because the app doesn't check if your input is a number or text. TypeScript would catch this immediately and say: "Hey, that's not a valid pizza count!" — saving you from a very expensive (and weird) dinner.

TypeScript is built on top of JavaScript. This means every valid JavaScript program is also a valid TypeScript program. TypeScript just adds a layer of safety checks. When you're done writing, TypeScript removes those checks and outputs plain JavaScript that runs everywhere — browsers, servers, even your phone.

🧠 Remember This

TypeScript is JavaScript with a safety net. It checks your code for mistakes before you run it. The checks disappear when your code runs, so there's no speed penalty. It's like having a spell-checker for your code!

🎯What You Need to Start

Good news: you don't need much!

✋ Let's Check If Node Is Installed

Open your terminal (Command Prompt on Windows, Terminal on Mac) and type:

node --version

If you see something like v20.12.0, you're good to go! If not, download Node.js from the official website first.

⚙️Setting Up Your First TypeScript Project

Before we write any code, we need to tell TypeScript how to check our code. We do this with a special file called tsconfig.json — think of it as the rulebook for your project.

🏠 House Building Analogy

Imagine tsconfig.json as the blueprint for a house. It tells the builders (TypeScript compiler) what materials to use, how strict the building codes should be, and where to put the finished house. Without a blueprint, everyone guesses — and that's how bugs happen!

Step 1: Create Your Project Folder

Open your terminal and create a new folder for your project:

mkdir my-first-typescript

cd my-first-typescript

Step 2: Initialize TypeScript

Type this command to create your rulebook:

npx tsc --init

This creates a tsconfig.json file. Now let's make it strict (so it catches more bugs):

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

🤔 What Does This Mean?

Don't worry about every line right now. Here's what matters:

"strict": true — TypeScript will be extra careful checking your code. This is good!
"outDir": "./dist" — Compiled JavaScript goes here
"rootDir": "./src" — Your TypeScript files live here

Step 3: Create Your Folders

mkdir src

mkdir dist

Your project now looks like this:

my-first-typescript/
├── src/          ← Your TypeScript code goes here
├── dist/         ← Compiled JavaScript appears here
└── tsconfig.json ← Your rulebook

🧠 Remember This

You write code in src/ (TypeScript files ending in .ts), and TypeScript automatically creates the matching JavaScript in dist/. You never touch dist/ manually!

👋Your First Program: Hello World

Every programmer's journey starts with saying "hello" to the computer. Let's do that now!

Step 1: Create Your First File

Create a file called hello.ts inside your src/ folder. Open it in VS Code and type:

const greeting: string = "Hello World";

console.log(greeting);

🤔 Let's Break This Down

Line by line:

const means "this value won't change" (like writing in permanent marker)
greeting is the name we give to our value (like labeling a box)
: string tells TypeScript "this box contains text, not numbers"
= "Hello World" puts the actual text inside the box
console.log(greeting) prints the contents of the box to the screen

Step 2: Compile and Run

In your terminal, type:

npx tsc

TypeScript reads your .ts file and creates a .js file in dist/. Now run it:

node dist/hello.js

Hello World

🎉 You just wrote and ran your first TypeScript program!

🎮 Try It Yourself!

Change "Hello World" to your name, like "Hello, Maria!". Save the file, run npx tsc again, then node dist/hello.js. What do you see?

Type Inference: TypeScript Is Smart!

TypeScript can often figure out the type without you saying it explicitly. Watch:

const greeting = "Hello World"; 
// TypeScript KNOWS this is a string — no need to say :string!

Both versions work, but as you write bigger programs, being explicit helps prevent confusion. It's like labeling boxes when you move — tedious now, lifesaver later!

💬Writing Comments (Notes to Yourself)

Comments are notes you write for yourself and other humans. The computer completely ignores them. They're like sticky notes on your code!

// This is a single-line comment
// The computer ignores everything after //

/*
 * This is a multi-line comment
 * Use it for longer explanations
 * Or to temporarily disable code
 */

/**
 * This is a special JSDoc comment
 * It describes what a function does
 * And shows up in IDE tooltips!
 */
function add(a: number, b: number): number {
    return a + b;
}

📝 Why Comments Matter

Imagine coming back to your code in 6 months. Will you remember why you wrote return a + b? Comments are love letters to your future self. Write them generously!

🧩Understanding the Type System

At its heart, TypeScript is about shapes. Not geometric shapes — data shapes. It checks if the shape of your data matches what you promised.

🧩 The Puzzle Analogy

Imagine you have a puzzle piece shaped like a square hole. TypeScript makes sure you only try to put square pieces in that hole. If you try to jam a triangle piece in, TypeScript says: "That doesn't fit!" before you even try.

Two Ways to Describe Shapes: interface vs type

TypeScript gives you two tools to describe data shapes. They're similar but have different strengths:

// interface — best for object shapes
interface User {
    id: string;
    name: string;
    email: string;
}

// type — best for combinations and transformations
type UserStatus = 'active' | 'inactive' | 'suspended';
type UserOrNull = User | null;

🤔 When to Use What?

Don't overthink this as a beginner. Here's a simple rule:

Use interface when describing the shape of an object (like a User, Product, or Order)
Use type when you need "either/or" (like string | number) or complex combinations

As you gain experience, the differences will become clearer. For now, both work!

Declaration Merging: interface Superpower

Here's something cool interface can do that type can't:

interface User {
    id: string;
    name: string;
}

// Later in your code...
interface User {
    email: string;  // This ADDS to the User interface!
}

// Now User has: id, name, AND email
const user: User = {
    id: "123",
    name: "Alice",
    email: "alice@example.com"
};

This is called declaration merging. It's like adding a new room to a house after it's built — only interface lets you do this!

📦Storing Data: Variables

A variable is like a labeled box where you store a value. You put something in, give it a name, and use that name later to get your value back.

📦 The Box Analogy

Imagine three boxes:

A cardboard box (var) — anyone can open it, relabel it, or throw it away. Messy and unpredictable.
A plastic storage bin (let) — you can change what's inside, but you can't have two bins with the same label in the same room.
A sealed glass case (const) — once you put something in, it stays forever. Safe and predictable.

The Three Ways to Declare Variables

// const — use this by default (sealed box)
const name: string = "Alice";
// name = "Bob";  // ❌ ERROR! Can't change a const

// let — use when you NEED to change the value
let score: number = 0;
score = 10;  // ✅ This is fine
score = 20;  // ✅ Still fine

// var — old way, DON'T USE (cardboard box)
var oldWay: string = "avoid this";
var oldWay: string = "seriously, don't";  // Allowed but confusing!

⚠️ Why var Is Dangerous

var has weird behavior. It ignores block boundaries (the curly braces {}), can be redeclared, and causes hard-to-find bugs. It exists only for historical reasons. Always use const or let.

🧠 The Golden Rule

Default to const. Use let only when you genuinely need to change the value later. Never use var. This simple habit prevents 80% of variable-related bugs!

Type Annotations: Being Explicit

// Explicit: you tell TypeScript the type
const age: number = 25;
const name: string = "John";
const isStudent: boolean = true;

// Implicit: TypeScript figures it out
const age = 25;        // TypeScript sees 25, knows it's a number
const name = "John";   // TypeScript sees quotes, knows it's a string

Both work, but explicit annotations act as documentation. When another developer (or future you!) reads this code, they immediately know what each variable holds.

🔢The Building Blocks: Primitive Types

TypeScript has several basic types — the LEGO bricks of your programs. Here they are:

Type	What It Holds	Example
string	Text	"Hello", 'World'
number	Numbers (integers and decimals)	42, 3.14
boolean	True or false	true, false
null	Intentionally empty	null
undefined	Not yet assigned	undefined
symbol	Unique identifier	Symbol('id')
bigint	Huge numbers	9007199254740991n

The Dangerous any Type

// ❌ BAD: 'any' disables ALL type checking
let mysteryBox: any = "hello";
mysteryBox = 42;        // No error
mysteryBox = true;      // No error
mysteryBox.doAnything(); // No error — CRASH at runtime!

// ✅ GOOD: 'unknown' for truly dynamic data
let safeBox: unknown = fetchDataFromAPI();

// Must prove what it is before using
if (typeof safeBox === 'string') {
    console.log(safeBox.toUpperCase()); // Safe!
}

⚠️ Never Use any!

Using any is like turning off your smoke detector because it beeps too much. Sure, it's quieter — but your house might burn down! Use unknown instead when you genuinely don't know the type yet.

Type Predicates: Reusable Type Checks

// A function that PROVES data is a string array
function isStringArray(data: unknown): data is string[] {
    return Array.isArray(data) && 
           data.every(item => typeof item === 'string');
}

// Usage
const myData: unknown = ["apple", "banana"];

if (isStringArray(myData)) {
    myData.forEach(item => console.log(item));
    // TypeScript TRUSTS you — it knows myData is string[] here
}

🕵️ The Detective Analogy

A type predicate is like a detective's badge. When you show it, TypeScript says: "Okay, I trust your investigation — this data IS what you claim." Without the badge, TypeScript stays skeptical.

🔀Making Decisions: Booleans and Logic

Computers make decisions based on true or false — there's no "maybe" in code! TypeScript helps you write these decisions safely.

let isRaining: boolean = true;

if (isRaining) {
    console.log("Take an umbrella!");
} else {
    console.log("Enjoy the sunshine!");
}

// Logical operators
console.log(!isRaining);        // false (NOT true)
console.log(true && false);     // false (both must be true)
console.log(true || false);    // true  (at least one is true)

Type Narrowing: TypeScript Gets Smarter

Here's where TypeScript really shines. Watch how it narrows types based on your checks:

function processValue(value: string | number | boolean): void {
    if (typeof value === 'string') {
        // Inside here, TypeScript KNOWS value is a string
        console.log(value.toUpperCase());  // ✅ Allowed!
    } else if (typeof value === 'number') {
        // Inside here, TypeScript KNOWS value is a number
        console.log(value.toFixed(2));     // ✅ Allowed!
    } else {
        // Must be boolean — only option left!
        console.log(value ? 'Yes' : 'No'); // ✅ Allowed!
    }
}

🧠 Remember This

TypeScript narrows types as you check them. It's like peeling an onion — each check removes a layer of possibility until TypeScript knows exactly what you're working with. No guesswork needed!

🤔When Should You Write Types Explicitly?

TypeScript is smart, but you're smarter. Here's when to be explicit and when to let TypeScript handle it:

Situation	Write It Out?	Why?
Function parameters	Always yes	Others need to know what to pass in
Function return values	Always yes	Others need to know what they'll get back
Public API interfaces	Always yes	These are contracts with other developers
Simple local variables	Optional	TypeScript usually figures it out
Complex objects	Yes	Prevents confusion about structure

// ✅ Good: explicit function signature
function calculateTotal(price: number, quantity: number): number {
    return price * quantity;
}

// ✅ Good: explicit interface
interface Product {
    id: string;
    name: string;
    price: number;
}

// Optional: inference works fine here
const total = calculateTotal(10, 5);  // TypeScript knows it's number

📝 The Restaurant Menu Analogy

Think of explicit types as a restaurant menu. When you order, you want to know what ingredients are in the dish and what you'll get. Function signatures are your menu — they tell callers exactly what to provide and what to expect. No surprises!

🔄Repeating Actions: Loops

Computers excel at doing the same thing over and over. Loops let you repeat code without copy-pasting it a hundred times.

🏃 The Treadmill Analogy

A loop is like a treadmill. You keep running (executing code) while a condition is true. When the condition becomes false (you're tired!), you stop. Just make sure you don't create an infinite treadmill — that's an infinite loop, and it'll crash your program!

While Loop: "Do This While Something Is True"

let count: number = 0;

while (count < 5) {
    console.log("Count is: " + count);
    count++;  // Add 1 to count — VERY IMPORTANT!
}

// Output:
// Count is: 0
// Count is: 1
// Count is: 2
// Count is: 3
// Count is: 4

⚠️ Infinite Loop Warning!

If you forget count++, the loop runs forever because count never reaches 5. Always make sure your loop condition will eventually become false!

Do-While Loop: "Do This At Least Once, Then Check"

let number: number = 10;

do {
    console.log(number);  // Prints FIRST, checks AFTER
    number++;
} while (number < 10);

// Output: 10
// Even though 10 is NOT less than 10, it prints once!

For Loop: "Count From X to Y"

// for (start; condition; after-each-iteration)
for (let i: number = 0; i <= 5; i++) {
    console.log(i);
}

// Output: 0, 1, 2, 3, 4, 5

// Breaking out early
for (let i: number = 1; i <= 100; i++) {
    if (i % 2 === 0 && i % 5 === 0) {
        console.log(i);  // Prints multiples of 10
        if (i === 30) {
            break;  // STOP! Don't check anymore
        }
    }
}
// Output: 10, 20, 30

For...Of: The Modern Way (Best for Arrays)

const fruits: string[] = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
    // TypeScript knows 'fruit' is a string — no guessing!
}

// Output:
// apple
// banana
// cherry

🎮 Try It Yourself!

Write a loop that counts from 1 to 20 and prints only the even numbers. Hint: use if (i % 2 === 0) to check if a number is even!

📊Lists of Data: Arrays

So far, we've stored single values. But what if you need a list — like a shopping list, a class roster, or test scores? That's where arrays come in.

🎒 The Backpack Analogy

An array is like a backpack with numbered pockets. Each pocket holds one item, and they're numbered starting from 0 (not 1 — programmers start counting at 0!). You can look inside any pocket, replace items, add new pockets, or remove them.

Creating and Using Arrays

// A list of test scores
let scores: number[] = [85, 92, 78, 96, 88];

// Accessing items (remember: counting starts at 0!)
console.log(scores[0]);  // 85 (first item)
console.log(scores[2]);  // 78 (third item)
console.log(scores[4]);  // 88 (fifth item)

// How many items?
console.log(scores.length);  // 5

// Changing an item
scores[1] = 95;  // Changed 92 to 95
console.log(scores);  // [85, 95, 78, 96, 88]

🤔 Why Start at 0?

This confuses everyone at first! Think of it as offsets rather than positions. The first item is 0 steps away from the start, the second is 1 step away, and so on. It's weird, but you'll get used to it. Promise!

Adding and Removing Items

const fruits: string[] = ["apple", "banana"];

fruits.push("cherry");      // Add to the END
console.log(fruits);        // ["apple", "banana", "cherry"]

fruits.unshift("avocado");  // Add to the BEGINNING
console.log(fruits);        // ["avocado", "apple", "banana", "cherry"]

fruits.pop();               // Remove from the END
console.log(fruits);        // ["avocado", "apple", "banana"]

fruits.shift();             // Remove from the BEGINNING
console.log(fruits);        // ["apple", "banana"]

🧠 Memory Trick

Shift and Unshift work on the Start (both start with "sh-"). Push and Pop work on the end (both start with "p-"). Silly, but it works!

Finding Items

const numbers: number[] = [10, 20, 30, 40, 50];

console.log(numbers.indexOf(30));    // 2 (found at position 2)
console.log(numbers.indexOf(99));    // -1 (not found)
console.log(numbers.includes(20));   // true
console.log(numbers.includes(99));   // false

// Get a slice (subset)
const subset: number[] = numbers.slice(1, 4);  // Positions 1 to 3
console.log(subset);  // [20, 30, 40]

Tuples: Arrays with Fixed Structure

Sometimes you need an array where each position has a specific meaning — like a GPS coordinate (latitude, longitude) or a date (year, month, day). TypeScript calls these tuples.

// A coordinate: [latitude, longitude]
let coordinates: [number, number] = [40.7128, -74.0060];

// A person record: [name, age, isStudent]
let person: [string, number, boolean] = ["Alice", 25, true];

// Named tuples (more readable)
type RGB = [red: number, green: number, blue: number];
let purple: RGB = [128, 0, 128];

Readonly Arrays: Don't Touch!

const daysOfWeek: readonly string[] = [
    "Monday", "Tuesday", "Wednesday", "Thursday", 
    "Friday", "Saturday", "Sunday"
];

// daysOfWeek.push("Funday");  
// ❌ ERROR! Can't modify a readonly array

// daysOfWeek[0] = "Mon";
// ❌ ERROR! Can't change items either

🔒 The Museum Analogy

A readonly array is like a museum exhibit behind glass. You can look all you want, but you can't touch or change anything. Perfect for data that should never change, like days of the week or mathematical constants.

⚡Powerful Array Methods

Modern TypeScript encourages a functional style — describing WHAT you want rather than HOW to get it. These methods are like hiring specialists: each does one job perfectly.

forEach: "Do Something to Each Item"

const names: string[] = ["Alice", "Bob", "Charlie"];

names.forEach((name: string) => {
    console.log("Hello, " + name + "!");
});

// Output:
// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

map: "Transform Each Item"

const numbers: number[] = [1, 2, 3, 4, 5];

const doubled: number[] = numbers.map((num: number) => {
    return num * 2;
});

console.log(doubled);  // [2, 4, 6, 8, 10]

// Shorter version (when the logic is simple)
const tripled: number[] = numbers.map(num => num * 3);
console.log(tripled);  // [3, 6, 9, 12, 15]

🎨 The Factory Analogy

map is like an assembly line. Every item goes through the same machine and comes out transformed. The original items stay untouched — you get a brand new array!

filter: "Keep Only What Matches"

const scores: number[] = [65, 82, 45, 91, 73, 58, 88];

// Keep only passing scores (70 or above)
const passing: number[] = scores.filter((score: number) => {
    return score >= 70;
});

console.log(passing);  // [82, 91, 73, 88]

// Keep only even numbers
const even: number[] = scores.filter(score => score % 2 === 0);
console.log(even);  // [82, 58, 88]

reduce: "Combine Everything Into One"

const prices: number[] = [10, 20, 30, 40];

// Add them all up
const total: number = prices.reduce((sum: number, price: number) => {
    return sum + price;
}, 0);  // 0 is the starting value

console.log(total);  // 100

// Find the highest score
const scores: number[] = [65, 82, 91, 73, 88];
const highest: number = scores.reduce((max: number, score: number) => {
    return score > max ? score : max;
}, 0);

console.log(highest);  // 91

Chaining: The Pipeline Pattern

The real power comes from chaining methods together:

const students = [
    { name: "Alice", score: 85 },
    { name: "Bob", score: 62 },
    { name: "Charlie", score: 91 },
    { name: "Diana", score: 78 }
];

// Get names of students who passed, in uppercase
const passingNames: string[] = students
    .filter(student => student.score >= 70)     // Keep only passing
    .map(student => student.name.toUpperCase());  // Get uppercase names

console.log(passingNames);  // ["ALICE", "CHARLIE", "DIANA"]

🎮 Try It Yourself!

Given ["apple", "banana", "cherry", "date"], write a chain that:

Filters to keep only fruits with 6+ letters
Maps to uppercase
Reduces to a single comma-separated string

Expected result: "BANANA,CHERRY"

Sorting

// Sorting strings — works automatically
const fruits: string[] = ['Banana', 'Mango', 'Apple'];
fruits.sort();
console.log(fruits);  // ['Apple', 'Banana', 'Mango']

// Sorting numbers — NEEDS a helper!
const numbers: number[] = [12, 3, 19, 16, 14];

// Ascending (small to large)
numbers.sort((a: number, b: number) => a - b);
console.log(numbers);  // [3, 12, 14, 16, 19]

// Descending (large to small)
numbers.sort((a: number, b: number) => b - a);
console.log(numbers);  // [19, 16, 14, 12, 3]

⚠️ The Number Sort Trap

Without a comparator, JavaScript converts numbers to strings first! So [10, 2].sort() becomes ["10", "2"] alphabetically — which is wrong! Always provide a comparator for number sorting.

🔧Reusable Code: Functions

A function is a reusable recipe. You write it once, give it a name, and use it whenever you need that recipe. Functions are the building blocks of every program.

🍳 The Recipe Analogy

Think of a function as a recipe card. The parameters are the ingredients list (what you need to provide), the body is the cooking instructions (what happens inside), and the return value is the finished dish (what you get back).

Named Function

// Recipe: Add two numbers
function add(a: number, b: number): number {
    const result: number = a + b;
    return result;
}

// Using the recipe
const sum1: number = add(5, 3);   // 8
const sum2: number = add(10, 20); // 30

console.log(sum1);  // 8
console.log(sum2);  // 30

Arrow Functions: The Modern Way

// Short arrow function (one line, implicit return)
const multiply = (a: number, b: number): number => a * b;

// Multi-line arrow function (explicit return)
const calculateArea = (width: number, height: number): number => {
    const area: number = width * height;
    return area;
};

console.log(multiply(4, 5));        // 20
console.log(calculateArea(3, 4));   // 12

🤔 Arrow vs Regular Functions?

For beginners, the difference doesn't matter much. Arrow functions are shorter and have some advanced behaviors, but either works. Use whichever you find more readable. As you grow, you'll learn when one is better than the other.

Optional Parameters

// greeting has a default value
function greet(name: string, greeting: string = "Hello"): string {
    return greeting + ", " + name + "!";
}

console.log(greet("Alice"));           // "Hello, Alice!"
console.log(greet("Bob", "Hi"));       // "Hi, Bob!"
console.log(greet("Carol", "Goodbye")); // "Goodbye, Carol!"

Rest Parameters: Variable Arguments

// Accept ANY number of arguments
function sumAll(...numbers: number[]): number {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumAll(1, 2, 3));      // 6
console.log(sumAll(10, 20));      // 30
console.log(sumAll());             // 0
console.log(sumAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));  // 55

🧠 The ... Spread

The ... (spread operator) says "gather all remaining arguments into an array." It's like a vacuum cleaner that sucks up all the loose numbers and puts them in a neat list!

Function Overloads: Multiple Personalities

// Two ways to call this function:
function format(input: string): string;      // If given a string
function format(input: number): string;       // If given a number

// The actual implementation handles both
function format(input: string | number): string {
    if (typeof input === 'string') {
        return input.toUpperCase();
    }
    return input.toFixed(2);  // Format number with 2 decimals
}

console.log(format("hello"));  // "HELLO"
console.log(format(3.14159));  // "3.14"

🔭Where Variables Live: Scope

Scope determines where a variable is visible and usable. It's like the rooms in a house — a variable declared in the kitchen isn't automatically available in the bedroom.

🏠 The House Analogy

Imagine your code as a house:

var = A note on the fridge — visible from EVERY room (function scope)
let/const = A note in a specific room — only visible there (block scope)

Block scope is safer because you can't accidentally use a variable where it shouldn't be used!

Keyword	Where It Works	Can Redeclare?	Can Change?	Use It?
var	Entire function	Yes (dangerous!)	Yes	❌ Never
let	Inside {} block	No	Yes	✅ When needed
const	Inside {} block	No	No	✅ Default choice

const API_URL: string = "https://api.example.com";  // Never changes
let retryCount: number = 0;                          // Will change

retryCount++;  // ✅ Fine, we used let
// API_URL = "other";  // ❌ ERROR! const can't change

📝Working with Text: Strings

Strings are sequences of characters — text! TypeScript gives you powerful tools to manipulate them.

const message: string = "Hello, TypeScript!";

// How long is it?
console.log(message.length);        // 18

// Get a piece of it
console.log(message.slice(0, 5));   // "Hello"
console.log(message[7]);            // "T" (8th character)

// Split into parts
const words: string[] = message.split(" ");
console.log(words);  // ["Hello,", "TypeScript!"]

// Remove extra spaces
const messy: string = "  hello  ";
console.log(messery.trim());  // "hello"

// Find and replace
const greeting: string = "Hello world";
console.log(greeting.replace("world", "TypeScript"));  // "Hello TypeScript"

Template Literal Types: Type-Safe Strings

// Only allow specific button class names
type Size = 'sm' | 'md' | 'lg' | 'xl';
type Color = 'primary' | 'secondary' | 'danger';
type ButtonClass = `btn-${Size}-${Color}`;

const goodButton: ButtonClass = 'btn-md-primary';     // ✅
// const badButton: ButtonClass = 'btn-xs-purple';    
// ❌ ERROR! 'xs' and 'purple' aren't allowed

🎨 The Paint-by-Numbers Analogy

Template literal types are like paint-by-numbers kits. The outline is fixed (btn-), but you can only use the provided colors (Size and Color). Try to use a color not in the kit, and TypeScript says "That color isn't in the box!"

Converting Between Strings and Numbers

// String to number
const str: string = "42";
const num: number = parseInt(str, 10);  // Always use base 10!

console.log(num + 8);  // 50

// Number to string
const price: number = 99.99;
console.log(price.toString());   // "99.99"
console.log(price.toFixed(2));   // "99.99" (always 2 decimals)

// Safe parsing
function parseNumberSafe(value: string): number | null {
    const parsed: number = parseInt(value, 10);
    return isNaN(parsed) ? null : parsed;
}

console.log(parseNumberSafe("42"));   // 42
console.log(parseNumberSafe("abc"));  // null (not a crash!)

⚠️ The parseInt Trap

Always pass 10 as the second argument to parseInt! Without it, parseInt("08") might be interpreted as octal (base 8) in older environments, giving you 0 instead of 8. Weird but true!

📦Grouping Data: Objects

An object groups related data together. Think of it as a form with labeled fields — name, age, email, etc.

📋 The Form Analogy

An object is like a patient form at a doctor's office. It has labeled fields (name, age, symptoms) and you fill in each one. The form ensures you provide all required information and don't add random fields that don't belong.

Creating Typed Objects

// Define the shape first
interface Person {
    firstName: string;
    lastName: string;
    age?: number;        // Optional (might not be provided)
}

// Create an object matching that shape
const person: Person = {
    firstName: "Alice",
    lastName: "Johnson",
    age: 28
};

// Access properties
console.log(person.firstName);     // "Alice"
console.log(person["lastName"]);   // "Johnson" (alternative syntax)

// Update properties
person.firstName = "Alicia";

// Add optional property later
person.age = 29;

Methods in Objects

interface PersonWithGreeting {
    firstName: string;
    lastName: string;
    greet(): string;  // This object can greet people!
}

const friendlyPerson: PersonWithGreeting = {
    firstName: "Bob",
    lastName: "Smith",
    greet(): string {
        return "Hi, I'm " + this.firstName + " " + this.lastName + "!";
    }
};

console.log(friendlyPerson.greet());  // "Hi, I'm Bob Smith!"

Dynamic Properties

interface FlexiblePerson {
    name: string;
    [key: string]: unknown;  // Allows ANY extra properties
}

const person: FlexiblePerson = {
    name: "Charlie"
};

// Add properties dynamically
person.age = 25;
person.hobby = "painting";
person["favorite-color"] = "blue";

console.log(person);
// { name: "Charlie", age: 25, hobby: "painting", "favorite-color": "blue" }

Enterprise Pattern: Separate API from Domain

// What the API sends (snake_case, strings)
interface UserFromAPI {
    id: string;
    created_at: string;
    is_active: boolean;
}

// What our app uses (camelCase, proper types)
interface User {
    id: string;
    createdAt: Date;
    isActive: boolean;
}

// Bridge between them
function convertUser(apiUser: UserFromAPI): User {
    return {
        id: apiUser.id,
        createdAt: new Date(apiUser.created_at),
        isActive: apiUser.is_active
    };
}

🧠 Why Separate Them?

If the API changes (e.g., renames created_at to createdDate), you only update the convertUser function — not every place that uses User. Your app stays stable even when external services change!

🏗️Blueprints for Objects: Classes

A class is a blueprint for creating objects. It's like a cookie cutter — one shape, many cookies. Each cookie (object) is independent but follows the same pattern.

🏭 The Factory Analogy

A class is like a car factory blueprint. It defines what every car should have (engine, wheels, color) and what it can do (drive, honk, brake). But each car produced is a separate object with its own state — one might be red and fast, another blue and slow.

class Person {
    // Properties (what each person has)
    firstName: string;
    lastName: string;

    // Private property (hidden from outside)
    #ssn: string;

    // Constructor (how to create a new person)
    constructor(firstName: string, lastName: string, ssn: string) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.#ssn = ssn;
    }

    // Method (what a person can do)
    fullName(): string {
        return this.firstName + " " + this.lastName;
    }

    // Getter (access like a property)
    get location(): string {
        return "Earth";
    }
}

// Create instances (actual people)
const alice = new Person("Alice", "Smith", "123-45-6789");
const bob = new Person("Bob", "Jones", "987-65-4321");

console.log(alice.fullName());  // "Alice Smith"
console.log(bob.fullName());    // "Bob Jones"
console.log(alice.location);    // "Earth"

Shorter Syntax: Parameter Properties

// Instead of manually assigning each property...
class Employee {
    constructor(
        public readonly id: string,       // Can't change after creation
        public name: string,               // Public, can change
        private department: string,        // Hidden from outside
        protected salary: number           // Visible to subclasses
    ) {}

    getDepartment(): string {
        return this.department;  // Can access private inside the class
    }
}

const emp = new Employee("E001", "Alice", "Engineering", 75000);
console.log(emp.id);              // "E001"
console.log(emp.getDepartment());  // "Engineering"
// console.log(emp.department);    
// ❌ ERROR! Private property — can't access from outside

🎮 Try It Yourself!

Create a Book class with:

Properties: title (string), author (string), pages (number)
A method getSummary() that returns "Title by Author (X pages)"

Create two book instances and print their summaries!

🔒Controlling Access: Public, Private, Protected

Not everything should be visible to everyone. Access modifiers control who can see and touch what — like security clearance levels..

    private balance: number = 0;           // Only the account knows
    protected accountType: string = 'checking';  // Subclasses can see
    public readonly accountNumber: string;  // Everyone can see, can't change

    constructor(accountNumber: string, initialBalance: number = 0) {
        this.accountNumber = accountNumber;
        this.balance = initialBalance;
    }

    public deposit(amount: number): void {
        if (amount <= 0) {
            throw new Error("Deposit must be positive!");
        }
        this.balance += amount;
    }

    public withdraw(amount: number): boolean {
        if (amount > this.balance) {
            return false;  // Not enough money
        }
        this.balance -= amount;
        return true;
    }

    public getBalance(): number {
        return this.balance;
    }
}

const account = new BankAccount("ACC-123", 1000);
account.deposit(500);
console.log(account.getBalance());  // 1500

// console.log(account.balance);     
// ❌ ERROR! Private — can't peek inside!
// account.balance = 999999;        
// ❌ ERROR! Can't cheat the system!

🏦 The Bank Vault Analogy

A private property is like money in a bank vault. You can't just walk in and grab it — you must use the proper channels (methods like deposit and withdraw). This prevents accidental (or malicious) manipulation of sensitive data.

🧬Building on Blueprints: Inheritance

Inheritance lets a new class reuse and extend an existing class. It's like a child inheriting traits from a parent but developing their own personality too.

🐕 The Dog Family Analogy

All dogs share common traits (four legs, tail, bark). But a Golden Retriever has specific traits (friendly, golden fur) while a German Shepherd has others (protective, black and tan). Inheritance lets you define "Dog" once and then specialize for each breed.

// Parent class (the general blueprint)
class Animal {
    constructor(protected name: string) {}

    move(): void {
        console.log(this.name + " is moving");
    }

    makeSound(): string {
        return "Some generic sound";
    }
}

// Child class (specialized blueprint)
class Dog extends Animal {
    constructor(name: string, private breed: string) {
        super(name);  // Call parent's constructor
    }

    // Override parent's method
    override makeSound(): string {
        return "Woof! Woof!";
    }

    // New method only dogs have
    fetch(): string {
        return this.name + " fetched the ball!";
    }

    getBreed(): string {
        return this.breed;
    }
}

const genericAnimal = new Animal("Creature");
const myDog = new Dog("Buddy", "Golden Retriever");

genericAnimal.move();        // "Creature is moving"
console.log(genericAnimal.makeSound());  // "Some generic sound"

myDog.move();                // "Buddy is moving" (inherited!)
console.log(myDog.makeSound());  // "Woof! Woof!" (overridden!)
console.log(myDog.fetch());      // "Buddy fetched the ball!" (new!)
console.log(myDog.getBreed());   // "Golden Retriever"

Abstract Classes: Forcing Implementation

// Abstract = "You can't create me directly, only my children"
abstract class Shape {
    abstract getArea(): number;  // Every shape MUST implement this
    abstract getPerimeter(): number;

    describe(): string {
        return "I am a shape with area " + this.getArea();
    }
}

class Rectangle extends Shape {
    constructor(
        private width: number,
        private height: number
    ) {
        super();
    }

    override getArea(): number {
        return this.width * this.height;
    }

    override getPerimeter(): number {
        return 2 * (this.width + this.height);
    }
}

class Circle extends Shape {
    constructor(private radius: number) {
        super();
    }

    override getArea(): number {
        return Math.PI * this.radius * this.radius;
    }

    override getPerimeter(): number {
        return 2 * Math.PI * this.radius;
    }
}

const rect = new Rectangle(5, 3);
const circle = new Circle(4);

console.log(rect.getArea());     // 15
console.log(circle.getArea());   // ~50.27

// const shape = new Shape();  
// ❌ ERROR! Can't create abstract class directly

🧠 When to Use Abstract Classes

Use abstract classes when you want to provide a common foundation but force every child to implement specific methods. It's like saying: "Every employee must have a job title and a salary, but HOW they calculate their salary depends on their role."

🎓 You're in the home stretch! Advanced concepts ahead!

📦Organizing Code: Modules

As your programs grow, putting everything in one file becomes messy — like stuffing your entire wardrobe into a single drawer. Modules let you split code into separate files and share only what you want to share.

📚 The Library Analogy

Imagine a library where every book is a module. The math book exports formulas, the history book exports dates, and the science book exports experiments. Your main program is like a student who checks out only the books they need. No clutter, no confusion!

Exporting: Making Things Available

// === math-utils.ts ===

// Named export — specific, clear
export function add(a: number, b: number): number {
    return a + b;
}

export function multiply(a: number, b: number): number {
    return a * b;
}

export const PI: number = 3.14159;

// Default export — one per file, use sparingly
export default class Calculator {
    add(a: number, b: number): number { return a + b; }
}

Importing: Bringing Things In

// === main.ts ===

// Import specific things by name
import { add, multiply, PI } from './math-utils';

// Import with a nickname (alias)
import { add as sum } from './math-utils';

// Import the default export
import Calculator from './math-utils';

// Import types only (disappears at runtime)
import type { SomeType } from './math-utils';

// Use them!
console.log(add(2, 3));        // 5
console.log(multiply(4, 5));   // 20
console.log(PI);               // 3.14159

const calc = new Calculator();
console.log(calc.add(10, 20)); // 30

Barrel Exports: One Door for Everything

// === models/index.ts ===
// This file gathers exports from many files

export { User } from './User';
export { Product } from './Product';
export { Order } from './Order';
export type { UserData, ProductData } from './types';

// === main.ts ===
// Now import everything from one place!
import { User, Product, type UserData } from './models';

🧠 Best Practice

Prefer named exports over default exports. Named exports are easier to refactor (IDE can rename them everywhere), better for tree-shaking (removing unused code), and clearer about what you're importing. Default exports hide the name and make code harder to understand.

🔷Writing Flexible Code: Generics

Imagine you need a function that finds an item in a list. You could write one for users, one for products, one for orders... or you could write one generic function that works with ANY type. That's generics!

🔧 The Universal Wrench Analogy

A generic function is like an adjustable wrench. Instead of carrying 20 wrenches for different bolt sizes, you carry one that adapts to any size. The <T> is the adjustment mechanism — it changes based on what you need!

Generic Function

// T is a placeholder for ANY type
function findById(
    items: T[],
    id: string
): T | undefined {
    return items.find(item => item.id === id);
}

// Works with Users!
interface User {
    id: string;
    name: string;
}

const users: User[] = [
    { id: '1', name: 'Alice' },
    { id: '2', name: 'Bob' }
];

const user = findById(users, '1');
// TypeScript KNOWS this is User | undefined

// Works with Products too!
interface Product {
    id: string;
    price: number;
}

const products: Product[] = [
    { id: 'p1', price: 99 },
    { id: 'p2', price: 49 }
];

const product = findById(products, 'p1');
// TypeScript KNOWS this is Product | undefined

Generic Class: Reusable Storage

// A storage box that works with ANY type
class StorageBox {
    private items: TItem[] = [];

    add(item: TItem): void {
        this.items.push(item);
    }

    findById(id: string): TItem | undefined {
        return this.items.find(item => item.id === id);
    }

    getAll(): readonly TItem[] {
        return this.items;
    }
}

// Use with Users
const userBox = new StorageBox();
userBox.add({ id: '1', name: 'Alice' });

// Use with Products
const productBox = new StorageBox();
productBox.add({ id: 'p1', price: 99 });

// TypeScript prevents mixing them up!
// userBox.add({ id: 'p1', price: 99 });  
// ❌ ERROR! This box only accepts Users!

Multiple Generics

// Combine two objects into one
function merge(
    first: TFirst,
    second: TSecond
): TFirst & TSecond {
    return { ...first, ...second };
}

const person = { name: 'Alice' };
const details = { age: 30, city: 'NYC' };

const combined = merge(person, details);
// TypeScript knows combined has: name, age, AND city!

🎮 Try It Yourself!

Write a generic function getLast<T>(items: T[]): T | undefined that returns the last item in an array. Test it with both number[] and string[]!

🔗Combining Types: Unions & Intersections

Sometimes a value can be one of several types, or needs to combine multiple types. TypeScript has tools for both scenarios.

Union Types: "This OR That"

// A status can only be one of these three values
type Status = 'active' | 'inactive' | 'suspended';

let userStatus: Status = 'active';    // ✅
userStatus = 'inactive';               // ✅
// userStatus = 'deleted';             
// ❌ ERROR! 'deleted' is not allowed

// An ID can be a string OR a number
type ID = string | number;

let userId: ID = 101;      // ✅ Number is fine
userId = "user-101";       // ✅ String is fine too
// userId = true;          
// ❌ ERROR! Boolean is not allowed

Discriminated Unions: Tagged Objects

// Each object has a "kind" tag that tells us what it is
type Shape =
    | { kind: 'circle'; radius: number }
    | { kind: 'rectangle'; width: number; height: number }
    | { kind: 'square'; side: number };

function getArea(shape: Shape): number {
    switch (shape.kind) {
        case 'circle':
            return Math.PI * shape.radius * shape.radius;
        case 'rectangle':
            return shape.width * shape.height;
        case 'square':
            return shape.side * shape.side;
        default:
            // If we add a new Shape type, TypeScript
            // will ERROR here until we handle it!
            const _exhaustive: never = shape;
            return _exhaustive;
    }
}

const myCircle: Shape = { kind: 'circle', radius: 5 };
console.log(getArea(myCircle));  // ~78.54

🏷️ The Name Tag Analogy

A discriminated union is like a conference where everyone wears a name tag saying their role ("Speaker", "Attendee", "Staff"). Instead of guessing who someone is, you just read their tag. TypeScript does the same — it reads the kind tag and instantly knows what properties are available!

Intersection Types: "This AND That"

interface HasName {
    name: string;
}

interface HasAge {
    age: number;
}

// Person must have BOTH name AND age
type Person = HasName & HasAge;

const person: Person = {
    name: "Alice",
    age: 30
};

// Missing either property = ERROR!
// const badPerson: Person = { name: "Bob" };  
// ❌ ERROR! Missing 'age'

🛡️Proving Types at Runtime: Type Guards

TypeScript types exist only during development — they vanish when your code runs. But sometimes you need to prove what type something is while the program is running. Type guards are your proof!

🕵️ The Detective Analogy

A type guard is like a detective proving someone's identity. TypeScript says: "You claim this is a string? Show me your evidence!" Once you provide proof (like typeof x === 'string'), TypeScript believes you and lets you use string methods.

Built-in Type Guards

function process(value: string | number | boolean): string {
    // typeof guard
    if (typeof value === 'string') {
        return value.toUpperCase();  // ✅ TypeScript knows it's a string
    }

    // instanceof guard (for classes)
    if (value instanceof Date) {
        return value.toISOString();  // ✅ TypeScript knows it's a Date
    }

    // Must be number (only option left)
    return value.toFixed(2);
}

// instanceof with custom classes
class Cat {
    meow(): string { return 'Meow!'; }
}

class Dog {
    bark(): string { return 'Woof!'; }
}

function makeSound(animal: Cat | Dog): string {
    if (animal instanceof Cat) {
        return animal.meow();  // ✅ TypeScript knows it's a Cat
    }
    return animal.bark();      // ✅ TypeScript knows it's a Dog
}

Custom Type Predicate

interface Admin {
    role: 'admin';
    permissions: string[];
}

interface User {
    role: 'user';
    username: string;
}

type Account = Admin | User;

// Type predicate: "This account IS an Admin"
function isAdmin(account: Account): account is Admin {
    return account.role === 'admin';
}

function getPermissions(account: Account): string[] {
    if (isAdmin(account)) {
        return account.permissions;  // ✅ TypeScript trusts us!
    }
    return ['read-only'];  // Must be User
}

🧠 The Power of never

The never type means "this should be impossible to reach." If TypeScript complains that your never variable isn't actually never, it means you forgot to handle a case! It's like a safety alarm that goes off when you miss a step.

🛠️TypeScript's Built-in Tools: Utility Types

TypeScript comes with a toolbox of ready-made type transformations. Instead of rewriting types from scratch, you can modify existing ones!

interface User {
    id: string;
    name: string;
    email: string;
    age: number;
    password: string;  // Secret! Don't expose!
}

// Partial — all properties become optional
type UserUpdate = Partial;
// { id?: string; name?: string; email?: string; ... }
// Perfect for PATCH requests where you only send changed fields!

// Pick — keep only what you need
type UserPreview = Pick;
// { id: string; name: string }
// Perfect for list views where you don't need everything!

// Omit — remove what you don't want
type PublicUser = Omit;
// { id, name, email, age } — password safely removed!
// Perfect for API responses!

// Readonly — prevent changes
type ImmutableUser = Readonly;
// Can't modify any property after creation!

// Required — remove optionality
type RequiredUser = Required>;
// All properties must be provided!

// Record — create a dictionary
type UserMap = Record;
// { [key: string]: User }
// Perfect for lookups by ID!

🛠️ The Power Tool Analogy

Utility types are like power tools. Sure, you could saw wood by hand (Omit manually listing every property), but why would you when a circular saw (Omit<User, 'password'>) does it instantly and perfectly? Work smarter, not harder!

🚨Handling Mistakes: Error Handling

Programs will encounter problems — networks fail, files go missing, users type nonsense. Good error handling makes your program graceful instead of fragile.

Custom Error Classes

class ValidationError extends Error {
    constructor(
        message: string, 
        public field: string  // Extra info about what failed
    ) {
        super(message);
        this.name = 'ValidationError';
    }
}

class NotFoundError extends Error {
    constructor(
        public resource: string,
        public id: string
    ) {
        super(resource + " with id '" + id + "' not found");
        this.name = 'NotFoundError';
    }
}

// Usage
function validateAge(age: number): void {
    if (age < 0 || age > 150) {
        throw new ValidationError(
            "Age must be between 0 and 150", 
            "age"
        );
    }
}

try {
    validateAge(200);
} catch (error) {
    if (error instanceof ValidationError) {
        console.log("Field:", error.field);        // "age"
        console.log("Message:", error.message);    // "Age must be..."
    }
}

The Result Pattern: Predictable Failures

// Instead of throwing, return a result object
type Result =
    | { success: true; data: T }
    | { success: false; error: E };

function divide(a: number, b: number): Result {
    if (b === 0) {
        return {
            success: false,
            error: new ValidationError(
                "Cannot divide by zero", 
                "denominator"
            )
        };
    }
    return { success: true, data: a / b };
}

// Usage — no try/catch needed!
const result = divide(10, 0);

if (!result.success) {
    console.log("Oops:", result.error.message);
} else {
    console.log("Answer:", result.data);
}

📦 The Package Delivery Analogy

A Result type is like a package tracking system. Instead of wondering if your package arrived (and catching it if it didn't), you get a clear status: "Delivered successfully" or "Failed: address not found." No surprises, no lost packages!

✅Trust But Verify: Runtime Validation with Zod

Here's a crucial truth: TypeScript types disappear when your code runs. They check your code during development, but at runtime, they're gone. So how do you validate data from APIs, forms, or files?

🛡️ The Border Control Analogy

TypeScript is like a pre-flight security check — it makes sure your luggage is packed correctly before you leave. But Zod is like border control at your destination — it checks AGAIN that everything is valid when you arrive. Both are necessary for safety!

Installing Zod

npm install zod

Defining a Schema

import { z } from 'zod';

// Define what a valid user looks like
const UserSchema = z.object({
    id: z.string().uuid(),           // Must be a valid UUID
    email: z.string().email(),        // Must look like an email
    name: z.string().min(1).max(100), // 1-100 characters
    age: z.number().int().min(0).max(150).optional(),
    isActive: z.boolean().default(true)  // Defaults to true
});

// Derive TypeScript type AUTOMATICALLY from the schema!
type User = z.infer;
// TypeScript now knows User has: id, email, name, age?, isActive

Validating Data

// parse() — validates and returns typed data
// Throws an error if data is invalid
function parseUser(data: unknown): User {
    return UserSchema.parse(data);
}

// safeParse() — returns result without throwing
function safeParseUser(data: unknown) {
    const result = UserSchema.safeParse(data);

    if (!result.success) {
        console.log("Validation failed:");
        result.error.errors.forEach(err => {
            console.log("- " + err.path + ": " + err.message);
        });
        return null;
    }

    return result.data;  // Validated and typed!
}

// Test it
const rawData = {
    id: '550e8400-e29b-41d4-a716-446655440000',
    email: 'john@example.com',
    name: 'John Doe',
    age: 30
};

const user = parseUser(rawData);
console.log(user.email);  // 'john@example.com' — TypeScript knows it's a string!

// Bad data gets caught!
const badData = {
    id: 'not-a-uuid',
    email: 'not-an-email',
    name: ''  // Too short!
};

// parseUser(badData);  
// ❌ Throws error with DETAILED messages about what's wrong!

🧠 Why Zod + TypeScript Is Powerful

Change your Zod schema, and your TypeScript types update automatically. One source of truth, zero drift between validation and types. When the API changes, update the Zod schema — TypeScript will immediately show you every place that needs updating!

🎭Real-World Example: Testing with Playwright

Let's put everything together with a practical example: writing type-safe browser tests using Playwright, a popular testing framework.

🎭 The Stage Analogy

Playwright is like a theater director. It opens a browser (the stage), navigates to a website (sets the scene), interacts with elements (directs the actors), and checks that everything looks right (reviews the performance). TypeScript makes sure your directions make sense before the show starts!

Typed Page Object Model

import { test, expect, type Page, type Locator } from '@playwright/test';

// A Page Object represents one page of your app
class LoginPage {
    // Locators — "pointers" to elements on the page
    readonly usernameInput: Locator;
    readonly passwordInput: Locator;
    readonly submitButton: Locator;
    readonly errorMessage: Locator;

    constructor(private page: Page) {
        // Find elements by test IDs (best practice!)
        this.usernameInput = page.locator('[data-testid="username"]');
        this.passwordInput = page.locator('[data-testid="password"]');
        this.submitButton = page.locator('[data-testid="login-button"]');
        this.errorMessage = page.locator('[data-testid="error-message"]');
    }

    // Actions — what a user can do
    async goto(): Promise {
        await this.page.goto('/login');
    }

    async login(username: string, password: string): Promise {
        await this.usernameInput.fill(username);
        await this.passwordInput.fill(password);
        await this.submitButton.click();
    }

    // Queries — checking the state
    async getErrorMessage(): Promise {
        return this.errorMessage.textContent();
    }
}

Typed Test Data

// Discriminated union for test scenarios
interface ValidLogin {
    kind: 'valid';
    username: string;
    password: string;
    expectedUrl: string;
}

interface InvalidLogin {
    kind: 'invalid';
    username: string;
    password: string;
    expectedError: string;
}

type LoginScenario = ValidLogin | InvalidLogin;

Writing Tests

test.describe('Login Flow', () => {
    test('successful login redirects to dashboard', async ({ page }) => {
        const loginPage = new LoginPage(page);

        const scenario: ValidLogin = {
            kind: 'valid',
            username: 'admin',
            password: 'secret123',
            expectedUrl: '/dashboard'
        };

        await loginPage.goto();
        await loginPage.login(scenario.username, scenario.password);

        // Assert: we landed on the right page
        await expect(page).toHaveURL(scenario.expectedUrl);
    });

    test('invalid login shows error message', async ({ page }) => {
        const loginPage = new LoginPage(page);

        const scenario: InvalidLogin = {
            kind: 'invalid',
            username: 'hacker',
            password: 'wrong',
            expectedError: 'Invalid credentials'
        };

        await loginPage.goto();
        await loginPage.login(scenario.username, scenario.password);

        const error = await loginPage.getErrorMessage();
        expect(error).toContain(scenario.expectedError);
    });
});

Generic API Helper

// Reusable helper for API calls
async function apiRequest(
    page: Page,
    url: string,
    options?: { 
        method?: 'GET' | 'POST' | 'PUT' | 'DELETE'; 
        body?: unknown 
    }
): Promise {
    const response = await page.request.fetch(url, {
        method: options?.method ?? 'GET',
        data: options?.body
    });

    if (!response.ok()) {
        throw new Error('API failed: ' + response.status());
    }

    return response.json() as Promise;
}

// Usage: TypeScript knows the shape of User!
const user = await apiRequest(page, '/api/users/1');
console.log(user.name);  // TypeScript knows .name exists!

🎮 Try It Yourself!

Install Playwright and create a test for your favorite website:

npm init playwright@latest

Then write a test that navigates to the site, clicks a button, and checks that something changed on the page!

📋What You've Learned

Let's look at how far you've come. You started with zero knowledge and now understand concepts that professional developers use daily!

Concept	What It Does	Why It Matters
strict mode	Catches bugs before running	Saves hours of debugging
Types	Describes data shapes	Prevents wrong data from spreading
interface	Defines object structure	Living documentation
Generics	Reusable type-safe code	Write once, use everywhere
Unions	"This OR that" types	Models real-world flexibility
Type Guards	Proves types at runtime	Safety when types disappear
Utility Types	Transform existing types	Less code, more safety
Zod	Validates runtime data	Catches API changes instantly

🎓Your Next Steps

You've just completed a journey that many developers take months to travel. Here's what you should do next:

🚀 Action Plan

Build something real. Convert a simple JavaScript project to TypeScript. Feel the difference!
Enable strict mode. In your tsconfig.json, set "strict": true. Embrace the errors — they teach you!
Practice generics. Write a findById function that works with any object that has an id.
Try Zod. Validate data from a public API. Watch it catch malformed responses!
Join the community. Follow TypeScript on Twitter, join Discord servers, and ask questions!

💭 Final Thought

TypeScript isn't about adding complexity — it's about removing fear. Fear of breaking something when you refactor. Fear of passing the wrong data. Fear of the codebase growing unmanageable. With TypeScript, you code with confidence.

Every expert was once a beginner who refused to give up. Keep building, keep breaking things (safely!), and keep learning. You've got this! 💪

🎉 Congratulations, TypeScript Developer!

You now have the foundation to write professional, type-safe code. The best way to learn is by doing — so open your editor and start building!

Questions? Stuck on something?

Drop a comment below — I read every single one and love helping fellow learners!

Happy coding! 🚀

Last updated: May 2026 | TypeScript 5.6+

Found this helpful? Share it with a friend who's learning to code! 🤝

Instruction to mcp

2026-04-25T18:40:00.007+05:30

Now please create a TestNG test for the Salesforce end-to-end Login + Create Account flow using 2 Page Object classes only:

LoginPage.java
AccountPage.java

Website:

Your Salesforce Login URL

Test name:

SalesforceCreateAccountTest

Please follow this user journey in the test:

1. Open the Salesforce login page

2. Login using `LoginPage.java`

Use:

Username: your_username
Password: your_password

3. Verify that Salesforce Home page is displayed

4. Navigate to Accounts using `AccountPage.java`

Open App Launcher (if needed)
Click Accounts

5. Wait for Accounts page to load properly

6. Click New button

7. Enter Account details:

Account Name: Test Account Automation
Phone: 9876543210
Website: https://example.com
Type: Customer - Direct
Industry: Technology

8. Click Save

9. Verify Account is created successfully

10. Verify Account Name appears on record page

Required Page Classes

`LoginPage.java`

Include methods:

openLoginPage()
enterUsername(String username)
enterPassword(String password)
clickLogin()
login(String username, String password)
isHomePageDisplayed()

`AccountPage.java`

Include methods:

openAccountsTab()
waitForAccountsPage()
clickNewAccount()
enterAccountName(String name)
enterPhone(String phone)
enterWebsite(String website)
selectType(String type)
selectIndustry(String industry)
clickSave()
isAccountCreated()
isAccountNameDisplayed(String name)

Rules:

Use only Page Object methods in test class
No direct WebDriver code inside test
Use TestNG assertions
Keep code simple and readable
Do not use Thread.sleep()
Use WebDriverWait / ExpectedConditions
Compatible with Angie Jones Selenium MCP style
Apply changes directly to project

Final Instruction:

Do not execute. Just create:

LoginPage.java
AccountPage.java
SalesforceCreateAccountTest.java

and wait for further instructions.

Selenium POM framework

2025-12-10T14:36:00.002+05:30

Production-Ready Selenium POM Framework with ExtentReports

Production-Ready Selenium POM Framework (Java + TestNG + ExtentReports)

This article provides a ready-to-use, production-grade Selenium Page Object Model (POM) framework you can drop straight into a Java project.

The stack includes:

Java 17 + Maven
Selenium 4 + WebDriverManager
TestNG (parallel-ready)
ExtentReports 5 (Spark) with screenshots on failure
Log4j2 logging
Multi-environment config (dev / qa / prod)
Centralized locator repository (ElementRepository)
Thread-safe WebDriver and thread-safe Extent tests

You can copy this HTML into the Blogspot HTML editor and it will render nicely with a clean, pure white background.

1. Project Structure

Recommended Maven project layout:

pom.xml

src
 ├─ main
 │   └─ java
 │       └─ com.automationcodes.automation
 │           ├─ config
 │           │   ├─ ConfigManager.java
 │           │   └─ Environment.java
 │           ├─ core
 │           │   ├─ DriverFactory.java
 │           │   ├─ DriverManager.java
 │           │   ├─ WaitUtils.java
 │           │   └─ TestContext.java
 │           ├─ locators
 │           │   └─ ElementRepository.java
 │           ├─ pages
 │           │   ├─ BasePage.java
 │           │   ├─ LoginPage.java
 │           │   └─ HomePage.java
 │           └─ utils
 │               ├─ LoggerUtil.java
 │               └─ ScreenshotUtil.java
 └─ test
     ├─ java
     │   └─ com.automationcodes.automation.tests
     │       ├─ base
     │       │   └─ BaseTest.java
     │       ├─ listeners
     │       │   └─ TestListener.java
     │       ├─ reporting
     │       │   ├─ ExtentManager.java
     │       │   └─ ExtentTestManager.java
     │       └─ login
     │           └─ LoginTests.java
     └─ resources
         ├─ config
         │   ├─ config-dev.properties
         │   ├─ config-qa.properties
         │   └─ config-prod.properties
         ├─ log4j2.xml
         └─ testng.xml

You can change the base package com.automationcodes.automation if needed—just update package declarations consistently.

2. Maven `pom.xml`

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
         http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>com.automationcodes</groupId>
    <artifactId>ui-automation</artifactId>
    <version>1.0.0</version>
    <name>UI Automation Framework</name>
    <packaging>jar</packaging>

    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        <selenium.version>4.24.0</selenium.version>
        <testng.version>7.10.2</testng.version>
        <log4j2.version>2.23.1</log4j2.version>
        <webdrivermanager.version>5.9.2</webdrivermanager.version>
        <extentreports.version>5.1.1</extentreports.version>
        <surefire.version>3.2.5</surefire.version>
    </properties>

    <dependencies>
        <!-- Selenium -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>${selenium.version}</version>
        </dependency>

        <!-- WebDriverManager -->
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>${webdrivermanager.version}</version>
        </dependency>

        <!-- TestNG -->
        <dependency>
            <groupId>org.testng</groupId>
            <artifactId>testng</artifactId>
            <version>${testng.version}</version>
            <scope>test</scope>
        </dependency>

        <!-- Log4j2 -->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-api</artifactId>
            <version>${log4j2.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-core</artifactId>
            <version>${log4j2.version}</version>
        </dependency>

        <!-- ExtentReports -->
        <dependency>
            <groupId>com.aventstack</groupId>
            <artifactId>extentreports</artifactId>
            <version>${extentreports.version}</version>
        </dependency>

        <!-- Allure (optional) -->
        <dependency>
            <groupId>io.qameta.allure</groupId>
            <artifactId>allure-testng</artifactId>
            <version>2.27.0</version>
        </dependency>

        <!-- Commons IO -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.16.1</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- Compiler -->
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.13.0</version>
                <configuration>
                    <source>${maven.compiler.source}</source>
                    <target>${maven.compiler.target}</target>
                </configuration>
            </plugin>

            <!-- Surefire for TestNG -->
            <plugin>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>${surefire.version}</version>
                <configuration>
                    <includes>
                        <include>**/*Test.java</include>
                        <include>**/*Tests.java</include>
                    </includes>
                    <suiteXmlFiles>
                        <suiteXmlFile>src/test/resources/testng.xml</suiteXmlFile>
                    </suiteXmlFiles>
                    <systemProperties>
                        <property>
                            <name>env</name>
                            <value>${env}</value>
                        </property>
                    </systemProperties>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <profiles>
        <profile>
            <id>dev</id>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
            <properties>
                <env>dev</env>
            </properties>
        </profile>
        <profile>
            <id>qa</id>
            <properties>
                <env>qa</env>
            </properties>
        </profile>
        <profile>
            <id>prod</id>
            <properties>
                <env>prod</env>
            </properties>
        </profile>
    </profiles>
</project>

3. Environment & Configuration

3.1 `Environment.java`

package com.automationcodes.automation.config;

public enum Environment {
    DEV("config-dev.properties"),
    QA("config-qa.properties"),
    PROD("config-prod.properties");

    private final String fileName;

    Environment(String fileName) {
        this.fileName = fileName;
    }

    public String getFileName() {
        return fileName;
    }

    public static Environment fromString(String env) {
        if (env == null) return DEV;
        switch (env.toLowerCase()) {
            case "qa":
                return QA;
            case "prod":
                return PROD;
            case "dev":
            default:
                return DEV;
        }
    }
}

3.2 `ConfigManager.java`

package com.automationcodes.automation.config;

import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

public class ConfigManager {

    private static Properties properties;
    private static final Object lock = new Object();

    private ConfigManager() {}

    public static Properties getProperties() {
        if (properties == null) {
            synchronized (lock) {
                if (properties == null) {
                    loadProperties();
                }
            }
        }
        return properties;
    }

    private static void loadProperties() {
        String envParam = System.getProperty("env", "dev");
        Environment environment = Environment.fromString(envParam);

        properties = new Properties();
        String path = "config/" + environment.getFileName();

        try (InputStream inputStream =
                     ConfigManager.class.getClassLoader().getResourceAsStream(path)) {
            if (inputStream == null) {
                throw new RuntimeException("Config file not found: " + path);
            }
            properties.load(inputStream);
        } catch (IOException e) {
            throw new RuntimeException("Failed to load config file: " + path, e);
        }
    }

    public static String get(String key) {
        return getProperties().getProperty(key);
    }

    public static String get(String key, String defaultValue) {
        return getProperties().getProperty(key, defaultValue);
    }

    public static int getInt(String key, int defaultValue) {
        String value = get(key);
        if (value == null) return defaultValue;
        return Integer.parseInt(value.trim());
    }

    public static boolean getBoolean(String key, boolean defaultValue) {
        String value = get(key);
        if (value == null) return defaultValue;
        return Boolean.parseBoolean(value.trim());
    }
}

3.3 Sample config file

src/test/resources/config/config-dev.properties:

base.url=https://the-internet.herokuapp.com
browser=chrome
implicit.wait.seconds=0
explicit.wait.seconds=15
page.load.timeout.seconds=30
run.headless=false
screenshots.on.failure=true

4. Core WebDriver Layer

4.1 `DriverManager.java`

package com.automationcodes.automation.core;

import org.openqa.selenium.WebDriver;

public class DriverManager {

    private static final ThreadLocal<WebDriver> DRIVER = new ThreadLocal<>();

    private DriverManager() {}

    public static WebDriver getDriver() {
        return DRIVER.get();
    }

    public static void setDriver(WebDriver driver) {
        DRIVER.set(driver);
    }

    public static void unload() {
        WebDriver driver = DRIVER.get();
        if (driver != null) {
            driver.quit();
            DRIVER.remove();
        }
    }
}

4.2 `DriverFactory.java`

package com.automationcodes.automation.core;

import com.automationcodes.automation.config.ConfigManager;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.PageLoadStrategy;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.edge.EdgeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxOptions;

import java.time.Duration;

public class DriverFactory {

    private DriverFactory() {}

    public static WebDriver createInstance() {
        String browser = ConfigManager.get("browser", "chrome").toLowerCase();
        boolean headless = ConfigManager.getBoolean("run.headless", false);

        WebDriver driver;

        switch (browser) {
            case "firefox":
                WebDriverManager.firefoxdriver().setup();
                FirefoxOptions ffOptions = new FirefoxOptions();
                ffOptions.setHeadless(headless);
                driver = new FirefoxDriver(ffOptions);
                break;

            case "edge":
                WebDriverManager.edgedriver().setup();
                driver = new EdgeDriver();
                break;

            case "chrome":
            default:
                WebDriverManager.chromedriver().setup();
                ChromeOptions options = new ChromeOptions();
                options.setPageLoadStrategy(PageLoadStrategy.NORMAL);
                if (headless) {
                    options.addArguments("--headless=new");
                    options.addArguments("--window-size=1920,1080");
                } else {
                    options.addArguments("--start-maximized");
                }
                options.addArguments("--disable-infobars");
                options.addArguments("--disable-gpu");
                options.addArguments("--no-sandbox");
                driver = new ChromeDriver(options);
                break;
        }

        int pageLoadTimeout = ConfigManager.getInt("page.load.timeout.seconds", 30);
        int implicitWait = ConfigManager.getInt("implicit.wait.seconds", 0);

        driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(pageLoadTimeout));
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(implicitWait));

        return driver;
    }
}

4.3 `WaitUtils.java`

package com.automationcodes.automation.core;

import com.automationcodes.automation.config.ConfigManager;
import org.openqa.selenium.*;
import org.openqa.selenium.support.ui.ExpectedCondition;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.time.Duration;

public class WaitUtils {

    private WaitUtils() {}

    private static WebDriverWait getWait() {
        int timeout = ConfigManager.getInt("explicit.wait.seconds", 15);
        return new WebDriverWait(DriverManager.getDriver(), Duration.ofSeconds(timeout));
    }

    public static WebElement waitForVisible(By locator) {
        return getWait().until(driver -> {
            try {
                WebElement element = driver.findElement(locator);
                return element.isDisplayed() ? element : null;
            } catch (NoSuchElementException | StaleElementReferenceException e) {
                return null;
            }
        });
    }

    public static boolean waitForInvisibility(By locator) {
        return getWait().until(driver -> {
            try {
                WebElement element = driver.findElement(locator);
                return !element.isDisplayed();
            } catch (NoSuchElementException e) {
                return true;
            }
        });
    }

    public static void waitForPageLoadComplete() {
        ExpectedCondition<Boolean> expectation = driver ->
                ((JavascriptExecutor) driver).executeScript("return document.readyState")
                        .equals("complete");

        getWait().until(expectation);
    }
}

4.4 `TestContext.java`

package com.automationcodes.automation.core;

import java.util.HashMap;
import java.util.Map;

public class TestContext {

    private static final ThreadLocal<Map<String, Object>> CONTEXT =
            ThreadLocal.withInitial(HashMap::new);

    private TestContext() {}

    public static void set(String key, Object value) {
        CONTEXT.get().put(key, value);
    }

    @SuppressWarnings("unchecked")
    public static <T> T get(String key) {
        return (T) CONTEXT.get().get(key);
    }

    public static void clear() {
        CONTEXT.get().clear();
    }
}

5. Utilities: Logging & Screenshots

5.1 `LoggerUtil.java`

package com.automationcodes.automation.utils;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;

public class LoggerUtil {

    private LoggerUtil() {}

    public static Logger getLogger(Class<?> clazz) {
        return LogManager.getLogger(clazz);
    }
}

5.2 `ScreenshotUtil.java`

package com.automationcodes.automation.utils;

import com.automationcodes.automation.core.DriverManager;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;

import java.io.File;
import java.io.IOException;
import java.nio.file.Paths;
import java.text.SimpleDateFormat;
import java.util.Date;

public class ScreenshotUtil {

    private static final String SCREENSHOT_DIR = "target/screenshots";

    private ScreenshotUtil() {}

    public static String takeScreenshot(String namePrefix) {
        File srcFile = ((TakesScreenshot) DriverManager.getDriver())
                .getScreenshotAs(OutputType.FILE);

        String timestamp = new SimpleDateFormat("yyyyMMdd_HHmmss_SSS").format(new Date());
        String fileName = namePrefix + "_" + timestamp + ".png";

        File destFile = Paths.get(SCREENSHOT_DIR, fileName).toFile();
        destFile.getParentFile().mkdirs();

        try {
            FileUtils.copyFile(srcFile, destFile);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return destFile.getAbsolutePath();
    }
}

5.3 `log4j2.xml`

<?xml version="1.0" encoding="UTF-8"?>
<Configuration status="WARN">
    <Appenders>
        <Console name="Console" target="SYSTEM_OUT">
            <PatternLayout pattern="%d{HH:mm:ss.SSS} %-5level [%t] %c{1} - %msg%n"/>
        </Console>
        <RollingFile name="File" fileName="target/logs/framework.log"
                     filePattern="target/logs/framework-%d{yyyy-MM-dd}-%i.log.gz">
            <PatternLayout>
                <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} %-5level [%t] %c - %msg%n</pattern>
            </PatternLayout>
            <Policies>
                <SizeBasedTriggeringPolicy size="10MB"/>
            </Policies>
        </RollingFile>
    </Appenders>

    <Loggers>
        <Root level="info">
            <AppenderRef ref="Console"/>
            <AppenderRef ref="File"/>
        </Root>
    </Loggers>
</Configuration>

6. Centralized Element Locators

ElementRepository groups locators by page.

package com.automationcodes.automation.locators;

import org.openqa.selenium.By;

public final class ElementRepository {

    private ElementRepository() {}

    public static final class LoginPage {
        private LoginPage() {}
        public static final By USERNAME_FIELD = By.id("username");
        public static final By PASSWORD_FIELD = By.id("password");
        public static final By LOGIN_BUTTON   = By.cssSelector("button[type='submit']");
        public static final By ERROR_MESSAGE  = By.id("flash");
    }

    public static final class HomePage {
        private HomePage() {}
        public static final By FLASH_MESSAGE = By.id("flash");
    }

    // Add more nested classes for other pages/components
}

7. Page Objects

7.1 `BasePage.java`

package com.automationcodes.automation.pages;

import com.automationcodes.automation.config.ConfigManager;
import com.automationcodes.automation.core.DriverManager;
import com.automationcodes.automation.core.WaitUtils;
import com.automationcodes.automation.utils.LoggerUtil;
import org.apache.logging.log4j.Logger;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;

public abstract class BasePage {

    protected WebDriver driver;
    protected Logger log;
    protected String baseUrl;

    protected BasePage() {
        this.driver = DriverManager.getDriver();
        this.log = LoggerUtil.getLogger(this.getClass());
        this.baseUrl = ConfigManager.get("base.url");
    }

    protected void openRelativeUrl(String relativePath) {
        String url = baseUrl + (relativePath.startsWith("/") ? relativePath : "/" + relativePath);
        log.info("Navigating to: {}", url);
        driver.get(url);
        WaitUtils.waitForPageLoadComplete();
    }

    protected WebElement find(By locator) {
        return driver.findElement(locator);
    }

    protected WebElement findVisible(By locator) {
        return WaitUtils.waitForVisible(locator);
    }

    protected void click(By locator) {
        WebElement element = findVisible(locator);
        element.click();
        log.debug("Clicked element: {}", locator);
    }

    protected void type(By locator, String text) {
        WebElement element = findVisible(locator);
        element.clear();
        element.sendKeys(text);
        log.debug("Typed '{}' into element: {}", text, locator);
    }

    protected String getText(By locator) {
        String text = findVisible(locator).getText();
        log.debug("Got text '{}' from element: {}", text, locator);
        return text;
    }

    protected boolean isDisplayed(By locator) {
        try {
            return findVisible(locator).isDisplayed();
        } catch (Exception e) {
            return false;
        }
    }

    public String getTitle() {
        return driver.getTitle();
    }

    public String getCurrentUrl() {
        return driver.getCurrentUrl();
    }
}

7.2 `LoginPage.java`

package com.automationcodes.automation.pages;

import com.automationcodes.automation.locators.ElementRepository.LoginPage;

public class LoginPage extends BasePage {

    public LoginPage open() {
        log.info("Opening Login Page");
        openRelativeUrl("/login");
        return this;
    }

    public LoginPage typeUsername(String username) {
        type(LoginPage.USERNAME_FIELD, username);
        return this;
    }

    public LoginPage typePassword(String password) {
        type(LoginPage.PASSWORD_FIELD, password);
        return this;
    }

    public HomePage clickLoginSuccess() {
        click(LoginPage.LOGIN_BUTTON);
        log.info("Clicked login button (success expected)");
        return new HomePage();
    }

    public LoginPage clickLoginExpectingFailure() {
        click(LoginPage.LOGIN_BUTTON);
        log.info("Clicked login button (failure expected)");
        return this;
    }

    public String getErrorMessage() {
        return getText(LoginPage.ERROR_MESSAGE);
    }
}

7.3 `HomePage.java`

package com.automationcodes.automation.pages;

import com.automationcodes.automation.locators.ElementRepository.HomePage;

public class HomePage extends BasePage {

    public String getFlashMessage() {
        return getText(HomePage.FLASH_MESSAGE);
    }
}

8. ExtentReports Integration

8.1 `ExtentManager.java`

package com.automationcodes.automation.tests.reporting;

import com.aventstack.extentreports.ExtentReports;
import com.aventstack.extentreports.reporter.ExtentSparkReporter;

import java.nio.file.Paths;
import java.text.SimpleDateFormat;
import java.util.Date;

public class ExtentManager {

    private static ExtentReports extent;

    private ExtentManager() {}

    public synchronized static ExtentReports getInstance() {
        if (extent == null) {
            extent = createInstance();
        }
        return extent;
    }

    private static ExtentReports createInstance() {
        String timestamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
        String reportPath = Paths.get("target", "reports", "ExtentReport_" + timestamp + ".html").toString();

        ExtentSparkReporter spark = new ExtentSparkReporter(reportPath);
        spark.config().setDocumentTitle("UI Automation Report");
        spark.config().setReportName("UI Regression Suite");

        ExtentReports ER = new ExtentReports();
        ER.attachReporter(spark);

        ER.setSystemInfo("Environment", System.getProperty("env", "dev"));
        ER.setSystemInfo("OS", System.getProperty("os.name"));
        ER.setSystemInfo("Java Version", System.getProperty("java.version"));

        return ER;
    }
}

8.2 `ExtentTestManager.java`

package com.automationcodes.automation.tests.reporting;

import com.aventstack.extentreports.ExtentTest;

import java.util.HashMap;
import java.util.Map;

public class ExtentTestManager {

    private static final Map<Long, ExtentTest> TEST_MAP = new HashMap<>();

    private ExtentTestManager() {}

    public static synchronized ExtentTest getTest() {
        return TEST_MAP.get(Thread.currentThread().getId());
    }

    public static synchronized void setTest(ExtentTest test) {
        TEST_MAP.put(Thread.currentThread().getId(), test);
    }

    public static synchronized void removeTest() {
        TEST_MAP.remove(Thread.currentThread().getId());
    }
}

9. TestNG Listener (Extent + Screenshots + Allure)

package com.automationcodes.automation.tests.listeners;

import com.aventstack.extentreports.ExtentReports;
import com.aventstack.extentreports.Status;
import com.automationcodes.automation.config.ConfigManager;
import com.automationcodes.automation.core.DriverManager;
import com.automationcodes.automation.tests.reporting.ExtentManager;
import com.automationcodes.automation.tests.reporting.ExtentTestManager;
import com.automationcodes.automation.utils.LoggerUtil;
import com.automationcodes.automation.utils.ScreenshotUtil;
import io.qameta.allure.Attachment;
import org.apache.logging.log4j.Logger;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.testng.*;

public class TestListener implements ITestListener, ISuiteListener {

    private final Logger log = LoggerUtil.getLogger(this.getClass());
    private ExtentReports extent;

    @Override
    public void onStart(ISuite suite) {
        log.info("Initializing ExtentReports for suite: {}", suite.getName());
        extent = ExtentManager.getInstance();
    }

    @Override
    public void onFinish(ISuite suite) {
        log.info("Flushing ExtentReports for suite: {}", suite.getName());
        if (extent != null) {
            extent.flush();
        }
    }

    @Override
    public void onTestStart(ITestResult result) {
        String className = result.getTestClass().getName();
        String methodName = result.getMethod().getMethodName();
        String desc = result.getMethod().getDescription();

        String displayName = className + "." + methodName;
        if (desc != null && !desc.isEmpty()) {
            displayName += " - " + desc;
        }

        log.info("Starting test: {}", displayName);
        ExtentTestManager.setTest(extent.createTest(displayName));
        ExtentTestManager.getTest().log(Status.INFO, "Test started");
    }

    @Override
    public void onTestSuccess(ITestResult result) {
        log.info("Test PASSED: {}.{}", result.getTestClass().getName(), result.getName());
        if (ExtentTestManager.getTest() != null) {
            ExtentTestManager.getTest().log(Status.PASS, "Test passed");
        }
        ExtentTestManager.removeTest();
    }

    @Override
    public void onTestFailure(ITestResult result) {
        String testName = result.getTestClass().getName() + "." + result.getName();
        log.error("Test FAILED: {}", testName, result.getThrowable());

        boolean capture = ConfigManager.getBoolean("screenshots.on.failure", true);
        String screenshotPath = null;

        if (capture && DriverManager.getDriver() != null) {
            screenshotPath = ScreenshotUtil.takeScreenshot(result.getName());
            log.info("Screenshot saved to {}", screenshotPath);
            saveFailureScreenshotToAllure();
        }

        if (ExtentTestManager.getTest() != null) {
            ExtentTestManager.getTest().log(Status.FAIL,
                    "Test failed: " + result.getThrowable().getMessage());
            if (screenshotPath != null) {
                try {
                    ExtentTestManager.getTest()
                            .addScreenCaptureFromPath(screenshotPath, "Failure Screenshot");
                } catch (Exception e) {
                    log.warn("Unable to attach screenshot to Extent: {}", e.getMessage());
                }
            }
        }

        ExtentTestManager.removeTest();
    }

    @Override
    public void onTestSkipped(ITestResult result) {
        log.warn("Test SKIPPED: {}.{}", result.getTestClass().getName(), result.getName());
        if (ExtentTestManager.getTest() != null) {
            ExtentTestManager.getTest().log(Status.SKIP,
                    "Test skipped: " +
                            (result.getThrowable() != null ? result.getThrowable().getMessage() : ""));
        }
        ExtentTestManager.removeTest();
    }

    @Override public void onTestFailedButWithinSuccessPercentage(ITestResult result) {}
    @Override public void onStart(ITestContext context) { log.info("Starting context: {}", context.getName()); }
    @Override public void onFinish(ITestContext context) { log.info("Finishing context: {}", context.getName()); }

    @Attachment(value = "Failure Screenshot", type = "image/png")
    public byte[] saveFailureScreenshotToAllure() {
        if (DriverManager.getDriver() == null) return new byte[0];
        return ((TakesScreenshot) DriverManager.getDriver()).getScreenshotAs(OutputType.BYTES);
    }
}

10. Base Test Class & Sample Tests

10.1 `BaseTest.java`

package com.automationcodes.automation.tests.base;

import com.automationcodes.automation.config.ConfigManager;
import com.automationcodes.automation.core.DriverFactory;
import com.automationcodes.automation.core.DriverManager;
import com.automationcodes.automation.core.TestContext;
import com.automationcodes.automation.utils.LoggerUtil;
import org.apache.logging.log4j.Logger;
import org.openqa.selenium.WebDriver;
import org.testng.annotations.*;

public abstract class BaseTest {

    protected Logger log = LoggerUtil.getLogger(this.getClass());
    protected String baseUrl;

    @Parameters({"env"})
    @BeforeSuite(alwaysRun = true)
    public void beforeSuite(@Optional String env) {
        if (env != null && !env.isEmpty()) {
            System.setProperty("env", env);
        }
        log.info("Starting test suite. env={}", System.getProperty("env", "dev"));
    }

    @BeforeMethod(alwaysRun = true)
    public void setUp() {
        WebDriver driver = DriverFactory.createInstance();
        DriverManager.setDriver(driver);
        baseUrl = ConfigManager.get("base.url");
        TestContext.set("baseUrl", baseUrl);
        log.info("WebDriver created. Base URL: {}", baseUrl);
    }

    @AfterMethod(alwaysRun = true)
    public void tearDown() {
        log.info("Tearing down WebDriver");
        DriverManager.unload();
        TestContext.clear();
    }
}

10.2 `LoginTests.java`

package com.automationcodes.automation.tests.login;

import com.automationcodes.automation.pages.HomePage;
import com.automationcodes.automation.pages.LoginPage;
import com.automationcodes.automation.tests.base.BaseTest;
import org.testng.Assert;
import org.testng.annotations.Test;

public class LoginTests extends BaseTest {

    @Test(description = "Valid user should be able to login successfully")
    public void validLoginShouldSucceed() {
        HomePage homePage = new LoginPage()
                .open()
                .typeUsername("tomsmith")
                .typePassword("SuperSecretPassword!")
                .clickLoginSuccess();

        String message = homePage.getFlashMessage();
        Assert.assertTrue(message.contains("You logged into a secure area!"),
                "Expected success message not present. Actual: " + message);
    }

    @Test(description = "Invalid login should show error message")
    public void invalidLoginShouldFail() {
        LoginPage loginPage = new LoginPage()
                .open()
                .typeUsername("invalid")
                .typePassword("invalid")
                .clickLoginExpectingFailure();

        String error = loginPage.getErrorMessage();
        Assert.assertTrue(error.toLowerCase().contains("your username is invalid"),
                "Expected error message not present. Actual: " + error);
    }
}

11. TestNG Suite

src/test/resources/testng.xml:

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd" >
<suite name="UI Automation Suite" parallel="tests" thread-count="3">

    <listeners>
        <listener class-name="com.automationcodes.automation.tests.listeners.TestListener"/>
    </listeners>

    <test name="Login Tests - Dev">
        <parameter name="env" value="dev"/>
        <classes>
            <class name="com.automationcodes.automation.tests.login.LoginTests"/>
        </classes>
    </test>

</suite>

12. Running the Framework

From the project root:

Dev (default profile)

mvn clean test

QA

mvn clean test -Pqa

Prod

mvn clean test -Pprod

Generated artifacts:

Extent HTML report: target/reports/ExtentReport_<timestamp>.html
Screenshots on failure: target/screenshots
Logs: target/logs/framework.log

```

Hybrid Selenium Framework with POM + TestNG: Complete Implementation Guide

2025-12-10T12:48:00.000+05:30

Complete Hybrid Selenium Framework - Ready to Use

This is the full, production-ready implementation of a Hybrid Selenium Framework using Page Object Model (POM) and TestNG. All classes, utilities, and configuration files are included with complete working code.

Project Structure Overview

src/
├── main/
│   ├── java/
│   │   ├── config/
│   │   │   └── ConfigReader.java
│   │   ├── pages/
│   │   │   └── LoginPage.java
│   │   ├── utilities/
│   │   │   ├── DriverManager.java
│   │   │   └── ExcelReader.java
│   │   └── base/
│   │       └── BaseTest.java
│   └── resources/
│       ├── config.properties
│       └── testdata/
│           └── LoginData.xlsx
├── test/
│   ├── java/tests/
│   │   └── LoginTest.java
│   └── resources/
│       └── testng.xml
└── pom.xml

1. pom.xml - Complete Dependencies

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.automation</groupId>
    <artifactId>selenium-pom-framework</artifactId>
    <version>1.0</version>
    
    <properties>
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>4.17.0</version>
        </dependency>
        <dependency>
            <groupId>org.testng</groupId>
            <artifactId>testng</artifactId>
            <version>7.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.aventstack</groupId>
            <artifactId>extentreports</artifactId>
            <version>5.1.1</version>
        </dependency>
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>5.6.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>5.2.5</version>
        </dependency>
    </dependencies>
    
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>3.2.5</version>
                <configuration>
                    <suiteXmlFiles>
                        <suiteXmlFile>testng.xml</suiteXmlFile>
                    </suiteXmlFiles>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

2. config.properties - Configuration File

File location: src/main/resources/config.properties

browser=chrome
url=https://login.salesforce.com
timeout=10
headless=false

3. ConfigReader.java - Read Configuration Properties

Location: src/main/java/config/ConfigReader.java

package config;

import java.io.FileInputStream;
import java.util.Properties;

public class ConfigReader {
    private static Properties properties;
    
    static {
        try {
            properties = new Properties();
            properties.load(new FileInputStream("src/main/resources/config.properties"));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    public static String getProperty(String key) {
        return properties.getProperty(key);
    }
}

4. DriverManager.java - WebDriver Factory

Location: src/main/java/utilities/DriverManager.java

package utilities;

import config.ConfigReader;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.firefox.FirefoxDriver;

public class DriverManager {
    public static WebDriver getDriver() {
        String browser = ConfigReader.getProperty("browser");
        if ("chrome".equalsIgnoreCase(browser)) {
            WebDriverManager.chromedriver().setup();
            ChromeOptions options = new ChromeOptions();
            if (Boolean.parseBoolean(ConfigReader.getProperty("headless"))) {
                options.addArguments("--headless");
            }
            options.addArguments("--disable-notifications");
            return new ChromeDriver(options);
        } else {
            WebDriverManager.firefoxdriver().setup();
            return new FirefoxDriver();
        }
    }
}

5. ExcelReader.java - Data-Driven Test Support

Location: src/main/java/utilities/ExcelReader.java

package utilities;

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;

import java.io.FileInputStream;
import java.io.IOException;

public class ExcelReader {
    public static Object[][] getData(String filePath, String sheetName) {
        try (FileInputStream fis = new FileInputStream(filePath);
             Workbook workbook = new XSSFWorkbook(fis)) {
            
            Sheet sheet = workbook.getSheet(sheetName);
            int rows = sheet.getLastRowNum();
            int cells = sheet.getRow(0).getLastCellNum();
            
            Object[][] data = new Object[rows][cells];
            for (int i = 0; i < rows; i++) {
                for (int j = 0; j < cells; j++) {
                    data[i][j] = sheet.getRow(i + 1).getCell(j).getStringCellValue();
                }
            }
            return data;
        } catch (IOException e) {
            throw new RuntimeException("Excel read error: " + e.getMessage());
        }
    }
}

6. LoginPage.java - Page Object Model

Location: src/main/java/pages/LoginPage.java

package pages;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class LoginPage {
    private WebDriver driver;
    private WebDriverWait wait;
    
    @FindBy(xpath = "//input[contains(@id,'username')]")
    private WebElement usernameField;
    
    @FindBy(xpath = "//input[contains(@id,'password')]")
    private WebElement passwordField;
    
    @FindBy(xpath = "//input[@type='submit' or contains(@value,'Log')]")
    private WebElement loginButton;
    
    @FindBy(xpath = "//div[contains(@class,'error')]")
    private WebElement errorMessage;
    
    public LoginPage(WebDriver driver) {
        this.driver = driver;
        this.wait = new WebDriverWait(driver, 10);
        PageFactory.initElements(driver, this);
    }
    
    public void enterUsername(String username) {
        wait.until(ExpectedConditions.visibilityOf(usernameField));
        usernameField.clear();
        usernameField.sendKeys(username);
    }
    
    public void enterPassword(String password) {
        passwordField.clear();
        passwordField.sendKeys(password);
    }
    
    public void clickLogin() {
        loginButton.click();
    }
    
    public String getErrorMessage() {
        return errorMessage.getText();
    }
    
    public void login(String username, String password) {
        enterUsername(username);
        enterPassword(password);
        clickLogin();
    }
}

7. BaseTest.java - Test Base Class

Location: src/test/java/base/BaseTest.java

package base;

import config.ConfigReader;
import org.openqa.selenium.WebDriver;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import pages.LoginPage;
import utilities.DriverManager;

public class BaseTest {
    protected WebDriver driver;
    protected LoginPage loginPage;
    
    @BeforeMethod
    public void setup() {
        driver = DriverManager.getDriver();
        driver.manage().window().maximize();
        driver.get(ConfigReader.getProperty("url"));
        loginPage = new LoginPage(driver);
    }
    
    @AfterMethod
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

8. LoginTest.java - Test Class with Data Provider

Location: src/test/java/tests/LoginTest.java

package tests;

import base.BaseTest;
import org.testng.Assert;
import org.testng.annotations.DataProvider;
import org.testng.annotations.Test;
import utilities.ExcelReader;

public class LoginTest extends BaseTest {
    
    @DataProvider(name = "loginData")
    public Object[][] getLoginData() {
        return ExcelReader.getData("src/main/resources/testdata/LoginData.xlsx", "Sheet1");
    }
    
    @Test(dataProvider = "loginData", groups = "smoke")
    public void validLoginTest(String username, String password) {
        loginPage.login(username, password);
        Assert.assertTrue(driver.getTitle().contains("Salesforce"));
    }
    
    @Test(groups = "negative")
    public void invalidLoginTest() {
        loginPage.login("invalid@test.com", "wrongpass");
        Assert.assertTrue(loginPage.getErrorMessage().contains("Error"));
    }
}

9. testng.xml - Test Suite Configuration

Location: src/test/resources/testng.xml

<?xml version="1.0" encoding="UTF-8"?>
<suite name="SalesforceRegressionSuite" parallel="methods" thread-count="3">
    <test name="SmokeTests">
        <groups>
            <run>
                <include name="smoke"/>
            </run>
        </groups>
        <classes>
            <class name="tests.LoginTest"/>
        </classes>
    </test>
    <test name="NegativeTests">
        <groups>
            <run>
                <include name="negative"/>
            </run>
        </groups>
        <classes>
            <class name="tests.LoginTest"/>
        </classes>
    </test>
</suite>

How Each Class Works Together

To run:

Open terminal at file location
Run: node filename.js (make sure Node.js is installed and set in system variables)

Output:

Hello World

Comments in JavaScript

javascript

// This is a single line comment

/*This is a multi-line comment */

Comments don't impact execution.

Variables in JavaScript

JavaScript variables are loosely typed - no explicit data types are needed.

Example of declaring a variable:

let a = 4;

console.log(a);

// Prints: 4

To check type of variable:

console.log(typeof a); // Outputs: "number"

Variables can be declared with var, let, and const. let and const were introduced in ES6.

var, let, const

var: Function scoped, can be redeclared and reassigned.
let: Block scoped, cannot be redeclared, but can be reassigned.
const: Block scoped, cannot be redeclared or reassigned (constant).

Example:

let a = 4; a = 5; // OK

let a=6; // cannot be redeclared

const b = 10; b = 15; // Error: Assignment to constant variable.

var c = 7; var c = 8; // Allowed with var` ,can be redeclared and reassigned.

Use let or const instead of var for better scoping.

Boolean negation operator

let flag = true;

console.log(!flag); *// Prints: false*

Negation ! works only with boolean values.

Reassignment and variable declaration

`javascript

let c = a + b; // Declared once c = a + b; // Reassignment allowed without let keyword

let c = a + b; // Error: 'c' already declared`

Loops in JavaScript

while loop

let i = 0;

while (i < 10)

{

console.log(i);

i++;

}

Infinite loop caution: Condition must eventually become false.

The loop starts with i = 0.
Each iteration prints i and increases it by 1.
When i reaches 10, the condition (i < 10) becomes false, so the loop stops.

If you forget to update i, the condition never becomes false, creating an infinite loop.

do-while loop

javascript

let i = 10;

do

{

console.log(i);

i++;

} while (i < 10);

Executes once before checking condition.

for loop

for (let i = 0; i <= 10; i++)

{

console.log(i);

}

Use when the number of iterations is known.

Example: Find multiples of 2 and 5

for (let k = 1; k <= 10; k++)

{

if (k % 2 === 0 && k % 5 === 0)

{

console.log(k);

}

} *// Output: 10*

break statement example

let n = 0;

for (let k = 1; k <= 100; k++)

{

if (k % 2 === 0 && k % 5 === 0)

{

n++;

console.log(k);

if (n === 3)

break;

// Stop after first 3 matches*

}

The loop runs from k = 1 to k = 100.
Inside, the condition (k % 2 === 0 && k % 5 === 0) checks whether k is divisible by both 2 and 5 (which means divisible by 10).
Each valid match increases n by 1 and prints k.
Once n reaches 3, the break statement exits the loop early.

So the output stops after printing the first 3 such numbers (10, 20, 30).

Arrays in JavaScript

Declaring and initializing an array

javascript

let marks = new Array(6);

marks = [20, 40, 35, 45, 50, 37];

Or simply:

javascript

let marks = [20, 40, 35, 45, 50, 37];

Accessing array elements

javascript

console.log(marks[2]); // Outputs: 35*

Updating array element

javascript

marks[3] = 14; // Change fourth element to 14

console.log(marks);

Array length

javascript

console.log(marks.length); // Outputs: 6

Adding/removing elements

javascript

marks.push(65); // Add 65 at the end* marks.pop(); // Removes last element marks.unshift(12); // Add 12 at beginning*

Array methods: indexOf, includes, slice

javascript

console.log(marks.indexOf(35)); // Get index of 35* console.log(marks.includes(120)); // false - if 120 not found

let subMarks = marks.slice(2, 5); // elements from index 2 to 4

Loop to sum array elements

javascript

let sum = 0;

for(let i = 0; i < marks.length; i++)

{

sum += marks[i];

}

console.log(sum);

Using reduce

javascript

let totalMarks = marks.reduce((sum, mark) => sum + mark, 0);

console.log(totalMarks);

Filtering even numbers from an array

javascript

let scores = [12, 13, 14, 16];

let evenScores = [];

for(let i = 0; i < scores.length; i++)

{

if(scores[i] % 2 === 0)

{

evenScores.push(scores[i]);

}

console.log(evenScores); *// [12, 14, 16]*

Using filter method

javascript

let evenScores = scores.filter(score => score % 2 === 0);

console.log(evenScores);

Mapping over array elements

Multiply evens by 3:

javascript

let mappedScores = evenScores.map(score => score * 3);

console.log(mappedScores);

Combining filter, map, reduce

`javascript

let result = scores .filter(score => score % 2 === 0) .map(score => score * 3) .reduce((total, score) => total + score, 0);

console.log(result);

Sorting

Sorting strings

javascript

let fruits = ['Banana', 'Mango', 'Apple'];

fruits.sort();

console.log(fruits);

Sorting numbers (with custom comparator)

`javascript

let numbers = [12, 3, 19, 16, 14];

numbers.sort((a, b) => a - b);

console.log(numbers); // Ascending order

numbers.sort((a, b) => b - a);

console.log(numbers); // Descending order`

Functions in JavaScript

Named function

function add(a, b)

{

return a + b;

}

let result = add(2, 3);

console.log(result); // 5

Anonymous function assigned to variable

let add = function(a, b)

{

return a + b;

};

console.log(add(2, 3)); // 5

Arrow function (ES6)

let add = (a, b) => a + b;

console.log(add(2, 3)); // 5

Variable scope differences: var vs let vs const

var is function scoped
let and const are block scoped

Example problem with var:

`javascript

if (true) {

var grade = "Afternoon"; // var scoped outside block

}

console.log(grade); // Prints "Afternoon"

if (true)

{

let grade = "Evening";

// let scoped inside block

}

console.log(grade); // Error if grade not declared outside block`

Strings in JavaScript

javascript

let day = "Tuesday";

console.log(day.length); // String length

// Substring with slice

let sub = day.slice(0, 4); // 'Tues'// Access character by index

console.log(day[1]); // 'u'// Split string

let parts = day.split('s'); // splits at 's'// Trim whitespace

let rawString = " hello ";

console.log(rawString.trim()); // 'hello'

Converting string to number and vice versa

javascript

let str = "27";

let num = parseInt(str);

console.log(num - 23); // Subtract numbers correctly

console.log(num.toString()); // Convert back to string*

Objects in JavaScript

`javascript

let person = { firstName: "John", lastName: "Doe", gender: "Male" };

// Access properties

console.log(person.firstName);

console.log(person['lastName']);

// Update property

person.firstName = "Tim";

// Add new property

person.age = 30;

// Delete property

delete person.gender;

// Check if property exists

console.log('gender' in person); // false after deletion

// Iterate properties

for (let key in person)

{

console.log(key + ": " + person[key]);

}

Object methods (functions as properties)

javascript

let person = {

firstName: "Tim",

lastName: "Smith",

fullName: function() {

return this.firstName + " " + this.lastName;

}

};

console.log(person.fullName()); // Call function property

Classes in JavaScript (ES6)

javascript

class Person {

constructor(firstName, lastName) {

this.firstName = firstName; // instance variable

this.lastName = lastName; // instance variable

}

fullName() {

return this.firstName + " " + this.lastName;

}

get location() {

return "Canada"; // getter property

}

// Create instance

const p1 = new Person("Tim", "Joseph");

console.log(p1.fullName());

console.log(p1.location);

Exporting and importing classes in Node.js

Export class:

javascript

module.exports = Person;

Import and use in another file:

javascript

const Person = require('./Person');

const p1 = new Person("Chris", "Edward");

console.log(p1.fullName());

Inheritance in JavaScript classes

const Person = require('./Person');

class Pet extends Person {

constructor(firstName, lastName) {

super(firstName, lastName); // Call parent's constructor

}

get location() {

return "Blue Cross"; // Override parent's location

}

const pet1 = new Pet("Sam", "Sam");

console.log(pet1.fullName()); // Inherited method

console.log(pet1.location); // Overridden property

Provar : Scenario-Based Provar Testing Questions - Part 5

2025-04-13T18:22:00.004+05:30

Part 5: Scenario-Based Provar Testing Questions

81. A test fails due to a missing element. How to debug?

When encountering a test failure due to a missing element, consider the following steps:

Ø Verify Metadata Synchronization: Ensure that your Provar metadata is up-to-date with your Salesforce environment. Outdated metadata can lead to mismatches between your test scripts and the current UI elements.

Ø Utilize Provar's Live Inspection Tool: Use the Live Inspection Tool to interactively inspect and capture UI elements directly from your Salesforce application. This helps in accurately identifying elements and updating your test scripts accordingly.

Ø Review Salesforce Release Notes: Salesforce periodically updates its UI components and features. Reviewing the latest release notes can inform you of any changes that might affect your test elements.

Ø Set Breakpoints and Analyze Logs: Incorporate breakpoints in your test scripts to pause execution at critical points. Analyze the logs to identify discrepancies or issues related to element identification.

Example: If a test fails because a button is not found, verify that the button's locator is correct and that the button exists in the current UI version.

82. How to handle Salesforce’s Summer/Winter release impact on tests?

To mitigate the impact of Salesforce's seasonal releases on your tests:

Ø Update Provar Regularly: Ensure that you are using the latest version of Provar, as updates often include compatibility fixes for new Salesforce releases.

Ø Refresh Metadata: After a Salesforce release, refresh your metadata in Provar to capture any changes in UI elements or functionality.

Ø Execute Regression Suites: Run comprehensive regression tests before and after Salesforce releases to identify and address any issues introduced by the new release.

Example: Before the Summer release, run your regression suite to establish a baseline. After the release, run the suite again to identify any discrepancies caused by the new features or changes.

83. A test passes in sandbox but fails in production. How to resolve?

Discrepancies between sandbox and production environments can cause such issues. To address them:

Ø Compare Org Configurations: Ensure that both sandbox and production environments have identical configurations, including custom settings, profiles, and permissions.

Ø Align Profiles and Permissions: Verify that user profiles and permissions are consistent across environments, as differences can affect test outcomes.

Ø Synchronize Test Data: Confirm that the test data in production mirrors that of the sandbox, as variations can lead to test failures.

Ø Utilize Provar’s Environment Overrides: Leverage Provar's environment overrides feature to manage environment-specific configurations within your test scripts.

Example: If a test passes in sandbox but fails in production due to data discrepancies, ensure that the production environment has the same test data setup as the sandbox.

84. How to reduce Provar test execution time?

To optimize test execution efficiency:

Ø Parallelize Test Execution: Run multiple tests simultaneously to utilize system resources effectively and reduce overall execution time.

Ø Disable Unnecessary Screenshots: Configure Provar to capture screenshots only when essential, as excessive screenshotting can slow down test execution.

Ø Employ Headless Browsers: Use headless browser modes during testing to eliminate the overhead of rendering the UI, thereby speeding up test runs.

Example: Implementing parallel execution and headless browsers can significantly decrease the time required for a full regression test suite to complete.

85. How to validate Salesforce’s Single Sign-On (SSO)?

To validate SSO functionality:

Ø Configure SAML in Provar: Set up Security Assertion Markup Language (SAML) settings in Provar to simulate SSO login processes.

Ø Test Across Identity Providers (IdPs): Ensure that SSO works seamlessly with various IdPs, such as Okta and ADFS, by conducting tests specific to each.

Ø Verify User Access Post-Login: Confirm that users are granted appropriate access rights and permissions after successful SSO authentication.

Example: Automate tests that simulate user logins via Okta and ADFS, verifying that users can access Salesforce without issues.

86. A test is flaky due to dynamic data. How to fix?

Flaky tests caused by dynamic data can be stabilized by:

Ø Implementing Dynamic Data Binding: Use dynamic data references (e.g., ${TODAY}) in your test scripts to handle varying data inputs consistently.

Ø Generating Synthetic Test Data: Create controlled, synthetic data sets that provide consistent inputs for your tests, reducing variability.

Ø Utilizing Data Factories: Employ data factories to generate consistent and repeatable test data scenarios.

Example: Instead of hardcoding dates in your tests, use dynamic references like ${TODAY} to ensure that tests adapt to different data contexts.

87. How to test Salesforce’s Multi-Currency feature?

To effectively test multi-currency functionalities:

Ø Parameterize Currency Values: Design your test cases to accept different currency values, ensuring that the application handles various currencies correctly.

Ø Validate Currency Conversions: Test that currency conversions are accurate in reports and transactions, adhering to current exchange rates.

Ø Assess Reporting Accuracy: Ensure that financial reports correctly display amounts in multiple currencies and reflect accurate conversion rates.

Example: Create test cases that input transactions in different currencies and verify that reports display correct totals after conversion.

88. How to handle Salesforce’s governor limits in testing?

To manage Salesforce's governor limits during testing:

Ø Optimize SOQL Queries: Write efficient SOQL queries that retrieve only necessary data, minimizing resource consumption.

Ø Utilize Bulk API for Data Setup: Use the Bulk API to handle large data volumes during test setup, reducing the impact on governor limits.

Ø Implement Asynchronous Processing: Leverage asynchronous operations like Batch Apex or Queueable Apex to handle large data sets without hitting limits.

Example: Instead of inserting records one by one, use the Bulk API to insert records in batches, reducing the number of DML operations and staying within governor limits.

89. A test fails due to MFA. How to bypass?

To address test failures caused by Multi-Factor Authentication (MFA):

Ø Use OAuth 2.0 Token Flow: Implement OAuth 2.0 authentication to obtain access tokens without requiring MFA.

Ø Whitelist Test IPs: Configure Salesforce to recognize the IP addresses used by your test environment, allowing bypass of MFA for those addresses.

Ø Utilize Named Credentials: Set up Named Credentials in Salesforce to securely store authentication details, facilitating seamless test execution.

Example: Configure OAuth 2.0 authentication in your test scripts to obtain access tokens, enabling tests to run without MFA prompts.

90. How to validate Salesforce’s Territory Management?

To validate Salesforce's Territory Management:

Ø Test Account Assignment Rules: Verify that accounts are correctly assigned to territories based on predefined rules.

Ø Validate Territory Hierarchies: Ensure that territory hierarchies are correctly defined and reflect the organization's structure.

Ø Assess User Access: Confirm that users have appropriate access to territories and related data based on their roles.

Example: Automate tests that create accounts and verify their assignment to the correct territories, ensuring compliance with business rules.

91. How to test Salesforce’s Geofencing?

To test Salesforce's Geofencing capabilities:

Ø Simulate Location Data: Use tools to simulate GPS coordinates and test geofencing triggers.

Ø Validate Location-Based Triggers: Ensure that actions are correctly triggered when users enter or exit defined geofenced areas.

Ø Test Multiple Scenarios: Simulate various user movements to verify the accuracy and reliability of geofencing features.

Example: Automate tests that simulate user movements across geofenced areas, verifying that appropriate actions are triggered at each boundary.

92. How to automate testing for Salesforce’s Voice Assistant?

To automate testing for Salesforce's Voice Assistant:

Ø Simulate Voice Commands: Use Provar's API steps to simulate voice commands and test the assistant's responses.

Ø Validate Intent Recognition: Ensure that the voice assistant correctly interprets user intents and provides appropriate responses.

Ø Test Integration Points: Verify that the voice assistant integrates seamlessly with Salesforce data and processes.

Example: Automate tests that simulate voice commands like "Create a new lead," verifying that the assistant correctly creates a lead in Salesforce.

93. A test fails after a Lightning upgrade. How to fix?

To address test failures after a Lightning upgrade:

Ø Refresh Provar Metadata: Update Provar's metadata to reflect changes in the Lightning UI components.

Ø Update Locators: Modify test scripts to use updated locators that align with the new Lightning UI structure.

Ø Revalidate Test Cases: Run regression tests to ensure that all functionalities work as expected after the upgrade.

Example: After a Lightning upgrade, update your test scripts to use new locators for buttons and fields that have changed in the UI.

94. How to test Salesforce’s Predictive Analytics?

To test Salesforce's Predictive Analytics:

Ø Validate Einstein Discovery Models: Ensure that predictive models are correctly trained and deployed within Salesforce.

Ø Assess Prediction Accuracy: Verify that predictions made by the models are accurate and align with expected outcomes.

Ø Test Integration Points: Confirm that predictive analytics features integrate seamlessly with other Salesforce modules and external data sources.

Example: Automate tests that input historical data and verify that the predictive models generate accurate forecasts.

95. How to handle Salesforce’s Multi-Language testing?

To manage multi-language testing in Salesforce:

Ø Use Provar’s Language Packs: Leverage Provar's language packs to test Salesforce applications in different languages.

Ø Parameterize Labels: Ensure that UI labels are parameterized to adapt to different languages dynamically.

Ø Validate Translations: Verify that all content is correctly translated and displayed in the selected language.

Example: Automate tests that switch between languages and verify that all UI elements and content are correctly translated.

96. How to test Salesforce’s Work.com?

To test Salesforce's Work.com features:

Ø Validate Employee Wellness Checks: Ensure that wellness surveys and assessments are correctly administered and recorded.

Ø Test Workplace Analytics: Verify that analytics dashboards accurately reflect employee health and safety data.

Ø Assess Integration Points: Confirm that Work.com integrates seamlessly with other Salesforce modules and external systems.

Example: Automate tests that simulate employee wellness checks and verify that the results are accurately recorded and displayed in analytics dashboards.

97. How to validate Salesforce’s Blockchain integrations?

To validate Salesforce's Blockchain integrations:

Ø Test Smart Contract Execution: Ensure that smart contracts are correctly deployed and executed within the Salesforce environment.

Ø Validate Ledger Consistency: Verify that the blockchain ledger accurately records all transactions and maintains consistency across nodes.

Ø Assess Integration Points: Confirm that blockchain integrations with Salesforce modules function as expected, ensuring seamless data flow.

Example: Automate tests that initiate smart contract transactions and verify that the blockchain ledger reflects these changes accurately.

98. How to test Salesforce’s NFT Management?

To test Salesforce's NFT Management features:

Ø Validate NFT Minting: Ensure that NFTs are correctly minted and associated with the appropriate metadata.

Ø Test NFT Transfers: Verify that NFTs can be transferred between wallets or users as intended.

Ø Assess Wallet Integrations: Confirm that wallet integrations function properly, allowing users to manage their NFTs seamlessly.

Example: Automate tests that mint NFTs, transfer them between users, and verify that wallet balances update accordingly.

99. How to automate testing for Salesforce’s Quantum Computing?

To automate testing for Salesforce's Quantum Computing features:

Ø Simulate Quantum Algorithms: Use Provar's API steps to simulate quantum algorithms and test their integration with Salesforce.

Ø Validate Outcomes: Ensure that the results from quantum computations are correctly processed and displayed within Salesforce.

Ø Test Integration Points: Confirm that quantum computing features integrate seamlessly with other Salesforce modules and external systems.

Example: Automate tests that simulate quantum computations and verify that the results are accurately reflected in Salesforce records.

100. How to future-proof Provar tests for Salesforce innovations?

To future-proof Provar tests for Salesforce innovations:

Ø Adopt Metadata-Driven Testing: Utilize Provar's metadata-driven approach to ensure tests adapt to changes in Salesforce configurations.

Ø Stay Updated with Provar Releases: Regularly update Provar to leverage new features and improvements aligned with Salesforce innovations.

Ø Participate in Salesforce Beta Programs: Engage in Salesforce beta programs to gain early access to new features and prepare tests accordingly.

Example: Implement metadata-driven tests that automatically adjust to changes in Salesforce configurations, ensuring long-term test stability.

Provar :Advanced Provar Automation Testing Questions - Part 4

2025-04-13T17:02:00.006+05:30

Part 4: Advanced Provar Automation Testing Questions

61. How to test Salesforce Government Cloud with Provar?

Provar streamlines testing for Salesforce Government Cloud by leveraging its native integration with Salesforce metadata and compliance-focused features:

· Compliance Assurance:

o Use Provar’s VerifyFieldAccess and VerifyPageContainsText steps to validate adherence to FedRAMP, FOIA, and cybersecurity mandates.

o Automate checks for audit trails and encryption settings using SOQL queries (e.g., SELECT DataType FROM FieldSecurityClassification).

· Secure Data Handling:

o Enable Provar’s Data Masking to anonymize sensitive data (e.g., SSNs) during test execution.

o Store credentials securely using Provar’s encrypted Global Parameters or integrate with secrets managers like Azure Key Vault.

· Legacy System Integration:

o Validate data flows between Government Cloud and legacy systems using Provar’s REST/SOAP API testing and Database Query steps.

· Example:

o Automate a citizen service request workflow:

1. Simulate form submission via Set Field and Click steps.

2. Validate multi-stage approval processes using VerifyRecord and VerifyEmail steps.

3. Confirm data integrity in legacy systems via JDBC connections.

62. How to automate testing for Salesforce Blockchain?

Provar tests Salesforce Blockchain using metadata-aware automation and API validation:

· Smart Contract Validation:

o Use Provar’s Execute Apex step to invoke smart contracts and validate outcomes via AssertJsonPath.

o Example: Verify a contract’s Status field updates to "Executed" post-transaction.

· Ledger State Verification:

o Query blockchain ledger tables (e.g., BlockchainTransaction) using Provar’s Database Query step.

· Integration Testing:

o Test API endpoints with Provar’s REST Request step, validating payloads and headers for GDPR compliance.

· Example:

o Trigger a blockchain transaction via Apex, then use VerifyDatabase to confirm the ledger reflects the transaction hash.

63. How to test Salesforce’s Hyperforce architecture?

Provar supports Hyperforce testing via environment flexibility and performance monitoring:

· Environment Flexibility:

o Use Provar’s Environment Overrides to switch regions (e.g., AWS EU vs. Azure US) without script changes.

· Performance Validation:

o Integrate Provar with New Relic or Datadog (via CLI) to monitor response times during cross-region tests.

· Compliance Testing:

o Validate data residency using Provar’s VerifyDatabase step to check record storage locations.

· Example:

o Run a test suite across Hyperforce regions and assert performance metrics stay within SLA thresholds.

64. How to secure Provar test data?

Provar ensures test data security through built-in features and integrations:

· Data Masking:

o Configure Data Protection Settings in Provar Desktop to mask PII/PHI during test execution.

· Secure Storage:

o Use Provar’s Encrypted Parameters for credentials or integrate with HashiCorp Vault.

· Access Controls:

o Restrict project access via Provar Manager’s role-based permissions.

· Example:

o Retrieve API keys from Azure Key Vault using Provar’s REST Request step and inject them dynamically into tests.

65. How to test Salesforce’s Genie (real-time data)?

Provar validates Genie’s real-time capabilities using:

· Streaming Data Validation:

o Use Provar’s Subscribe to Platform Events step to ingest real-time data streams.

· Analytics Testing:

o Validate Einstein Analytics dashboards with VerifyImage or VerifyText steps.

· Example:

o Simulate a live sales transaction, then assert the Genie-powered dashboard updates within 5 seconds using WaitForElement.

66. How to validate Salesforce’s MuleSoft integrations?

Provar automates MuleSoft integration testing via:

· API Testing:

o Use REST Request steps to validate MuleSoft endpoints, headers, and payloads.

o Example: Send a payload to /api/orders and assert the response matches the ERP system’s schema.

· End-to-End Validation:

o Combine Salesforce UI tests with MuleSoft API checks in a single Provar test case.

· Error Handling:

o Force HTTP 500 errors and validate error logging using VerifyDatabase steps.

67. How to test Salesforce’s Slack integrations?

Provar tests Slack integrations using webhooks and UI validation:

· Message Validation:

o Configure Slack Incoming Webhooks and use Provar’s REST Request to post messages.

o Validate Slack channel updates via VerifyPageContainsText.

· Bidirectional Testing:

o Use Provar’s Slack Connector (if available) or simulate Slack actions via API.

· Example:

o Update a Case record in Salesforce and verify a Slack message appears with the Case ID using VerifyJSONPath.

68. How to automate testing for Salesforce IoT?

Provar tests IoT workflows using simulated data and rule validation:

· Device Simulation:

o Use Data-Driven Testing with CSV files to simulate sensor data (e.g., temperature, humidity).

· Rule Execution:

o Validate IoT-driven alerts using VerifyEmail or VerifyField steps.

· Example:

o Send simulated JSON payloads ({"deviceId": "123", "temp": 45}) via Provar’s REST Request, then assert an Alert record is created in Salesforce.

69. How to test Salesforce’s AI (Einstein GPT)?

Provar automates testing for Salesforce Einstein GPT by leveraging metadata-aware validation and API integration:

· AI Response Validation:

o Use Provar’s VerifyText or VerifyJSONPath steps to validate contextually accurate responses generated by Einstein GPT (e.g., verifying a Case comment matches AI-recommended solutions).

o Execute Execute Apex steps to trigger Einstein predictions (e.g., Einstein_PredictionService.predict()).

· Workflow Integration:

o Validate AI-triggered actions (e.g., auto-creation of Tasks) using VerifyRecord or VerifyEmail steps.

· Performance Testing:

o Integrate with JMeter to simulate high-volume AI requests and monitor latency via Provar’s CLI.

· Example:

o Simulate a customer inquiry via a Case form, validate Einstein GPT’s response using VerifyPageContainsText, and confirm a follow-up Task is created.

70. How to handle Salesforce’s Multi-Cloud Architectures?

Provar streamlines multi-cloud testing with environment flexibility and cross-cloud validation:

· Cross-Cloud Testing:

o Design end-to-end tests spanning Sales, Service, and Marketing Clouds using Provar’s Callable Test Cases for modularity.

o Validate data sync with SOQL queries (e.g., check a Lead converted in Sales Cloud appears in Service Cloud).

· Environment Management:

o Use Environment Overrides to switch between orgs (e.g., Production vs. Sandbox) without script changes.

· Example:

o Automate a Lead-to-Opportunity flow in Sales Cloud, trigger a Service Cloud Case via REST Request, and verify data consistency using VerifyDatabase.

71. How to test Salesforce’s Nonprofit Cloud?

Provar automates Nonprofit Cloud workflows using metadata-driven steps:

· Donation Processing:

o Use Create Record to simulate donations and VerifyField to check allocation (e.g., Donation.Amount = $500).

o Validate automated receipts via Provar’s Email Testing steps.

· Grant Management:

o Test approval workflows using Set Picklist and VerifyRecord steps (e.g., grant status transitions to "Approved").

· Example:

o Simulate a donor contribution, validate funds are allocated to a Campaign, and confirm a thank-you email is sent.

72. How to automate testing for Salesforce Education Cloud?

Provar validates Education Cloud through UI and API automation:

· Student Enrollment:

o Use Set Field to populate enrollment forms and Verify Related Records to check Course Enrollments.

· LMS Integration:

o Test data sync with LMS systems via Provar’s REST Request steps (e.g., validate enrollment IDs match in Salesforce/LMS).

· Example:

o Enroll a student via UI, trigger an LMS API call using Execute JavaScript, and verify course access via VerifyPageContainsText.

73. How to test Salesforce’s Manufacturing Cloud?

Provar tests Manufacturing Cloud using IoT and metadata integration:

· Production Planning:

o Validate Production Schedules with VerifyField (e.g., Start_Date__c matches forecasts).

· IoT Integration:

o Simulate IoT sensor data via Data-Driven Testing (CSV files) and validate maintenance alerts using VerifyEmail.

· Example:

o Create a Production Order, simulate equipment sensor data via REST Request, and assert Inventory levels update correctly.

74. How to validate Salesforce’s Heroku integrations?

Provar automates Heroku integration testing via API and error handling:

· Microservice Testing:

o Use REST Request to invoke Heroku endpoints and AssertJSONPath to validate responses (e.g., $.status = "success").

· Data Sync:

o Query Heroku Postgres via Provar’s Database Query step to compare records with Salesforce.

· Example:

o Trigger a Heroku microservice from a Salesforce Opportunity, validate response time <2s, and confirm Opportunity Stage updates.

75. How to test Salesforce’s Loyalty Management?

Provar automates loyalty workflows with data-driven testing:

· Points Accrual:

o Use Data-Driven Testing (Excel) to simulate transactions and VerifyField to check point balances.

· Redemption Testing:

o Validate reward availability via VerifyPageContainsText and redemption success via VerifyRecord.

· Example:

o Award points for a $100 purchase, redeem points for a discount, and assert the Order total reflects the deduction.

76. How to automate testing for Salesforce AppExchange apps?

Provar ensures robust testing for AppExchange apps by leveraging metadata awareness and compliance-focused automation:

· Installation Verification:

o Use SOQL Queries (e.g., SELECT NamespacePrefix FROM InstalledPackage) to validate app installation.

o Validate component visibility (e.g., custom tabs, Lightning components) with VerifyPageContainsText or VerifyImage steps.

· Licensing and Access Control:

o Test role-based access using Login As steps for different profiles (e.g., Admin vs. Standard User).

o Validate licensed features with VerifyFieldAccess (e.g., ensure a custom field is hidden for unlicensed users).

· Compatibility Assurance:

o Sync Provar with Salesforce metadata post-upgrade to detect UI/API conflicts.

· Example:

o Install a CPQ AppExchange app, verify custom objects (e.g., SBQQ__Quote__c) are accessible, and test price rule execution using Set Field and VerifyRecord.

77. How to test Salesforce’s Subscription Management?

Provar automates subscription workflows using data-driven testing and API validation:

· Subscription Lifecycle Validation:

o Use REST Request steps to create/modify subscriptions via Salesforce APIs.

o Validate status transitions (e.g., Active → Cancelled) with VerifyField.

· Billing and Payment Processing:

o Test invoice generation using VerifyPDFContent or VerifyEmail steps.

o Validate payment gateways (e.g., Stripe) via Provar’s Database Query (e.g., SELECT Payment_Status__c FROM Invoice__c).

· Example:

o Create a subscription via UI, trigger a renewal via Apex, and assert the Next_Billing_Date__c updates using VerifyRecord.

78. How to handle Salesforce’s High-Volume Data Testing?

Provar addresses high-volume testing with bulk operations and performance optimization:

· Bulk Data Operations:

o Use Data-Driven Testing with CSV files (10k+ rows) to insert/update records.

o Leverage Provar’s CLI for parallel execution (e.g., provar.sh -projectDir ~/tests -env BulkData).

· Performance Benchmarking:

o Integrate with New Relic or Datadog to monitor API latency during bulk data runs.

· Data Integrity Checks:

o Validate record counts post-import using SOQL (e.g., SELECT COUNT() FROM Account).

· Example:

o Load 50k Leads via Provar’s CSV import, assert no duplicates via SELECT Email FROM Lead GROUP BY Email HAVING COUNT(Email) > 1, and measure execution time.

79. How to test Salesforce’s Consent Management?

Provar automates consent workflows with GDPR/CCPA compliance checks:

· Consent Capture Validation:

o Use Set Checkbox to simulate consent opt-ins and VerifyField to check Consent_Status__c.

· Data Usage Tracking:

o Query DataUsePurpose records via Database Query to audit consent linkages.

· Opt-Out Testing:

o Execute Execute Apex steps to revoke consent and validate Consent_Withdrawn_Date__c.

· Example:

o Simulate a webform opt-in, validate a Consent__c record is created, then revoke consent via UI and assert related workflows are halted.

80. How to automate testing for Salesforce’s Digital Experiences?

Provar validates Digital Experiences (Communities/Portals) using role-based testing and real-time sync:

· Experience Site Validation:

o Test guest user access with Navigate steps to public pages (e.g., Knowledge Articles).

o Use VerifyPageContainsText to validate personalized content for logged-in users.

· Personalization Testing:

o Switch user roles via Environment Overrides and validate dynamic content (e.g., partner vs. customer views).

· Integration Verification:

o Test API-driven content updates (e.g., CMS Connect) with REST Request and VerifyJSONPath.

· Example:

o Log in as a partner user, validate access to restricted deals via VerifyRecord, and assert portal navigation menus render correctly.

81. How to test Salesforce’s Sustainability Cloud?

Provar automates sustainability workflows with data integrity and analytics checks:

· Carbon Footprint Calculations:

o Ingest energy usage data via CSV Import or REST Request (e.g., POST /services/data/vXX.0/sobjects/Emissions__c).

o Validate calculated emissions using VerifyField (e.g., CO2e__c = 1500 kg).

· Metric Reporting:

o Test Einstein Analytics dashboards with VerifyImage to ensure visualizations match data inputs.

· Data Integration:

o Validate ERP syncs using Database Query steps (e.g., compare Salesforce Energy_Usage__c with SAP records).

· Example:

o Import a CSV of factory energy data, trigger a carbon calculation batch job, and assert the Sustainability Cloud dashboard updates within 2 minutes.

Provar : Advanced Provar Automation Testing Questions - Part 3

2025-04-13T15:08:00.007+05:30

Part 3: Advanced Provar Automation Testing Questions

41. How can Provar be used to test Apex Batch Jobs?

Provar automates testing of Apex Batch Jobs through:

· Apex Execution: Use the Execute Apex test step to trigger batch jobs via anonymous Apex (e.g., Database.executeBatch(new MyBatchClass());).

· AsyncApexJob Monitoring: Query the AsyncApexJob object using Provar’s Database Query step to verify status (e.g., SELECT Status FROM AsyncApexJob WHERE JobType = 'BatchApex').

· Data Validation: Post-execution, validate batch outcomes using Salesforce Object Query Language (SOQL) in Provar (e.g., confirm 1,000 records were updated).

· Example: After executing a batch job to update Account.Rating, use Provar to assert that all targeted records have Rating = 'Hot'.

42. How does Provar support testing for Salesforce Shield?

Provar validates Salesforce Shield features using:

· Encrypted Field Testing:

o Use VerifyField to check masked values (e.g., ****1234 for encrypted credit card numbers).

o Execute tests under different profiles to validate decryption permissions.

· Event Monitoring:

o Simulate user actions (e.g., record access) and query EventLogFile to confirm audit trails.

· Data Masking:

o Use Provar’s Database Query to verify masked data in sandboxes (e.g., SELECT Email FROM Contact returns user@example.com.mask).

43. What is Provar’s role in DevOps practices?

Provar enhances DevOps via:

· CI/CD Integration:

o Execute tests using Provar CLI (e.g., provar.[sh|bat] -projectDir ~/tests -env UAT).

o Integrate with Jenkins/Azure DevOps using plugins for automated pipeline runs.

· Shift-Left Testing: Embed tests in version control (Git) to run during development sprints.

· Traceability: Link test cases to Jira issues using Provar Manager for audit trails.

44. How does Provar handle testing for Salesforce Lightning Web Components (LWC)?

Provar tests LWCs using:

· NitroX Locators: Auto-generate metadata-based locators for Shadow DOM elements (e.g., lightning-button).

· Dynamic Waits: Automatically wait for LWC rendering using Provar’s WaitForElement step.

· Example: Validate a custom LWC displays $Opportunity.Amount correctly after a user interaction.

45. Can Provar be used for load testing Salesforce applications?

While Provar focuses on functional testing, it supports load testing prep:

· Data Generation: Create bulk records (10k+ Leads) via Provar’s data-driven testing.

· Integration with JMeter: Export test data (CSV) from Provar to JMeter for concurrent user simulation.

· Post-Load Validation: Use Provar to verify data integrity (e.g., no duplicates post-load).

46. How does Provar facilitate testing for Salesforce CPQ?

Provar automates CPQ workflows by:

· Quote Configuration: Use Set Field steps to populate CPQ attributes (e.g., SBQQ__Discount__c = 15%).

· Price Rule Validation: Assert calculated totals match expected values using VerifyField.

· Document Generation: Validate PDF quote templates via Provar’s VerifyPDFContent step.

47. How can Provar be customized for reporting?

Provar offers advanced reporting via:

· Export Formats: Generate PDF/Excel reports (Provar Desktop > Export Results).

· BI Integration: Use Provar’s REST API to feed results into Power BI/Tableau.

· Custom Dashboards: Configure Provar Manager to track pass/fail rates by test suite.

48. How does Provar test Salesforce Experience Cloud?

Provar validates Experience Cloud by:

· Guest User Testing: Execute tests without authentication to validate public access.

· SSO Validation: Use Navigate steps to simulate Okta/Azure AD logins.

· Template Testing: Switch community themes in Provar’s environment settings.

49. Can Provar be used for accessibility testing?

Yes, via:

· Axe Integration: Embed Axe-core scripts in Provar tests to scan pages for WCAG compliance.

· Screen Reader Simulation: Use JavaScript steps to validate ARIA labels (e.g., document.getElementById('button').ariaLabel).

50. How does Provar support Salesforce OmniStudio?

Provar tests OmniStudio components via:

· FlexCards: Validate UI rendering using VerifyImage or VerifyText.

· DataRaptors: Execute DMLs and assert transformed data in Provar.

· Example: Trigger an Integration Procedure and validate output using AssertJsonPath.

51. How to test Salesforce Health Cloud?

Provar automates Health Cloud by:

· Care Plan Validation: Use Create Record to assign care plans and VerifyField for status.

· HIPAA Compliance: Query FieldHistory tables to audit data access.

52. How to automate testing for Salesforce Flow?

Provar tests Flows via:

· Flow Triggering: Use Click steps to launch Screen Flows.

· Outcome Validation: Assert record updates or email alerts post-execution.

· Error Handling: Test exception paths by forcing invalid inputs.

53. How does Provar handle testing for Salesforce Financial Services Cloud?

Provar automates testing for Financial Services Cloud by:

· Household Management:

o Validate household hierarchies using Verify Related Records (e.g., ensure a parent household aggregates child account balances).

o Test role-based access to financial data via profile switching.

· Financial Account Validation:

o Use SOQL queries in Provar to verify transaction histories and balances (e.g., SELECT Amount FROM FinancialAccountTransaction).

· Compliance Checks:

o Audit data retention policies using Provar’s Database Query to ensure GDPR/HIPAA compliance.

· Example: Automate a test where a financial advisor updates a client’s portfolio and validate that risk assessment rules trigger correctly.

54. How can Provar be used for accessibility testing in Salesforce applications?

Provar integrates accessibility testing via:

· Axe-Core Integration:

o Embed Axe scripts in Provar tests using Execute JavaScript to scan pages for WCAG violations (e.g., missing alt text).

o Javascript Example :

axe.run(document, {}, (err, results) => {

provar.assert(results.violations.length === 0, "Accessibility issues found");

});

· Screen Reader Simulation:

o Use Send Keys steps to navigate pages via keyboard-only interactions.

· Reporting: Export accessibility violations to CSV for remediation tracking.

55. How does Provar support testing for Salesforce OmniStudio?

Provar validates OmniStudio components through:

· FlexCards:

o Use Verify Image or Verify Text to validate dynamic card content (e.g., customer summaries).

· Integration Procedures:

o Trigger procedures via REST API steps and validate output using AssertJSONPath.

· DataRaptors:

o Execute DML operations and verify transformed data using Database Query.

· Example: Test a DataRaptor that populates a FlexCard with loan eligibility criteria and assert the output matches underwriting rules.

56. How can Provar be utilized to test Salesforce Health Cloud?

Provar automates Health Cloud workflows by:

· Care Plan Execution:

o Use Create Record to assign care plans and VerifyField to check status updates (e.g., CarePlan.Status = 'Active').

· Patient Journey Simulation:

o Navigate through patient portals and validate milestone tracking (e.g., post-appointment follow-ups).

· Compliance Audits:

o Query audit logs (SETUP_AUDIT_TRAIL) to ensure HIPAA-compliant data access.

57. How does Provar integrate with load testing tools?

While Provar focuses on functional testing, it complements load testing via:

· Data Preparation:

o Generate bulk records (e.g., 10k Patients) using data-driven testing with CSV files.

· Integration with JMeter:

o Export test data from Provar to JMeter for concurrent user simulation.

· Post-Load Validation:

o Use Provar to verify data integrity (e.g., no duplicate records after bulk uploads).

58. How does Provar support testing for Salesforce Marketing Cloud?

Provar automates Marketing Cloud by:

· Email Campaigns:

o Validate email content and triggers using Verify Email steps (e.g., check subject lines and dynamic AMPscript content).

· Customer Journeys:

o Simulate journey entry points (e.g., form submissions) and verify email/SMS responses.

· AMPscript Testing:

o Use Execute JavaScript to validate rendered content (e.g., %%=ProperCase(@FirstName)=%%).

59. Can Provar be customized for reporting?

Yes, Provar offers advanced reporting via:

· Custom Exports:

o Generate PDF/Excel reports with screenshots and logs (Provar Desktop > Export Results).

· BI Tool Integration:

o Use Provar’s REST API to push results to Power BI/Tableau for trend analysis.

· Provar Manager Dashboards:

o Track metrics like test coverage and flakiness rates across sprints.

60. How does Provar facilitate testing for Salesforce Experience Cloud?

Provar validates Experience Cloud via:

· Guest User Testing:

o Execute tests without authentication to validate public resource access (e.g., knowledge articles).

· SSO Configuration:

o Use Navigate steps to simulate Okta/Azure AD logins and validate token-based redirects.

· Template Testing:

o Switch between community templates (e.g., Customer Service vs. Partner Portal) using environment overrides.

Provar : Intermediate Provar Automation Testing Questions - Part-2

2025-04-13T14:09:00.007+05:30

Part 2 : Intermediate Provar Automation Testing Questions

21. How to test Salesforce REST APIs with Provar?

Ø REST Test Step: Use Provar’s REST Request step to define HTTP methods (GET/POST/PUT/DELETE), endpoints, and headers.

Ø OAuth 2.0 Setup:

§ Create a Salesforce Connected App with OAuth scopes.

§ Configure OAuth in Provar using the Authentication tab (client ID, secret, token URL).

Ø Payload Management:

§ For POST/PUT requests, input JSON/XML payloads (e.g., {"Name": "Test Account"}).

Ø Assertions:

§ Validate status codes (e.g., AssertStatusCodeEquals 201) and response body values (e.g., AssertJsonPathEquals "$.Id").

22. Explain Provar’s email testing capabilities.

Ø Email Server Connections: Configure SMTP/IMAP settings for Gmail, Outlook, etc., in Provar’s Email Connections.

Ø Validation Steps:

§ Use Verify Email to check subject lines, sender addresses, or attachments.

§ Example: Confirm a Case closure triggers a confirmation email with a specific template.

Ø Automation:

§ Automate email sends (e.g., test email-to-case functionality) and validate inbound processing.

23. How to integrate Provar with CI/CD pipelines?

Ø CLI Execution: Run tests via Provar CLI commands (e.g., provar.[sh|bat] -projectDir /path -env UAT).

Ø Jenkins Integration:

§ Install the Provar plugin and configure a job to execute tests post-deployment.

§ Publish HTML/PDF reports using plugins like HTML Publisher.

Ø Result Analysis: Parse JUnit-style XML results for pass/fail metrics in dashboards (e.g., Azure DevOps).

24. What is metadata-driven testing in Provar?

Ø Auto-Generated Locators: Provar uses Salesforce metadata (object/field names) to create stable locators (e.g., provar:id=Account.Name instead of XPath).

Ø Example: A test for Lead conversion remains functional even if the page layout changes, as long as the Status field exists in metadata.

Ø Maintenance Reduction: Metadata alignment ensures tests adapt to Salesforce UI updates (e.g., Lightning migrations).

25. How to handle multi-factor authentication (MFA) in Provar?

Ø MFA Setup:

§ Enable MFA in Provar’s connection settings and upload a Salesforce OTP handler JAR file.

§ Use security keys or authenticator apps for token generation.

Ø Session Sharing: Reuse authenticated sessions across tests to bypass repeated MFA prompts.

26. How to test Salesforce Communities with Provar?

Ø Community Connection:

§ Create a connection in Provar using the Community URL (e.g., https://mycommunity.site.com) and external user credentials.

Ø Testing Scenarios:

§ Validate self-registration flows, portal access, and community-specific pages (e.g., Knowledge Base).

Ø Environment Overrides: Switch between Community versions (e.g., UAT vs. Production) using parameterized URLs.

27. What is Provar’s NitroX technology?

Ø Dynamic Element Handling: NitroX auto-detects Shadow DOM elements in Lightning Web Components (e.g., lightning-button).

Ø iFrame Navigation: Seamlessly interact with nested iframes (e.g., embedded Visualforce pages).

Ø Locator Resilience: Generates metadata-based locators unaffected by dynamic ID changes.

28. How to override environments in Provar?

Ø Parameterization: Define variables like ${OrgURL} and ${Username} in Global Parameters.

Ø Environment Switcher: Use Provar’s Environment Manager to toggle between orgs (e.g., Sandbox vs. Production) without altering test logic.

29. How to test Apex triggers in Provar?

Ø Apex Execute Step:

Account acc = new Account(Name='Test');

insert acc; // Triggers after-insert logic

Ø UI Validation: Create a test that inserts a record via UI and asserts trigger outcomes (e.g., a related Task is created).

30. Explain Provar’s Slack integration.

Ø Webhook Configuration:

§ Create a Slack incoming webhook and note the URL.

§ In Provar, use the Slack Post Message step with the webhook URL and channel name.

Ø Notifications: Send test execution summaries (pass/fail) to Slack for real-time alerts.

31. How to perform database testing with Provar?

Ø JDBC Setup: Configure database connections (e.g., Oracle) in Provar with driver JARs and connection strings.

Ø SQL Execution:

§ Use Database Query steps to run SELECT/INSERT statements.

§ Example: After creating an Opportunity in Salesforce, query the database to verify its sync to an ERP system.

32. What are Provar’s best practices for test maintenance?

Ø Modular Design:

§ Create reusable Callable Test Cases (e.g., Login) to avoid redundancy.

Ø Data-Driven Tests: Store test data in Excel/CSV files (e.g., 100+ user roles).

Ø Group Steps: Organize steps into logical groups (e.g., “Navigate to Account”) for readability.

33. How to test the Salesforce Mobile App with Provar?

Ø Mobile Testing Setup:

§ Use real devices/emulators with the Salesforce Mobile App installed.

§ Configure Provar to interact with mobile elements (e.g., swipe actions).

Ø Limitation: Provar does not support mobile browser testing since Salesforce retired its mobile web experience.

34. How to handle Salesforce’s dynamic page layouts?

Ø Profile-Specific Testing: Run tests under different profiles to validate layout variations (e.g., Sales vs. Support layouts).

Ø Conditional Logic:

IF ${UserProfile} = "System Admin"

VerifyField "AnnualRevenue"

ELSE

VerifyFieldNotVisible "AnnualRevenue"

35. What is the Rework Spiral in Salesforce testing?

Ø Issue: Generic tools (e.g., Selenium) require constant test updates due to Salesforce’s thrice-yearly releases.

Ø Provar’s Solution: Metadata-driven tests automatically adapt to UI changes, breaking the spiral (e.g., no locator updates post-Summer ‘24 release).

36. How to test Salesforce integrations (e.g., ERP systems)?

Ø End-to-End Workflow:

§ Create an Order in Salesforce → Validate ERP sync via database query → Confirm invoice generation.

Ø API Middleware: Test middleware (e.g., MuleSoft) using Provar’s REST steps to ensure data transformation accuracy.

37. How to use Provar with Salesforce DX?

Ø Scratch Org Sync: Use sfdx force:source:pull to sync scratch org metadata into Provar.

Ø Pipeline Integration: Add Provar CLI commands to sfdx-project.json for automated testing in CI/CD.

38. How to validate Field-Level Security (FLS) in Provar?

Ø VerifyFieldAccess Step:

§ VerifyFieldAccess Field="Account.AnnualRevenue" Readable=false Editable=false for a read-only field.

Ø Profile Testing: Execute tests under restricted profiles to ensure FLS compliance.

39. Explain Provar’s version control integration.

Ø Git Integration: Store Provar test XML files in Git repositories for versioning.

Ø Collaboration: Use branches to manage test updates (e.g., feature/login-tests).

40. How to test Salesforce Einstein Analytics?

Ø Dashboard Interaction: Use Provar to click dashboard filters and validate rendered charts.

Ø API Validation: Execute SAQL queries via REST API steps to confirm dataset accuracy.

Provar- Basic Automation Testing Questions :Part 1

2025-04-12T16:22:00.009+05:30

Part 1: Basic Provar Automation Testing Questions

1. What is Provar, and why is it used in Salesforce testing?
Provar is a specialized test automation tool designed explicitly for Salesforce ecosystems. It leverages Salesforce metadata to automate end-to-end testing, ensuring seamless integration with Salesforce features like Lightning, Apex, and dynamic UI elements. Provar is ideal for regression testing, cross-browser validation, CI/CD pipeline integration, and handling Salesforce-specific challenges such as dynamic IDs and Shadow DOM.

2. What are Provar’s core features?

o Salesforce Metadata Integration: Directly interacts with Salesforce metadata for stable test automation.

o No-Code/Low-Code Interface: User-friendly drag-and-drop test builder for creating tests without programming.

o Metadata-Driven Testing: Uses Salesforce objects, fields, and relationships to auto-generate reliable locators.

o CI/CD Integration: Supports Jenkins, Azure DevOps, and other tools for continuous testing.

o Cross-Browser Testing: Compatible with Chrome, Firefox, Safari, and Edge.

o Advanced Reporting: Generates detailed HTML/PDF reports with screenshots and logs.

o Dynamic Element Handling: NitroX technology manages Lightning Web Components and dynamic content.

3. How does Provar differ from Selenium?

o Salesforce Optimization: Provar is built for Salesforce, while Selenium is a generic web automation tool.

o Metadata Awareness: Provar auto-generates locators using Salesforce metadata, reducing maintenance. Selenium relies on XPath/CSS, which breaks with UI changes.

o Ease of Use: Provar offers no-code/low-code scripting, whereas Selenium requires programming skills (e.g., Java, Python).

o Native Salesforce Support: Provar handles Salesforce-specific features like Lightning, Sandbox refreshes, and security models out-of-the-box.

4. How do you create a Provar project?

o Open Provar Desktop.

o Navigate to File > New > Provar Project.

o Name the project and select a storage location.

o Connect to a Salesforce org by entering credentials (Sandbox/Production).

o Configure metadata filters (e.g., objects, pages) and generate an object repository.

o Define test environments (e.g., UAT, Production) for execution.

5. What is a “Provar Test Case”?
A Provar Test Case is a sequence of automated steps to validate Salesforce functionality. It includes actions (e.g., clicking buttons), inputs (e.g., form data), and assertions (e.g., verifying records). Test cases are stored in XML format, enabling version control and reusability across scenarios.

6. How do you record a test in Provar?

o Launch the Test Builder in Provar Desktop.

o Click Start Recording and navigate to the Salesforce page to test.

o Perform UI actions (e.g., input text, click buttons); Provar captures these as test steps.

o Add validations (e.g., check for success messages) using built-in assertions.

o Save the test case with a descriptive name.

7. What are Test Suites in Provar?
Test Suites group related test cases (e.g., smoke tests, regression packs) for bulk execution. They enable organized testing, parallel runs, and environment-specific configurations (e.g., data setups).

8. How to parameterize tests in Provar?

o Use variables like ${Username} in test steps.

o Link external data sources (Excel, CSV) to inject multiple datasets.

o Configure runtime parameters (e.g., environment URLs) via configuration files.

o Example: A login test can iterate over different user roles using a CSV file.

9. What is data-driven testing in Provar?
Data-driven testing executes a test case repeatedly with varying input data. Provar enables this by binding external files (Excel/CSV) to test cases. For example, testing lead creation with 100+ combinations of names, emails, and regions.

10. How to test Salesforce Lightning with Provar?

o Enable Lightning Experience in Provar’s Salesforce connection settings.

o Use Provar’s Lightning locators (auto-generated via metadata) instead of classic UI selectors.

o Leverage NitroX to handle dynamic Lightning Web Components and Shadow DOM elements.

11. What is Provar Manager?
Provar Manager is a web-based platform for centralized test management. It organizes test cases, schedules executions, tracks results, and integrates with Jira for defect tracking.

12. Does Provar support non-Salesforce systems?
Yes, Provar integrates with:

o Email: Validates emails via Gmail/Outlook.

o Databases: Runs SQL queries on Oracle, MySQL.

o APIs: Calls REST/SOAP APIs for end-to-end workflows.

13. How does Provar reduce test flakiness?

o Metadata-Based Locators: Resilient to UI changes (e.g., Salesforce updates).

o Auto-Waiting: Intelligently waits for page loads and dynamic elements.

o Retry Mechanisms: Re-attempts failed steps due to transient issues (e.g., network latency).

14. What training resources does Provar offer?

o Provar University: Free online courses, certifications, and tutorials.

o Consulting Services: Customized training for teams on frameworks and best practices.

o Community Forums: Peer support and knowledge-sharing.

15. Explain Provar’s Proof of Value (POV) approach.
The POV is a tailored demonstration where Provar’s team builds automated tests aligned with a client’s critical workflows (e.g., Opportunity-to-Cash). It showcases ROI through reduced testing time, defect rates, and maintenance efforts.

16. How does Provar handle Salesforce releases?
Provar’s team actively updates the tool to align with Salesforce’s thrice-yearly releases. This includes compatibility with new features (e.g., Lightning Web Components) and preemptive updates to minimize test failures post-upgrade

17. What are Provar’s synchronization mechanisms?
Provar employs robust synchronization strategies to handle Salesforce’s dynamic UI elements and ensure test reliability:

· Automatic Waits: Provar intelligently waits for page loads, AJAX calls, and Lightning component rendering before interacting with elements, similar to implicit waits but optimized for Salesforce’s architecture.

· Explicit WaitForElement Steps: Testers can add conditional waits (e.g., wait for an element to be clickable or visible) to handle asynchronous processes or slow-loading components.

· NitroX Technology: Provar’s proprietary engine manages dynamic IDs, iframes, and Shadow DOM elements in Lightning Web Components, reducing flakiness.

· Retry Logic: Automatically reattempts failed actions (e.g., clicks, inputs) caused by transient issues like network latency or temporary UI glitches.

18. How to validate Salesforce reports in Provar?
Provar validates Salesforce reports through a combination of UI and API interactions:

· Execute Report: Use the Run Report step to trigger the report execution within the Salesforce UI or via the API.

· Data Assertions:

o VerifyRows: Check if the report returns the expected number of rows (e.g., confirm a pipeline report displays 10 opportunities).

o VerifyColumns: Validate column values (e.g., ensure "Total Sales" in a summary report matches a predefined value).

· Filter Validation: Use assertions to verify report filters are applied correctly (e.g., a date filter only shows Q4 results).

19. What is polymorphism in Provar testing?
Polymorphism in Provar enables test cases to dynamically adapt to different execution contexts without code changes:

· User Roles: Run the same test under different profiles (e.g., Admin vs. Standard User) to validate permission sets and field-level security.

· Languages/Localization: Execute tests in multiple languages to ensure UI labels, date formats, and currency symbols render correctly.

· Environments: Reuse tests across Sandbox, UAT, and Production by parameterizing org-specific URLs or credentials.

20. How to debug a failing Provar test?
Provar provides tools to diagnose and resolve test failures efficiently:

· Live Inspection Tool: Pause test execution to inspect UI elements in real-time, validate locators, and troubleshoot misaligned identifiers.

· Debug Logs:

o Execution Logs: Step-by-step logs with screenshots and error messages (accessible via Test Results in Provar Desktop).

o System Logs: Detailed technical logs for diagnosing environment or integration issues.

· Metadata Sync: Refresh Salesforce metadata in Provar to ensure locators align with the latest UI changes (e.g., after a Salesforce release).

· Breakpoints: Insert breakpoints in the Test Builder to pause execution at specific steps and inspect variables or UI state.

Page Object Model(POM) Automation Testing Framework

2025-02-23T13:29:00.002+05:30

Page Object Model(POM) Automation Testing Framework

This blog post will guide you through setting up a robust Automation testing framework for Salesforce using Selenium, TestNG, and ExtentReports. This framework incorporates best practices for maintainability, reusability, and reporting.

1. Project Directory Structure

Before diving into the code, let's establish the project's directory structure:

SalesforceTesting/

├── src/

│ ├── main/

│ │ └── java/

│ │ └── com/salesforce/

│ │ ├── base/

│ │ │ ├── BaseTest.java

│ │ │ └── DriverManager.java

│ │ ├── common/

│ │ │ └── Utility.java

│ │ ├── listeners/

│ │ │ └── TestListener.java

│ │ ├── pages/

│ │ │ └── LoginPage.java

│ │ ├── reporting/

│ │ │ └── ExtentReportManager.java

│ │ └── repository/

│ │ └── LocatorsRepository.java

│ └── test/

│ └── java/

│ └── com/salesforce/

│ └── tests/

│ └── LoginTest.java

├── pom.xml

├── testng.xml

└── run.bat

2. Core Dependencies (pom.xml)

First, let's define the necessary dependencies in your pom.xml file:

<project xmlns="http://maven.apache.org/POM/4.0.0"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>com.automationCodes</groupId>

<artifactId>pageobject</artifactId>

<version>1.0-SNAPSHOT</version>

<selenium.version>4.16.1</selenium.version>

<testng.version>7.8.0</testng.version>

<webdrivermanager.version>5.6.3</webdrivermanager.version>

<extentreports.version>5.1.1</extentreports.version>

<commons.io.version>2.13.0</commons.io.version>

</properties>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-java</artifactId>

<version>${selenium.version}</version>

</dependency>

<groupId>org.testng</groupId>

<artifactId>testng</artifactId>

<version>${testng.version}</version>

</dependency>

<groupId>io.github.bonigarcia</groupId>

<artifactId>webdrivermanager</artifactId>

<version>${webdrivermanager.version}</version>

</dependency>

<groupId>com.aventstack</groupId>

<artifactId>extentreports</artifactId>

<version>${extentreports.version}</version>

</dependency>

<groupId>commons-io</groupId>

<artifactId>commons-io</artifactId>

<version>${commons.io.version}</version>

</dependency>

</dependencies>

<build>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-surefire-plugin</artifactId>

<suiteXmlFile>testng.xml</suiteXmlFile>

</suiteXmlFiles>

</configuration>

</plugin>

</plugins>

</build>

</project>

Explanation:

Ø Selenium: For browser automation.

Ø TestNG: Testing framework for structuring and running tests.

Ø WebDriverManager: Simplifies WebDriver setup (no more manual driver downloads!).

Ø ExtentReports: For generating detailed and visually appealing test reports.

Ø Apache Commons IO: Useful utility for file operations.

3. Base Components

3.1. BaseTest.java

This abstract class handles the setup and teardown of your test environment.

package com.salesforce.base;

import org.openqa.selenium.WebDriver;

import org.testng.annotations.AfterSuite;

import org.testng.annotations.BeforeSuite;

import org.testng.annotations.Listeners;

@Listeners(com.salesforce.listeners.TestListener.class)

public abstract class BaseTest {

protected WebDriver driver;

@BeforeSuite

public void setUpSuite() {

// Initialize ExtentReports

com.salesforce.reporting.ExtentReportManager.getInstance();

}

@BeforeSuite

public void launchSalesforce() {

driver = DriverManager.getDriver();

String salesforceUrl = "https://login.salesforce.com"; // Salesforce login URL

driver.get(salesforceUrl);

System.out.println("Launched Salesforce URL: " + salesforceUrl);

}

@AfterSuite

public void tearDownSuite() {

// Quit the driver and flush ExtentReports

DriverManager.quitDriver();

com.salesforce.reporting.ExtentReportManager.getInstance().flush();

}

Explanation:

Ø @Listeners(com.salesforce.listeners.TestListener.class): This tells TestNG to use our custom TestListener class to handle test events (start, success, failure, etc.).

Ø setUpSuite(): Initializes ExtentReports before the test suite begins.

Ø launchSalesforce(): Launches the Salesforce login page using the DriverManager.

Ø tearDownSuite(): Quits the WebDriver and flushes ExtentReports after the test suite completes.

3.2. DriverManager.java

This class manages the WebDriver instance. It ensures that only one WebDriver instance exists per test run and provides a centralized way to access and quit the driver.

package com.salesforce.base;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.edge.EdgeDriver;

import org.openqa.selenium.firefox.FirefoxDriver;

import io.github.bonigarcia.wdm.WebDriverManager;

public class DriverManager {

private static WebDriver driver;

private DriverManager() {}

public static WebDriver getDriver() {

if(driver == null) {

String browser = System.getProperty("browser", "chrome");

switch(browser.toLowerCase()) {

case "chrome":

WebDriverManager.chromedriver().setup();

driver = new ChromeDriver();

break;

case "firefox":

WebDriverManager.firefoxdriver().setup();

driver = new FirefoxDriver();

break;

case "edge":

WebDriverManager.edgedriver().setup();

driver = new EdgeDriver();

break;

default:

throw new IllegalStateException("Invalid browser: " + browser);

}

driver.manage().window().maximize();

}

return driver;

}

public static void quitDriver() {

if(driver != null) {

driver.quit();

driver = null;

}

Explanation:

Ø getDriver(): This method implements the Singleton pattern. It checks if a WebDriver instance already exists. If not, it creates one based on the browser specified in the browser system property (defaults to Chrome). It uses WebDriverManager to automatically download and set up the appropriate driver.

Ø quitDriver(): This method closes the WebDriver instance and sets the driver variable to null.

Utility Class

4.1 Utility.java

This class provides reusable utility methods for common Selenium actions.

Code Implementation

package com.salesforce.common;

import org.openqa.selenium.*;

import org.openqa.selenium.interactions.Actions;

import org.openqa.selenium.support.ui.ExpectedConditions;

import org.openqa.selenium.support.ui.WebDriverWait;

import com.salesforce.base.DriverManager;

import java.time.Duration;

import java.util.List;

import java.util.stream.Collectors;

public class Utility {

private static final int TIMEOUT = 10;

public static WebElement waitForElement(By locator) {

return new WebDriverWait(DriverManager.getDriver(), Duration.ofSeconds(TIMEOUT))

.until(ExpectedConditions.presenceOfElementLocated(locator));

}

public static void openPage(String url) {

DriverManager.getDriver().get(url);

}

public static void click(By locator) {

waitForElement(locator).click();

}

public static void sendKeys(By locator, String text) {

WebElement element = waitForElement(locator);

element.clear();

element.sendKeys(text);

}

public static void doubleClick(By locator) {

new Actions(DriverManager.getDriver())

.doubleClick(waitForElement(locator))

.perform();

}

public static void switchToWindow(int index) {

List<String> windows = DriverManager.getDriver().getWindowHandles().stream().collect(Collectors.toList());

DriverManager.getDriver().switchTo().window(windows.get(index));

}

public static boolean isElementPresent(By locator) {

try {

waitForElement(locator);

return true;

} catch(TimeoutException e) {

return false;

}

Explanation

Ø waitForElement(By locator): Waits for an element to be present on the page before interacting with it. This helps prevent flaky tests caused by timing issues.

Ø click(By locator): Clicks on an element.

Ø sendKeys(By locator, String text): Enters text into an element. It first clears the field to ensure no previous text remains.

Ø doubleClick(By locator): Double clicks on an element.

Ø switchToWindow(int index): Switches to a specific window based on its index.

Ø isElementPresent(By locator): Checks if an element is present on the page.

Test Listener

5.1 TestListener.java

This class implements the ITestListener interface and is used to capture test execution events and log them to the ExtentReports.

Code Implementation

package com.salesforce.listeners;

import com.aventstack.extentreports.ExtentTest;

import com.aventstack.extentreports.Status;

import com.salesforce.base.DriverManager;

import com.salesforce.reporting.ExtentReportManager;

import org.testng.ITestContext;

import org.testng.ITestListener;

import org.testng.ITestResult;

public class TestListener implements ITestListener {

private static ThreadLocal<ExtentTest> extentTest = new ThreadLocal<>();

@Override

public void onTestStart(ITestResult result) {

ExtentTest test = ExtentReportManager.getInstance()

.createTest(result.getMethod().getMethodName());

extentTest.set(test);

}

@Override

public void onTestSuccess(ITestResult result) {

extentTest.get().log(Status.PASS, "Test Passed");

}

@Override

public void onTestFailure(ITestResult result) {

extentTest.get().log(Status.FAIL, "Test Failed");

extentTest.get().fail(result.getThrowable());

}

@Override

public void onTestSkipped(ITestResult result) {

extentTest.get().log(Status.SKIP, "Test Skipped");

}

@Override

public void onFinish(ITestContext context) {

ExtentReportManager.getInstance().flush();

DriverManager.quitDriver();

}

Explanation

Ø onTestStart(ITestResult result): This method is called when a test starts. It creates a new ExtentTest instance and associates it with the current thread.

Ø onTestSuccess(ITestResult result): Logs a "Pass" status to the Extent report when a test passes.

Ø onTestFailure(ITestResult result): Logs a "Fail" status and the exception to the Extent report when a test fails.

Ø onTestSkipped(ITestResult result): Logs a "Skip" status to the Extent report when a test is skipped.

Ø onFinish(ITestContext context): Flushes the Extent report and quits the WebDriver after all tests in the suite have finished.

Page Object Model (POM)

6.1 LoginPage.java

This class represents the Salesforce login page. It encapsulates the locators and actions related to the login page.

Code Implementation

package com.salesforce.pages;

import com.salesforce.common.Utility;

import com.salesforce.repository.LocatorsRepository;

public class LoginPage {

public void enterUsername(String username) {

Utility.sendKeys(LocatorsRepository.LoginPage.USERNAME, username);

}

public void enterPassword(String password) {

Utility.sendKeys(LocatorsRepository.LoginPage.PASSWORD, password);

}

public void clickLogin() {

Utility.click(LocatorsRepository.LoginPage.LOGIN_BUTTON);

}

public boolean isErrorMessageDisplayed() {

return Utility.isElementPresent(LocatorsRepository.LoginPage.ERROR_MESSAGE);

}

public void loginWithCredentials(String username, String password) {

enterUsername(username);

enterPassword(password);

clickLogin();

}

Explanation

Ø Each method in this class represents an action that can be performed on the login page (e.g., enterUsername, enterPassword, clickLogin).

Ø The locators for the elements on the login page are stored in the LocatorsRepository class.

6.2. LocatorsRepository.java

This class stores all the locators for the elements in the application.

package com.salesforce.repository;

import org.openqa.selenium.By;

public class LocatorsRepository {

public static class LoginPage {

public static final By USERNAME = By.xpath("//input[@id='username']");

public static final By PASSWORD = By.xpath("//input[@id='password']");

public static final By LOGIN_BUTTON = By.xpath("//input[@id='Login']");

public static final By ERROR_MESSAGE = By.xpath("//div[@id='error']");

public static final By REMEMBER_ME = By.xpath("//input[@id='rememberUn']");

}

Explanation:

Ø This class uses nested static classes to group locators by page. This makes it easier to find and maintain locators.

Ø All locators are defined as public static final By variables. This ensures that they are constants and can be accessed from anywhere in the project.

7. Reporting

7.1. ExtentReportManager.java

This class manages the ExtentReports instance.

package com.salesforce.reporting;

import com.aventstack.extentreports.ExtentReports;

import com.aventstack.extentreports.reporter.ExtentSparkReporter;

import java.text.SimpleDateFormat;

import java.util.Date;

public class ExtentReportManager {

private static ExtentReports extent;

public static ExtentReports getInstance() {

if (extent == null) {

String timestamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());

String reportName = "Salesforce-Test-Report-" + timestamp + ".html";

ExtentSparkReporter reporter = new ExtentSparkReporter("reports/" + reportName);

extent = new ExtentReports();

extent.attachReporter(reporter);

extent.setSystemInfo("Created By", "AutomationCodes by Ankit Vijay");

extent.setSystemInfo("env", "qa");

extent.setSystemInfo("Browser", System.getProperty("browser", "chrome"));

}

return extent;

}

Explanation:

Ø getInstance(): This method implements the Singleton pattern to ensure that only one ExtentReports instance exists.

Ø It creates a new ExtentSparkReporter instance and attaches it to the ExtentReports instance. The report is saved to the reports directory with a timestamped filename.

Ø It sets system information such as the environment and browser.

8. Test Cases

8.1. LoginTest.java

This class contains the test cases for the login page.

package com.salesforce.tests;

import com.salesforce.base.BaseTest;

import com.salesforce.pages.LoginPage;

import static org.testng.Assert.assertTrue;

import org.testng.annotations.Test;

public class LoginTest extends BaseTest {

@Test

public void testInvalidLogin() {

LoginPage loginPage = new LoginPage();

loginPage.loginWithCredentials("invalid@user.com", "wrongpass");

assertTrue(loginPage.isErrorMessageDisplayed());

}

@Test

public void testValidLogin() {

LoginPage loginPage = new LoginPage();

loginPage.loginWithCredentials("valid@user.com", "correctpass");

// Add validation for successful login

}

Explanation:

Ø testInvalidLogin(): This test case attempts to log in with invalid credentials and verifies that the error message is displayed.

Ø testValidLogin(): This test case attempts to log in with valid credentials. You would need to add validation to confirm a successful login (e.g., check for the presence of an element on the home page).

9. TestNG Configuration (testng.xml)

This file configures the TestNG test suite.

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">

</listeners>

</classes>

</test>

</suite>

Explanation:

Ø <suite>: Defines the test suite.

Ø <parameter>: Defines parameters that can be used in the tests (e.g., browser, environment).

Ø <listeners>: Specifies the listeners to use for the test suite.

Ø <test>: Defines a test.

Ø <classes>: Specifies the classes to include in the test.

10. Execution Script (run.bat)

This batch script simplifies the execution of the tests.

@echo off

REM Navigate to the project directory (if needed)

REM cd C:\Users\anvij\eclipse-workspace_Test\pageobject

REM Run Maven command to execute tests

mvn clean test

REM Pause to see the output

Pause

Explanation:

Ø mvn clean test: This command tells Maven to clean the project (remove previously built files) and then run the tests.

Ø pause: This command pauses the script after the tests have finished, so you can see the output.

Playwright Automation Framework for Salesforce

2025-02-23T11:06:00.005+05:30

Playwright Automation Framework for Salesforce

This blog will guide you through setting up a Playwright automation framework using JavaScript and Page Object Model (POM) for Salesforce login and account creation.

📂 Project Structure

project-root/

├── config/

│ └── constants.js

├── pages/

│ ├── LoginPage.js

│ ├── HomePage.js

│ └── AccountsPage.js

├── tests/

│ └── salesforce.test.js

├── playwright.config.js

└── package.json

⚙ Configuration Files

config/constants.js

module.exports = {

SALESFORCE: {

LOGIN_URL: 'https://login.salesforce.com/',

USERNAME: 'your_username',

PASSWORD: 'your_password',

ACCOUNT_NAME: 'Test Account'

}

};

playwright.config.js

const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({

timeout: 30000,

retries: 1,

reporter: 'list',

use: {

headless: false,

viewport: { width: 1280, height: 720 },

actionTimeout: 10000,

ignoreHTTPSErrors: true,

screenshot: 'only-on-failure',

video: 'retain-on-failure'

projects: [

{

use: { browserName: 'chromium' }

}

]

});

🏗 Page Objects (POM)

pages/LoginPage.js

class LoginPage {

constructor(page) {

this.page = page;

this.usernameInput = '#username';

this.passwordInput = '#password';

this.loginButton = '#Login';

}

async navigateToLogin() {

await this.page.goto(process.env.SALESFORCE_LOGIN_URL);

}

async login(username, password) {

await this.page.fill(this.usernameInput, username);

await this.page.fill(this.passwordInput, password);

await this.page.click(this.loginButton);

await this.page.waitForLoadState('networkidle');

}

module.exports = LoginPage;

pages/HomePage.js

class HomePage {

constructor(page) {

this.page = page;

this.appLauncher = 'button[aria-label="App Launcher"]';

this.viewAllLink = 'button[aria-label="View All Applications"]';

this.salesLink = 'a[data-label="Sales"]';

}

async navigateToSales() {

await this.page.click(this.appLauncher);

await this.page.click(this.viewAllLink);

await this.page.click(this.salesLink);

await this.page.waitForLoadState('networkidle');

}

module.exports = HomePage;

pages/AccountsPage.js

class AccountsPage {

constructor(page) {

this.page = page;

this.newButton = 'div[title="New"]';

this.accountNameInput = 'label:has-text("Account Name") + div input';

this.saveButton = 'button[title="Save"]';

}

async createNewAccount(accountName) {

await this.page.click(this.newButton);

await this.page.fill(this.accountNameInput, accountName);

await this.page.click(this.saveButton);

await this.page.waitForLoadState('networkidle');

}

async getToastMessage() {

return this.page.innerText('span[data-aura-class="forceActionsText"]');

}

module.exports = AccountsPage;

🧪 Test Implementation

tests/salesforce.test.js

const { test, expect } = require('@playwright/test');

const { SALESFORCE } = require('../config/constants');

const LoginPage = require('../pages/LoginPage');

const HomePage = require('../pages/HomePage');

const AccountsPage = require('../pages/AccountsPage');

test.describe('Salesforce Account Creation', () => {

let page;

let loginPage;

let homePage;

let accountsPage;

test.beforeAll(async ({ browser }) => {

page = await browser.newPage();

loginPage = new LoginPage(page);

homePage = new HomePage(page);

accountsPage = new AccountsPage(page);

});

test.beforeEach(async () => {

await loginPage.navigateToLogin();

await loginPage.login(SALESFORCE.USERNAME, SALESFORCE.PASSWORD);

});

test('Create new account in Salesforce', async () => {

await homePage.navigateToSales();

await accountsPage.createNewAccount(SALESFORCE.ACCOUNT_NAME);

const toastMessage = await accountsPage.getToastMessage();

expect(toastMessage).toContain('was created');

});

test.afterAll(async () => {

await page.close();

});

🛠 Setup Instructions

Install dependencies

npm init -y

npm install @playwright/test

Set up environment variables in package.json

{

"scripts": {

"test": "SALESFORCE_LOGIN_URL=https://login.salesforce.com npx playwright test"

}

Run tests

npm test

🔥 Important Notes:

Ø Replace placeholder credentials in constants.js with actual Salesforce credentials.

Ø Adjust selectors according to your Salesforce instance's DOM structure.

Ø Handle 2FA/MFA if required by your organization.

Ø Add proper waits and error handling based on network speed and Salesforce responsiveness.

🚀 Consider Adding:

Ø Screenshot on failure

Ø Retry mechanisms

Ø Test data cleanup

Ø Environment-specific configurations

This implementation provides a scalable POM structure that you can extend for other Salesforce objects and functionalities.

Playwright with JavaScript Commands -Part3

2025-02-22T18:51:00.008+05:30

Advanced Playwright concepts with detailed explanations and syntax examples:

19. Debugging Tools

Playwright Inspector

npx playwright test –debug

What it does: Launches a visual debugger that lets you:

Pause/resume test execution
Step through commands one-by-one
Inspect elements, network requests, and console logs

Usage: Run this in your terminal to debug specific tests

Trace Viewer

// playwright.config.js

module.exports = {

use: {

trace: 'on-first-retry',

}

};

What it does: Records test execution data (screenshots, network logs)
Syntax explanation:

trace: 'on-first-retry': Records only when tests fail and retry
Other options: 'on' (always), 'off' (never)

View traces:

npx playwright show-trace trace.zip

20. Custom Reporters

HTML Reporter Configuration

// playwright.config.js

module.exports = {

reporter: [

['html', { outputFolder: 'my-reports' }]

]

};

What it does: Generates visual HTML test reports
Key files:

index.html: Test overview
Individual test traces and screenshots

21. CI/CD Integration

GitHub Actions Example

yaml

on: [push]

jobs:

test:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v4

- uses: actions/setup-node@v3

with: { node-version: 18 }

- run: npm ci

- run: npx playwright install --with-deps

- run: npx playwright test

Step breakdown:

1. Check out repository code

2. Set up Node.js environment

3. Install project dependencies

4. Install Playwright browsers

5. Run tests

22. Page Object Model (POM)

Implementation Example

// models/LoginPage.js

class LoginPage {

constructor(page) {

this.page = page;

this.username = page.locator('#username');

this.password = page.locator('#password');

}

async login(user, pass) {

await this.username.fill(user);

await this.password.fill(pass);

await this.page.click('text=Submit');

}

// test.spec.js

test('Login test', async ({ page }) => {

const loginPage = new LoginPage(page);

await loginPage.login('admin', 'password');

});

Benefits:

Reusable components
Cleaner test files
Easier maintenance

23. Visual Testing

Screenshot Comparison

await expect(page).toHaveScreenshot('homepage.png');

What it does: Compares current page with baseline screenshot
First run: Creates reference screenshot
Subsequent runs: Detects visual differences
Configure in playwright.config.js:

expect: {

toHaveScreenshot: {

maxDiffPixels: 1000, // Allowable differences

}

24. Authentication Strategies

Reuse Login State

// Save authentication state

const storage = await context.storageState({ path: 'auth.json' });

// Reuse in new tests

const context = await browser.newContext({

storageState: 'auth.json'

});

How it works: Stores cookies/localStorage
Benefits: Avoid repeated login steps

25. Parallel Execution

// playwright.config.js

module.exports = {

workers: 4 // Number of parallel threads

};

CLI override:

npx playwright test --workers 4

Best practice: Use 50-75% of available CPU cores

26. Environment Variables

Using .env Files

// .env

BASE_URL=https://staging.example.com

// test.spec.js

require('dotenv').config();

await page.goto(process.env.BASE_URL);

Setup:

npm install dotenv

27. Mocking Time

await page.addInitScript(() => {

Date.now = () => new Date('2024-01-01').getTime();

});

What it does: Overrides system time for tests
Use cases:

Testing time-sensitive features
Bypassing expiration dates

28. Error Handling

try {

await page.click('button#submit');

} catch (error) {

console.log('Submit failed:', error);

await page.screenshot('error.png');

}

Key concepts:

try: Attempt to execute code
catch: Handle errors gracefully
Always include cleanup steps in error handling

Key Javascript Concepts

1. ES6 Classes (Used in Page Objects):

class LoginPage {

constructor(page) { ... }

}

2. Modules:

// Export

module.exports = { LoginPage };

// Import

const { LoginPage } = require('./models/LoginPage');

3. Async/Await:

async function test() {

await page.click();

}

Where to Go Next:

1. Start with basic test scenarios

2. Gradually incorporate advanced features

3. Explore Playwright's official documentation

Playwright with JavaScript Commands -Part2

2025-02-22T18:40:00.001+05:30

9. Network Interception

Block Resources Syntax

await page.route('**/*.{png,jpg,css}', route => route.abort());

Ø page.route(): Intercept network requests

Ø **/*.{png,jpg,css}: Pattern to match URLs ending with these extensions

Ø route.abort(): Blocks the request from proceeding

Mock API Response Example

await page.route('**/api/user', async route => {

await route.fulfill({

status: 200,

contentType: 'application/json',

body: JSON.stringify({ name: 'Mock User' }),

});

Ø route.fulfill(): Sends a custom response

Ø Useful for testing edge cases without real API dependencies

10. Handling Frames

Frame Access Syntax

const frame = page.frame({ name: 'login-frame' });

Ø page.frame(): Finds frame by name/URL

Ø Frames are separate HTML documents embedded in the page

11. File Operations

Upload Syntax

await page.setInputFiles('input[type="file"]', 'path/to/file.txt');

Ø setInputFiles(): Simulates file selection dialog

Ø Can handle multiple files: ['file1.txt', 'file2.txt']

12. Multiple Tabs

Popup Handling Example

const [popup] = await Promise.all([

page.waitForEvent('popup'),

page.click('a[target="_blank"]'),

]);

Ø waitForEvent(): Listens for new browser tab/window

Ø Promise.all: Handles concurrent actions

13. Test Runner

Test Structure

test('Login Test', async ({ page }) => {

// Test steps

});

Ø test: Defines a test case

Ø expect: Assertion library for validations

14. Assertions

Element Visibility Check

await expect(page.locator('.status')).toBeVisible();

Ø Auto-waits for element to appear

Ø Other assertions: toBeChecked(), toHaveValue()

15. Cookies

Cookie Setup

await context.addCookies([{

value: '123',

url: 'https://example.com',

}]);

Ø Cookies are set at context level

Ø Persist across pages in same context

16. Device Emulation

Mobile Setup

const context = await browser.newContext({

...devices['iPhone 13'],

locale: 'en-US'

});

Ø devices: Pre-configured mobile profiles

Ø Emulates screen size, user agent, touch support

17. Advanced Context

Proxy Configuration

const browser = await chromium.launch({

proxy: { server: 'http://myproxy:3128' }

});

Ø Routes all browser traffic through proxy

Ø Can add authentication: username: 'user', password: 'pass'

18. Best Practices

Page Object Model Example

// login-page.js

export class LoginPage {

constructor(page) {

this.page = page;

this.username = page.locator('#username');

}

async login(user) {

await this.username.fill(user);

}

Key Javascript Concepts

1. Async/Await: Used for all Playwright operations

async function test() {

await page.click();

}

2. Destructuring:

const { test, expect } = require('@playwright/test');

3. Arrow Functions:

page.route('**/*', (route) => route.continue());

Playwright with JavaScript Commands -Part1

2025-02-22T18:24:00.003+05:30

1. Browser & Context Management

Import Statement

const { chromium } = require('playwright');

Ø require('playwright'): Imports the Playwright library

Ø { chromium }: Destructures the Chromium browser object from the library

Ø This is required to use any Playwright browser functions

Launch Browser

const browser = await chromium.launch({

headless: false,

slowMo: 100,

});

Ø chromium.launch(): Starts a Chromium browser instance

Ø await: Pauses execution until browser launches (required for async operations)

Ø Options:

o headless: false: Makes browser visible (default is true/invisible)

o slowMo: 100: Adds 100ms delay between actions (helps see what's happening)

2. Create Browser Context

const context = await browser.newContext();

const page = await context.newPage();

Ø browser.newContext(): Creates an isolated environment (like a private browsing session)

Ø context.newPage(): Opens a new tab/page in the browser

Ø Each context can have multiple pages (tabs)

3. Close Browser

await browser.close();

Ø Closes the browser and all associated pages/contexts

Ø Always include this at the end of your scripts to clean up resources

4. Page Navigation

Go to URL

await page.goto('https://example.com');

Ø goto(): Navigates to the specified URL

Ø Similar to typing an address in the browser's address bar

5. Element Interaction

Click Element

await page.click('button#submit');

Ø click(): Simulates a mouse click

Ø 'button#submit': CSS selector meaning "button element with id='submit'"

Type Text

await page.fill('#username', 'john_doe');

Ø fill(): Types text into an input field

Ø First argument is selector, second is text to input

Ø Automatically clears existing content

6. Element Selectors

CSS Selector Example

await page.click('.button-primary');

Ø .button-primary: Selects elements with class="button-primary"

Ø Similar to how CSS styles target elements

Text Selector

await page.click('text=Login');

Ø text=Login: Finds elements containing exact text "Login"

Ø Case-insensitive by default

7. Waiting for Elements

Explicit Wait

await page.waitForSelector('.result');

Ø Pauses execution until element matching .result appears

Ø Prevents errors from interacting with elements that haven't loaded

8. Handling Alerts

page.on('dialog', async dialog => {

await dialog.accept();

});

Ø page.on('dialog'): Listens for popup dialogs

Ø dialog.accept(): Clicks "OK" in confirmation dialogs

Ø Must be set up before the dialog appears

9. Screenshots

await page.screenshot({ path: 'screenshot.png' });

Ø Takes a picture of the current page view

Ø path: Specifies where to save the image file

Ø fullPage: true option captures entire scrollable page

10. Closing Resources

await page.close();

Ø Closes the current tab

Ø Recommended to close pages/contexts when you're done with them

Key JavaScript Concepts in These Examples:

1. async/await: Handles asynchronous operations (like network requests)

2. const: Declares variables that won't be reassigned

3. Arrow functions () => {}: Compact function syntax

4. Objects { key: value }: Used for passing options

5. Promises: Underlying mechanism for most Playwright operations

2024-08-24T19:29:00.008+05:30

Why Choose TestNG Over JUnit?

When choosing a unit testing framework for Java, both TestNG and JUnit are prominent options. Each framework has its strengths, but TestNG often stands out for its advanced features. This comparison will help you understand why TestNG might be the better choice for your testing needs.

Key Differences Between TestNG and JUnit

Feature	JUnit	TestNG
Annotations	Basic annotations: `@Test`, `@Before`, `@After`	Advanced annotations: `@BeforeGroups`, `@AfterGroups`, `@DataProvider`
Parallel Execution	No parallel test execution support	Supports parallel test execution
Grouping Tests	No built-in support for grouping tests	Allows grouping of tests
Dependency Testing	No support for dependent tests	Supports dependency testing
Test Suite Configuration	Uses `@RunWith` and `@Suite`	XML configuration for test suites
Reporting	Basic reporting capabilities	Built-in HTML reporting
Ease of Use	More setup required for complex tests	Easier setup and configuration

Detailed Comparison with Examples

1. Annotation

JUnit Example:
`import org.junit.Before; import org.junit.Test; public class JUnitExample { @Before public void setUp() { // Code to execute before each test } @Test public void testMethod() { // Test code } }`

TestNG Example:

`import org.testng.annotations.BeforeMethod; import org.testng.annotations.Test; public class TestNGExample { @BeforeMethod public void setUp() { // Code to execute before each test } @Test public void testMethod() { // Test code } }`

Advantage: TestNG offers a wider range of annotations, providing more granular control over test execution.2. Parallel Execution
JUnit lacks support for parallel test execution, which can be a limitation for large test suites.
TestNG Example for Parallel Execution:

XML

`<suite name="ParallelTests" parallel="methods" thread-count="2"> <test name="Test1"> <classes> <class name="com.example.TestClass1"/> </classes> </test> <test name="Test2"> <classes> <class name="com.example.TestClass2"/> </classes> </test> </suite>`

Advantage: TestNG supports parallel test execution, reducing the overall execution time for large test suites.3. Grouping Tests
JUnit does not support grouping tests natively.
TestNG Example for Grouping:

`import org.testng.annotations.Test; public class GroupingExample { @Test(groups = {"smoke"}) public void testMethod1() { // Test code } @Test(groups = {"regression"}) public void testMethod2() { // Test code } }`

Execution in XML:

xml
`<suite name="Suite"> <test name="SmokeTests"> <groups> <run> <include name="smoke"/> </run> </groups> <classes> <class name="com.example.GroupingExample"/> </classes> </test> </suite>`

Advantage: TestNG allows grouping of tests, which helps in organizing and managing large test suites efficiently.4. Dependency Testing
JUnit lacks support for testing dependencies.
TestNG Example for Dependency Testing:

`import org.testng.annotations.Test; public class DependencyExample { @Test public void testMethod1() { // Test code } @Test(dependsOnMethods = {"testMethod1"}) public void testMethod2() { // This test will run only if testMethod1 passes } }`

Advantage: TestNG enables defining dependencies between tests, ensuring correct test execution order.5. Reporting
JUnit requires additional tools or plugins for detailed reporting.
TestNG Reporting: TestNG automatically generates comprehensive HTML reports after test execution, detailing passed, failed, and skipped tests.

Conclusion

While JUnit is a well-established framework with a strong community and historical significance, TestNG offers advanced features like parallel execution, test grouping, and dependency management, making it a compelling choice for modern testing scenarios. Depending on your project's needs and the complexity of your test cases, TestNG's extended capabilities could provide significant advantages.