DEV Community: Mangai Ram

The Hidden Problem in Contact Centers: Broken Customer Journeys (And How Playwright Fixed It)

Mangai Ram — Wed, 18 Mar 2026 10:50:19 +0000

Let’s talk about a problem most teams don’t notice… until customers start complaining.

Not server crashes.

Not downtime.

👉 Broken customer journeys.

😬 The Real Issue: Everything Works… But Nothing Works Together

In a modern cloud contact center software, multiple systems are involved:

CRM
Ticketing tools
Call handling systems
Chat interfaces
Payment or collections systems

Individually?

✅ They work perfectly.

But together?

❌ Things break in between.

⚠️ A Real Scenario

Here’s something that actually happens in many support teams:

Customer raises a query via chat
Ticket gets created
Agent calls the customer
After the call → status should update to “Resolved”

But instead 👇

Ticket stays “Open”
Follow-up gets triggered again
Customer gets duplicate calls
Agent gets confused

👉 Result: Bad customer experience + wasted effort

🤯 Why This Happens

Because most testing focuses on:

Individual features
APIs
UI components

But not on:

🔴 End-to-end user journeys across systems

And that’s where the gap is.

🛠️ Enter Playwright

Playwright is an end-to-end testing framework that allows teams to test applications the way real users interact with them.

Instead of testing isolated components, you can validate the entire workflow across systems.

🔍 How Playwright Helped Fix This

✅ 1. End-to-End Workflow Testing

We simulated the full journey:

Chat initiated
Ticket created
Agent action
Status update

All in one automated test.

👉 This exposed exactly where the workflow was breaking.

✅ 2. Cross-System Validation

Playwright helped validate:

UI updates
Backend responses
Data consistency across systems

No more guessing where things failed.

✅ 3. Reliable Automation (No Flaky Tests)

With features like:

Auto-waiting
Network interception
Stable selectors

Tests became consistent and reliable.

✅ 4. Faster Debugging

Playwright provides:

Screenshots
Videos
Detailed logs

So developers can quickly identify and fix issues.

📊 The Impact

After implementing Playwright:

❌ Duplicate follow-ups reduced
✅ Ticket statuses updated correctly
⏱️ Debugging time decreased
😊 Customer experience improved

💡 What Changed?

Before:

“Each system works fine, so the issue must be random.”

After:

“We can clearly see where the journey breaks—and fix it fast.”

🚀 Final Thought

Most teams focus on testing features.

But users don’t experience features.

👉 They experience journeys.

And when that journey breaks, it impacts trust.

🔥 Key Takeaway

If you're only testing:

APIs
UI components
Individual modules

You're missing the bigger picture.

Start testing like a real user.

That’s where end-to-end tools like Playwright make a real difference.

How to Stop Selenium Tests from Clicking Before the Page is Ready

Mangai Ram — Thu, 06 Nov 2025 11:30:00 +0000

Selenium: Using Explicit Waits for Spinners, Pop-ups & Loading Screens

Why This Matters

One of the most common problems in Selenium testing is:
Your test tries to click a button, type in a field, or read data before the page finishes loading.

This leads to errors like:

ElementNotInteractableException
NoSuchElementException
StaleElementReferenceException

In simple words → Selenium is faster than your website.

The browser is still loading, but Selenium is already trying to interact.

That’s where Explicit Waits help.

What Are Explicit Waits?

An Explicit Wait tells Selenium:

“Wait until a certain condition is true before moving to the next step.”

You control what to wait for and how long to wait.

Unlike general fixed waits (like Thread.sleep(5000)),
explicit waits are smart waits — they wait only until needed, not longer.

Example: Waiting for a Loading Spinner to Disappear

Many modern web apps show a spinner or loading animation while content loads.

Without Explicit Wait

driver.findElement(By.id("checkout")).click();

If spinner is still visible → test fails.

With Explicit Wait

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector(".spinner")));
driver.findElement(By.id("checkout")).click();

Now Selenium waits until the spinner disappears before clicking.

Example: Waiting for a Modal Popup to Appear

Sometimes you need to wait for something to show up.

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("login-modal")));

This ensures the modal is fully loaded before interacting.

Waiting for Network / AJAX Load

Some pages update data in the background (no full page refresh).
Instead of checking time manually, we wait until the page appears “stable.”

new WebDriverWait(driver, Duration.ofSeconds(15))
        .until(webDriver -> ((JavascriptExecutor) webDriver)
        .executeScript("return document.readyState").equals("complete"));

This says:

Wait until page loading is finished.

Why Explicit Waits Are Better Than `Thread.sleep()`

Thread.sleep()	Explicit Wait
Always waits full time	Waits only as long as needed
Slows tests	Makes tests faster
Doesn’t care if page is ready	Responds to real conditions
Not reliable	Very reliable

So instead of blindly waiting → Selenium waits intelligently.

When to Use Explicit Waits

Use explicit waits when your app has:

Loading spinners
Popup messages
Slow dropdowns
AJAX-based content loads
React/Angular dynamic UI updates

Basically → Anytime the page takes time to update.

Best Practices

Good Practice	Why
Wait for disappearing elements	Prevent premature clicks
Wait for clickable element	Ensures stability
Wait for text/value change	Validates real-time updates
Avoid long timeouts	Speed + accuracy

Real-Life Example

Before waits:
Testers complained that tests passed sometimes and failed sometimes (flaky tests).

After using explicit waits:
Stable results, fewer failures, and faster execution.

This is one of the biggest improvements QA leads notice.

In Simple Words

Websites don’t load instantly.
Selenium is very fast.
If Selenium tries to interact before the page is ready → the test fails.
Explicit waits fix this by making Selenium pause only until the page is ready.

FAQs

Q1: Do waits slow down tests?

No. They actually make tests faster because Selenium doesn’t have to retry failed steps.

Q2: Should we remove Thread.sleep() completely?

Yes — use explicit waits instead. They are smarter and more reliable.

Q3: Is it hard to convert to explicit waits?

No — just replace direct actions with wait-and-action patterns.

Summary
Using explicit waits makes Selenium automation much more stable.
You avoid flaky tests, reduce failures, and let Selenium interact only when the page is ready.

Still Selenium rule the Automation industry?

Playwright Interview Questions and Answers (My Personal Experience)

Mangai Ram — Thu, 06 Nov 2025 10:32:27 +0000

Interview Series — JavaScript Fundamentals for Test Automation

Q1. What is the difference between `slice()` and `substring()` in JavaScript?

Both slice() and substring() are used to extract part of a string. At first, they look like they work the same — but they behave differently when negative values or reversed start–end values are involved.

Let’s use one example string:

let str = "Playwright";

Basic Extraction

console.log(str.slice(0, 4));     // "Play"
console.log(str.substring(0, 4)); // "Play"

In normal cases, both give the same output.

Key Difference 1: Handling Negative Indices

console.log(str.slice(-5));       // "right"
console.log(str.substring(-5));   // "Playwright"

Behavior	Result
`slice(-5)` → Counts from end	✅ Returns `"right"`
`substring(-5)` → Converts `-5` to `0`	❌ Returns entire string

So:

slice() understands negative indexing
substring() ignores negative indexing

Key Difference 2: If Start > End

console.log(str.slice(5, 2));      // "" (empty string)
console.log(str.substring(5, 2));  // "ayw"

Method	Behavior
`slice()` returns empty when start > end	Keeps order exactly
`substring()` automatically swaps the values	Makes it work anyway

Comparison Table

Feature	`slice(start, end)`	`substring(start, end)`
Negative index support	✅ Yes (counts from end)	❌ No (converted to 0)
If start > end	❌ Returns empty	✅ Automatically swaps values
Works on	Strings + Arrays	Strings only
Best Use	Flexible slicing	Safe string extraction when values are uncertain

Internal Explanation (Simple Words)

slice() adjusts negative index by adding it to string length.
substring() treats any negative value as 0, and auto-reorders parameters.

This is why:

str.slice(-5) → last 5 chars  
str.substring(-5) → treats -5 as 0 → returns whole string

How to Answer in an Interview (Simple Version)

"slice() supports negative indexing and keeps start/end order.
substring() does not support negative indexing and swaps start and end if needed.
So slice() is more flexible, while substring() is safer for simple extractions."

Real QA Usage (Why Testers Should Know This)

When parsing API responses, log messages, or dynamic text:

Use slice() when taking values from end of string
Use substring() when taking values from beginning range safely

Example: Extract last 4 digits of an ID:

id.slice(-4);

Quick Summary (Easy to Remember)

Ask Yourself	Which One to Use
Need to slice from the end?	✅ Use `slice()`
Index values might be reversed?	✅ Use `substring()`
Working with arrays?	✅ Use `slice()`
Simple safe string cut?	✅ Use `substring()`

AI Testing Tool : How AI Fixes Broken Test Scripts Automatically

Mangai Ram — Wed, 05 Nov 2025 12:30:00 +0000

When people test websites using tools like Selenium or Playwright, their scripts often break whenever the website changes — for example, if a button name or layout changes.

This blog shows how GenAI can now repair those broken tests on its own — without anyone opening the script to fix it manually.

It’s about the new wave of “smart automation,” where AI helps testers save time and reduce repetitive work.

The Common Problem

Imagine this:
You’ve written a test that clicks the “Login” button.
But one day, the developer changes that button to say “Sign In.”

Now your test fails — because it’s still looking for “Login.”

Normally, a tester must:

Find the error,

Open the test code, and

Update it manually.

When there are hundreds of tests, this becomes a nightmare.

How AI Changes This

AI tools are now smart enough to “guess” what changed.
They learn what your website looks like — the layout, colors, labels, and positions of elements.

So when something changes, AI can say:

“This looks like the new version of that button you used before. I’ll use it automatically.”

And just like that — the test heals itself and continues running.

That’s why it’s called “self-healing automation.”

How AI Knows What to Fix

Here’s how it works (in simple steps):

Observe: AI watches all your tests and remembers patterns — like “this button always appears next to the password field.”

Compare: When the test fails, AI checks what changed on the page.

Predict: It uses logic and past data to find the new version of that element.

Heal: It fixes the broken part temporarily or updates it automatically for you.

Tools That Already Do This

Testron.ai- Fixes broken locators automatically in Selenium or Playwright.
Testim.io-Uses machine learning to find new elements when names change.
Mabl-Predicts failures and repairs test paths before they break.
Functionize-Lets testers describe tests in plain English; AI writes the code.

These tools don’t replace your existing test setups — they add intelligence on top of them.

Real-World Example

Before AI, at least 10–15 of them broke daily due to small website updates.
After adding AI-assisted healing, the number of failures dropped by 70%.

That means testers spent more time writing new tests instead of fixing old ones.

Why It’s a Game-Changer

✅ Saves time — less manual fixing.
✅ Learns automatically — gets smarter after every test run.
✅ Prevents test breaks — adapts to website changes.
✅ Integrates easily — works with existing tools like Selenium and Playwright.

Simple Analogy

Think of it like Face ID on your phone.
Even if you get a haircut or wear glasses, your phone still recognizes you.

Similarly, AI-powered testing recognizes buttons and fields even if they look slightly different after an update.

In Short

Old tests break when a website changes.

AI can now detect and fix those broken parts on its own.

You get smarter, self-repairing automation that saves huge time.

It’s the next step after Selenium and Playwright — the future of testing.

🔗 If You Missed the Previous Blogs

👉 Part A: Stop Your Selenium Tests from Breaking — Use data-testids

👉 Part B: How Playwright Finds Buttons Smartly with Roles & TestIds

Together, these three blogs show how automation is evolving:

Selenium (Manual Fixing) → Playwright (Smart Locators) → AI (Self-Healing)

❓ FAQs

Q1: Do I need to know AI or coding for this?
No — the tools handle it automatically. You just connect them to your existing tests.

Q2: Does AI replace human testers?
Not at all. It only removes repetitive fixing work so testers can focus on creative testing.

Q3: Can I use this with my current Selenium or Playwright setup?
Yes — these tools sit on top of your current system.

Q4: Is it reliable?
Mostly yes. AI uses “confidence levels” to ensure accuracy and shows a report of what it changed.

✅ Final Summary

AI in automation testing is like having an assistant who keeps your tests running smoothly, even when your website changes.

It saves time, prevents frustration, and keeps your testing pipeline strong — 24/7.

How Playwright Finds Buttons and Text More Smartly Than Selenium

Mangai Ram — Tue, 04 Nov 2025 12:30:00 +0000

This post talks about another testing tool called Playwright.

Do you want to learn playwright contact testleaf

Think of Playwright as a modern version of Selenium — it does the same job (checking whether a website works) but uses smarter ways to find things on the screen.

Instead of depending on long, fragile paths like Selenium used to, Playwright looks for meaningful labels such as:

the role of an element (like button, textbox, link)

or a special tag (called a testId) that developers can add.

These new ways make tests more stable, readable, and future-proof.

Simple Example

Let’s imagine a “Login” button again.

With Selenium, a tester might have written:

// old fragile way
page.$("//div[3]/button").click();

If the page design changes, this line fails.

With Playwright, you can write:

// smart new way
await page.getByRole('button', { name: 'Login' }).click();

Here Playwright automatically finds the visible button that says “Login.”
Even if the developer changes its position or layout, your test still works.

Why It’s Better

Fewer failures when the website changes.

Easy to read — the code looks almost like plain English.

No extra waiting — Playwright automatically waits until the button is clickable.

Works with modern websites built in React, Angular, or Vue.

What is getByRole() and getByTestId()?

getByRole() looks for elements based on their function — for example:

page.getByRole('textbox', { name: 'Email' });

means “Find the text box called Email.”

getByTestId() uses a tag added by developers:

<input data-testid="email-input" />

and in Playwright:

page.getByTestId('email-input').fill('user@testleaf.com');

It’s like giving every element a name tag that never changes.

Mixing Both for Best Results

Many testers use both together:

const loginBtn = page.getByRole('button', { name: /login/i });
await expect(loginBtn).toBeEnabled();
await loginBtn.click();

This makes tests extra strong and human-friendly.

Auto-Wait Feature

A big win with Playwright is that it waits automatically for things to load or become clickable — no need to tell it to “wait 5 seconds.”
That means fewer timing errors and faster scripts.

Migration from Selenium to Playwright:

| Selenium Way                           | Playwright Way                                |
| -------------------------------------- | --------------------------------------------- |
| `By.xpath("//button[text()='Login']")` | `page.getByRole('button', { name: 'Login' })` |
| `By.id("submit")`                      | `page.getByTestId('submit')`                  |

In Short

Playwright is faster and more intelligent.

It finds buttons and fields using roles or tags, not messy paths.

Tests are cleaner, shorter, and more reliable.

Great for any company using modern web apps.

A Simple Trick to Fix Broken Selenium Tests: "data-testids"

Mangai Ram — Mon, 03 Nov 2025 12:23:41 +0000

This article talks about how software testers find and click buttons, links, or text on a website automatically using a tool called Selenium.

But there’s a problem — sometimes those automatic tests break when the website’s design changes even slightly.

The blog teaches how to avoid that by using something called data-testid — a small label that developers can add to buttons or fields to make them easy for the test scripts to find every time.

Simple Example

Let’s say you have a website with a “Login” button.
Normally, a tester would write something like:

“Click the 3rd button inside that box.”

But if the page layout changes, that 3rd button might move — and the test breaks.

Instead, developers can add a label:

Now the test can just say:

“Click the button with label login-button.”

No matter how the design changes, the test still works.

What You Learn

Old-style testing used complicated “paths” (called XPaths) to find elements.

These paths often break when the website changes.

Using data-testids makes your tests much more stable and future-proof.

It also helps testers and developers work together better, since both agree on the labels to use.

Real-World Example

Imagine an e-commerce site with 100 buttons and forms.
Earlier, every small UI change broke many test scripts.
After switching to data-testids, testers didn’t have to fix broken tests every day — saving hours of time.

In Short

Old method = fragile, keeps breaking

New method (data-testid) = strong, stable, easy to manage

Helps testers find website elements easily, even after design changes

Makes the testing process faster and more reliable

How I helped 200+ manual testers move into automation testing

Mangai Ram — Tue, 28 Oct 2025 06:44:31 +0000

Body:
When I started mentoring testers, I noticed one pattern — most were stuck not because of a lack of knowledge, but because they didn’t know where to start.

So, we created a roadmap that worked — from manual to automation, step by step.

Here’s what it includes:
✅ The right order to learn tools (Selenium → Playwright → API → AI-assisted testing)
✅ How to make your resume reflect automation skills
✅ How to build small projects that attract recruiters

If you’re exploring the same path, I’ve shared the detailed guide here 👉https://www.testleaf.com/blog/career-roadmap-for-functional-test-automation-developers/

Playwright Interview Questions and Answers (My Personal Experience)

Mangai Ram — Wed, 22 Oct 2025 10:25:56 +0000

If you’re preparing for a QA automation interview, mastering Playwright can help you stand out from the crowd. This 2025 updated guide covers the most common and advanced Playwright interview questions — including real-world coding scenarios, differences from Selenium, and hands-on best practices.

Whether you’re a beginner or an experienced automation engineer, this article will help you gain clarity and confidence for your next interview.

Beginner-Level Playwright Interview Questions

What is Playwright?

Answer:
Playwright is a modern end-to-end testing framework developed by Microsoft, designed to automate browsers (Chromium, Firefox, WebKit).
It supports cross-browser, cross-platform, and multi-language testing (JS/TS, Python, Java, .NET).

How do you handle waiting / synchronization issues in Playwright?

Answer:
Playwright auto-waits for elements to become actionable before performing any action.
Still, you can use:

await page.waitForSelector('#submit');
await expect(page.locator('#success')).toBeVisible();
await page.waitForLoadState('networkidle');

Types:

Auto-wait → built-in for actions like .click(), .fill()
Explicit wait → page.waitForSelector(), expect(locator).toBeVisible()
No implicit waits like Selenium (Playwright avoids flakiness by design).

Other Recommended Reads: api automation interview questions

How do you run tests in parallel or in multiple browsers/devices/contexts?

Answer:

Parallel Execution: Each test runs in an isolated worker.
Multiple Browsers/Devices: Defined via projects in playwright.config.ts

export default defineConfig({

fullyParallel: true,

workers: 4,

projects: [

{ name: 'chromium', use: { browserName: 'chromium' } },

{ name: 'firefox', use: { browserName: 'firefox' } },

{ name: 'webkit', use: { browserName: 'webkit' } },

});

How do you run Playwright tests headlessly vs headed?

Answer:

Headless: For CI/CD environments (default).
Headed: For debugging or local runs.

npx playwright test --headed
npx playwright test --headless

Or in config:

use: { headless: false }

How do you manage environment configuration (dev/stage/prod)?

Answer:

Use .env files or JSON config files.
Access variables via process.env.

Example:

BASE_URL=https://staging.example.com
export default defineConfig({
use: { baseURL: process.env.BASE_URL }
});

What makes a “good API”? What best practices do you follow?

Answer:
A good API is consistent, predictable, secure, and well-versioned.

Best Practices:

Proper HTTP verbs (GET, POST, PUT, DELETE)
Correct status codes (200, 201, 400, 404, 500)
Consistent naming conventions
Pagination & filtering
Versioning (/v1/users)
Proper authentication (OAuth/JWT)
Meaningful error messages

How do you handle authentication & authorization in APIs?

Answer:

Use JWT tokens, API keys, or OAuth2.
Fetch token via a login request, reuse it across tests.

const api = await request.newContext({
extraHTTPHeaders: { Authorization: Bearer ${token} }
});

How do you ensure your test automation code is maintainable and scalable?

Answer:

Use Page Object Model (POM).
Centralize locators and common logic.
Use fixtures for setup/teardown.
Parameterize environment/config.
Implement clear naming conventions and folder structure.
Continuous refactoring, DRY principle, and TypeScript typings.

How do you build custom fixtures in Playwright?

Answer:
Fixtures let you share setup/teardown logic.

import { test as base } from '@playwright/test';

type MyFixtures = { loginPage: LoginPage };
const test = base.extend({
loginPage: async ({ page }, use) => {
const login = new LoginPage(page);
await use(login);
},
});

Intermediate-Level Playwright Interview Questions

What is the difference between browser, context, and page in Playwright? Object Description Browser Top-level instance (e.g., Chromium). Context Isolated incognito-like session within a browser. Page Represents a single tab in a browser context.

How do you select elements? What are locators?

Answer:
Locators are Playwright’s recommended way to find elements.
They are lazy-evaluated and auto-wait.

const loginBtn = page.locator('button:has-text("Login")');
await loginBtn.click();

What is a fixture in Playwright Test?

Answer:
A fixture is a reusable setup resource (like browser context, page, API client).
Playwright provides built-in fixtures like page, context, request.
You can extend them for custom object

How do you handle file uploads or downloads?

Upload:

await page.setInputFiles('input[type="file"]', 'tests/data/sample.pdf');

Download:

const [download] = await Promise.all([
page.waitForEvent('download'),
page.click('text=Download File'),
]);
await download.saveAs('downloads/file.pdf');

Difference between page.locator(selector).click() and page.click(selector) Method Behavior page.locator().click() Uses Locator API (auto-wait, retries). ✅ page.click()

Executes immediately (can be

flaky). ⚠️

Additional Resources: product based companies in bangalore

How to assert something in Playwright Test?

Use expect() API:

await expect(page).toHaveURL(/dashboard/);
await expect(locator).toBeVisible();
await expect(locator).toHaveText('Welcome');

Difference between page.waitForLoadState('networkidle') and waitForNavigation() Method Purpose waitForLoadState('networkidle') Waits for no network connections for 500ms. waitForNavigation() Waits for a navigation event triggered by an action.

Use waitForLoadState when waiting for background requests, not full navigation.

How to use test hooks and where to place them?

Hooks manage setup/cleanup:

test.beforeAll(...)
test.beforeEach(...)
test.afterEach(...)
test.afterAll(...)

Placed inside test.describe() or globally in test files.
Best practice: use hooks for test data setup and teardown.

How do you generate and publish HTML / Allure / custom reports?

HTML report:

npx playwright test --reporter=html

Allure report:

npm install --save-dev allure-playwright
npx playwright test --reporter=allure-playwright

Publishing in GitHub Actions:

run: npx playwright test --reporter=html
uses: actions/upload-artifact@v4 with: name: report path: playwright-report/

Can Playwright be used for API testing? How?

Yes.
Playwright provides APIRequestContext to perform REST API testing.

const api = await request.newContext();
const res = await api.get('https://api.example.com/users');
expect(res.status()).toBe(200);

Advanced Playwright Interview Questions for Experienced Testers

How do you create an API request context with authentication?

const api = await request.newContext({
baseURL: 'https://api.example.com',
extraHTTPHeaders: {
Authorization: Bearer ${token},
'Content-Type': 'application/json',
},
});

How do you chain API calls (use one response to feed another)?

const createUser = await api.post('/users', { data: { name: 'John' } });
const id = (await createUser.json()).id;
const getUser = await api.get(/users/${id});
expect(getUser.status()).toBe(200);

What is Playwright’s APIRequestContext and how is it used for API testing?

It represents an isolated API session that can:

Send REST requests
Store cookies, headers, and auth data
Reuse between tests

How do you architect a Playwright test suite for a large codebase?

Best practice structure:

├── pages/
├── api/
├── fixtures/
└── utils/
├── tests/
│ ├── ui/
│ └── api/
├── playwright.config.ts
└── package.json

Principles:

Reusable page & API classes
Configurable environments
Modular utilities & fixtures
Parallel-safe test data setup

How to parallelize tests safely when they share resources? Avoid shared mutable data. Use unique test data per worker (uuid, timestamp). Isolate environments using fixtures. Use locks or queues only when unavoidable (e.g., shared DB).

Basic JS: What’s the difference between == and ===? Operator Meaning == Equality with type coercion === Strict equality, no type conversion

Example:

'5' == 5 // true
'5' === 5 // false

26 : How do you handle dropdowns with and in Playwright?

Answer:
In Playwright, you handle dropdowns using the selectOption() method. It allows selecting an option by value, label, or index. For multi-select dropdowns, you can pass an array of values.

Example:

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

test('Select dropdown option', async ({ page }) => {
await page.goto('https://example.com');

// Select by value
await page.selectOption('#country', 'ca'); // Canada

// Select by label
await page.selectOption('#country', { label: 'United Kingdom' });

// Select by index
await page.selectOption('#country', { index: 0 }); // United States

// Verify selection
const selectedValue = await page.$eval('#country', el => (el as HTMLSelectElement).value);
expect(selectedValue).toBe('us');
});

Key Points:

Works only with elements.
Can select by value, label, or index.
Supports multi-select: await page.selectOption('#multi', ['us', 'uk']).
Playwright automatically handles the dropdown; no manual click needed.

27 : How do you handle a dropdown that dynamically loads options based on previous selection?

Answer:

First, select the parent dropdown option using selectOption().
Wait for the child dropdown to be populated using page.waitForSelector() or locator.waitFor().
Then, select the desired child option.

Example:

await page.selectOption('#country', 'us');
await page.waitForSelector('#state option:not(:empty)');
await page.selectOption('#state', 'ca'); // Select California

28: Difference between var, let, and const
Feature var let const
Scope Function-scoped Block-scoped Block-scoped
Redeclaration Allowed Not allowed Not allowed
Re-assignment Allowed Allowed Not allowed (must be initialized)
Hoisting Yes (initialized as undefined) Yes (temporal dead zone) Yes (temporal dead zone)
Use case Legacy code Modern variables Constants / immutable references

Key points:

Use let for variables that change.
Use const for values that shouldn’t change.
Avoid var in modern JavaScript due to scoping issues.

29: How do Promises to differ from callbacks?
Feature Callbacks Promises
Syntax Function passed as argument Object with .then() / .catch()
Handling async Nested or “callback hell” Chainable, avoids nested callbacks
Error handling Needs try/catch inside callback Built-in .catch() for errors
Execution Executes immediately when function runs Executes asynchronously and resolves later

Example:

// Callback
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
console.log(newResult);
});
});

// Promise
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => console.log(newResult))
.catch(error => console.error(error));

Summary for Interview:

Promises provide better readability and error handling than callbacks.
Helps avoid “callback hell” for complex async code.

30: What is Hoisting?

Definition:
Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope during compilation.

Key Points:

Only declarations are hoisted, not initializations.
var variables are hoisted with value undefined.
let and const are hoisted but in a temporal dead zone (TDZ) until initialization.
Function declarations are fully hoisted, but function expressions are not.

Example:

console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError
let b = 20;

foo(); // Works
function foo() { console.log('Hello'); }

bar(); // Error
const bar = function() { console.log('Hi'); }

Playwright vs Selenium — Key Differences
Feature Playwright Selenium
Auto-waiting ✅ Built-in ❌ Manual waits
Browser Contexts ✅ Yes ❌ Needs multiple drivers
Network Mocking ✅ Easy ⚠️ Limited
Speed ⚡ Fast (CDP protocol) 🐢 Slower (HTTP JSON wire)
API Testing ✅ Built-in ❌ External tools needed

💡 Pro Tip: Prefer page.locator() over page.click() for more reliable element handling.

Bonus: Real-Time Playwright Coding Questions
Write a Playwright script to log into a website and verify the title.
How do you capture screenshots and videos in Playwright?
Demonstrate API testing with Playwright using APIRequestContext.
How do you handle multiple tabs and pop-ups?

Playwright Framework Best Practices
Use Page Object Model (POM) for scalability.
Integrate with CI/CD tools like Jenkins or GitHub Actions.
Implement test tagging for selective execution.
Maintain reusable test data and environment configs.

Playwright Interview Preparation Tips

✅ Practice automation challenges on GitHub repositories.

✅ Review Playwright’s official documentation weekly.

✅ Mock interviews help improve confidence.

✅ Learn Playwright with real projects — not just syntax.

Conclusion: How to Prepare for a Playwright Interview

Playwright is redefining automation with speed, reliability, and built-in testing features. Whether you’re transitioning from Selenium or starting fresh, understanding these questions and concepts will make you interview-ready.

If you want hands-on mastery, explore a Playwright course online that blends practical frameworks and interview guidance — the key to building your automation career in 2025.

FAQs

Q1. What is Playwright used for?

Playwright is used for end-to-end web automation testing across browsers and devices.

Q2. Is Playwright better than Selenium?

Yes. Playwright offers faster execution, auto-waiting, and API testing support.

Q3. What are the most asked Playwright topics in interviews?

Locators, waits, fixtures, POM, API testing, and Playwright vs Selenium.

Use Case: Simulating a Payment Gateway Timeout with Playwright

Mangai Ram — Tue, 19 Aug 2025 09:34:45 +0000

Problem

During testing, the payment flow needed to be validated for failure scenarios like gateway timeout. But the actual payment service was managed by a third-party provider, and modifying or slowing it down for testing was not possible due to compliance and contractual restrictions.

Challenge

Couldn’t directly trigger timeouts in the real payment system.

Needed to ensure the application displayed the correct error messages, handled retries, and logged the failure properly.

Manually waiting for rare real-time outages was not practical.

Solution (with Playwright)

Using Playwright’s network mocking capability, the payment API call was intercepted and programmed to:

Simulate a 408 timeout response.

Delay the response beyond the configured threshold.

Return a controlled failure payload for consistency across tests.

This way, the timeout scenario could be reproduced on-demand without touching the live payment gateway.

Outcome

Application’s error handling and retry logic were successfully validated.

Saved significant time by avoiding dependency on external payment provider outages.

Enabled QA team to cover edge cases that are critical for user trust and compliance.

Would like you to know more use case related to Playwright , one of my mentor trained this in Testleaf .

you want to learn Playwright with me or you need playwright training reach me .

Why I Switched to Playwright? ans: Playwright Assertions

Mangai Ram — Tue, 22 Jul 2025 05:53:25 +0000

I didn’t switch to Playwright just because it’s the “new cool tool.”

I switched because I was tired of writing flaky tests that passed locally and failed on CI.

Selenium, for all its legacy strengths, often left me guessing:

Is the element visible yet?

Did the page fully load? Should I throw in a sleep() just to be safe?

That uncertainty wastes time. That’s where Playwright came in—and more specifically, its built-in assertions.

What hooked me first was auto-waiting.

Playwright’s expect() API waits for an element to meet a condition before throwing an error.

No more chaining complex waits or debugging why a test randomly fails in staging.

Whether I’m checking for toBeVisible(), toHaveText(), or even toHaveAttribute(), Playwright handles the timing internally.

It felt like the framework finally had my back.

Then came soft assertions. This was a game changer.

With Selenium, one failed assertion meant the whole test bailed out. But Playwright allows expect.

soft()—so I can validate multiple things and get a complete report of what failed. Especially in form validation or checkout flows, this saved me hours of reruns.

And the failure diagnostics? Chef’s kiss.

The error messages are clean, show expected vs received values, and I can trace test steps visually. It’s not just a failure—it’s a clue to a fix.

Switching to Playwright wasn’t about hype. It was about stability, clarity, and speed. The assertion engine alone made the move worth it.

If your tests are still a guessing game, you might want to give Playwright a try—not for the name, but for the confidence it brings to every single test.

Referred from my own written blog : Playwright Assertions Free Tutorial & Why It Matters

Selenium Quiz: Test Your Skills from Beginner to Pro

Mangai Ram — Fri, 14 Mar 2025 07:27:21 +0000

Selenium is one of the most widely used tools for web automation testing, and mastering it requires a strong understanding of its concepts, from basic to advanced levels. Whether you're a beginner, an intermediate, or a pro, testing your knowledge through quizzes is a great way to improve your skills.

In this article, we have curated three Selenium quiz questions, each representing a different difficulty level. Let’s see where you stand!

1️⃣ Beginner-Level Selenium Question

What is the purpose of Selenium WebDriver?

a) To perform manual testing

b) To automate web applications

c) To test mobile applications

d) To manage databases

✅ Answer: b) To automate web applications

💡 Explanation: Selenium WebDriver is primarily used to automate the interaction with web applications, enabling testers to perform browser-based UI tests efficiently.

2️⃣ Intermediate-Level Selenium Question

How can you handle dropdowns in Selenium WebDriver?

a) Using the click() method

b) Using the Select class in Selenium

c) Using JavaScriptExecutor only

d) Selenium does not support dropdown handling

✅ Answer: b) Using the Select class in Selenium

💡 Explanation: The Select class in Selenium is specifically designed for handling <select> dropdown elements. It allows you to select options by index, visible text, or value. Example:

Select dropdown = new Select(driver.findElement(By.id("dropdownID")));
dropdown.selectByVisibleText("Option1");

3️⃣ Pro-Level Selenium Question

What is the best approach to handle dynamically changing web elements in Selenium?

a) Use hardcoded waits (Thread.sleep())

b) Use explicit waits like WebDriverWait with ExpectedConditions

c) Refresh the page repeatedly until the element appears

d) Switch to a different browser

✅ Answer: b) Use explicit waits like WebDriverWait with ExpectedConditions

💡 Explanation: Web elements often take time to load due to AJAX calls or dynamic page updates. Using explicit waits ensures Selenium waits until the element is available before interacting with it. Example:

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("dynamicElement")));

Where Do You Stand?

0-1 correct answers: Time to start learning Selenium! 🚀
2 correct answers: You’re on the right track—keep practicing! 💡
3 correct answers: You’re a Selenium Pro! 🎯

Want more Selenium quizzes and automation tips? Stay tuned for our next article!

Would you like a full-length Selenium quiz with more questions? Let me know! 😊

Learn more about SW testing frameworks

Mangai Ram — Sat, 02 Nov 2024 11:54:57 +0000

Introduction

In the realm of software testing courses, Selenium stands as a pivotal technology, often debated whether it should be classified as a testing framework or a tool. This distinction is crucial for professionals looking to harness its capabilities effectively in their testing workflows.

Defining Selenium

Selenium is primarily known as an open-source automation tool used for testing web applications across different browsers and platforms. It provides a suite of tools that enable developers and testers to automate web browsers on various operating systems.

Selenium as a Testing Framework

Key Features and Functionality

Selenium offers a robust framework for automating web applications. It includes:

WebDriver: Allows interaction with web elements and simulates user actions.
IDE(Integrated Development Environment): A prototyping tool for building test scripts quickly.
Grid: Enables simultaneous execution of tests across multiple machines and browsers.

Advantages of Using Selenium as a Framework

Flexibility: Supports multiple programming languages like Java, Python, and C#, offering developers the flexibility to choose based on their project requirements.
Community Support: Being open-source, Selenium benefits from a large community that contributes plugins, extensions, and continuous improvements.

Application Scenarios
Example Use Case: E-commerce Testing

Consider a scenario where an e-commerce website needs rigorous testing across different browsers and devices to ensure functionality and user experience consistency. Selenium's framework capabilities allow automation of repetitive test cases, reducing manual effort and time.

graph TD;
    A[E-commerce Website] --> B[Selenium WebDriver];
    B --> C[Multiple Browsers];
    B --> D[Multiple Platforms];

Selenium as a Testing Tool

Tool-Specific Features

Record and Playback: Selenium IDE offers a record-and-playback feature for quick test script generation.
Cross-Browser Testing: Ensures compatibility across major browsers such as Chrome, Firefox, and Safari.
Parallel Testing: Selenium Grid facilitates parallel execution of tests, optimizing testing time significantly.

Advantages of Using Selenium as a Tool

Ease of Use: Selenium's intuitive interfaces like IDE and WebDriver simplify the process of creating and executing test scripts.
Integration: Integrates seamlessly with Continuous Integration (CI) tools like Jenkins and TeamCity, enhancing automation pipelines.

Application Scenarios

*Example Use Case: Regression Testing
*
In a software development lifecycle, regression testing ensures that recent code changes haven't adversely affected existing features. Selenium's testing tool capabilities allow for swift execution of regression test suites, validating system stability and functionality post-updates.

graph TD;
    A[Software Update] --> B[Regression Test Suite];
    B --> C[Selenium Test Execution];

Conclusion:

In conclusion, whether viewed as a testing framework or a tool, Selenium's versatility and robust features empower developers and testers alike in automating web application testing. Its framework components provide structure and flexibility, while its tool functionalities offer ease of use and scalability in testing efforts. Understanding these dual roles of Selenium is pivotal for leveraging its full potential in enhancing software quality and reliability across diverse web applications.

DEV Community: Mangai Ram

The Hidden Problem in Contact Centers: Broken Customer Journeys (And How Playwright Fixed It)

😬 The Real Issue: Everything Works… But Nothing Works Together

⚠️ A Real Scenario

🤯 Why This Happens

🛠️ Enter Playwright

🔍 How Playwright Helped Fix This

✅ 1. End-to-End Workflow Testing

✅ 2. Cross-System Validation

✅ 3. Reliable Automation (No Flaky Tests)

✅ 4. Faster Debugging

📊 The Impact

💡 What Changed?

🚀 Final Thought

🔥 Key Takeaway

How to Stop Selenium Tests from Clicking Before the Page is Ready

Selenium: Using Explicit Waits for Spinners, Pop-ups & Loading Screens

Why This Matters

What Are Explicit Waits?

Example: Waiting for a Loading Spinner to Disappear

Without Explicit Wait

With Explicit Wait

Example: Waiting for a Modal Popup to Appear

Waiting for Network / AJAX Load

Why Explicit Waits Are Better Than Thread.sleep()

When to Use Explicit Waits

Best Practices

Real-Life Example

In Simple Words

FAQs

Playwright Interview Questions and Answers (My Personal Experience)

Interview Series — JavaScript Fundamentals for Test Automation

Q1. What is the difference between slice() and substring() in JavaScript?

Basic Extraction

Key Difference 1: Handling Negative Indices

Key Difference 2: If Start > End

Comparison Table

Internal Explanation (Simple Words)

How to Answer in an Interview (Simple Version)

Real QA Usage (Why Testers Should Know This)

Related Interview Follow-Up Questions (Highly Asked)

Quick Summary (Easy to Remember)

AI Testing Tool : How AI Fixes Broken Test Scripts Automatically

The Common Problem

How AI Changes This

Why It’s a Game-Changer

Simple Analogy

✅ Final Summary

How Playwright Finds Buttons and Text More Smartly Than Selenium

Simple Example

Why It’s Better

Mixing Both for Best Results

Auto-Wait Feature

Migration from Selenium to Playwright:

In Short

A Simple Trick to Fix Broken Selenium Tests: "data-testids"

Simple Example

What You Learn

Real-World Example

In Short

How I helped 200+ manual testers move into automation testing

Playwright Interview Questions and Answers (My Personal Experience)

Use Case: Simulating a Payment Gateway Timeout with Playwright

Problem

Challenge

Solution (with Playwright)

Outcome

Why I Switched to Playwright? ans: Playwright Assertions

Selenium Quiz: Test Your Skills from Beginner to Pro

1️⃣ Beginner-Level Selenium Question

2️⃣ Intermediate-Level Selenium Question

3️⃣ Pro-Level Selenium Question

Where Do You Stand?

Learn more about SW testing frameworks

Introduction

Defining Selenium

Selenium as a Testing Framework

Key Features and Functionality

Advantages of Using Selenium as a Framework

Selenium as a Testing Tool

Why Explicit Waits Are Better Than `Thread.sleep()`

Q1. What is the difference between `slice()` and `substring()` in JavaScript?