Yogita Lad

Ever clicked a link in a web app and suddenly you're in a new tab or window?   That exact moment is where most automation tests go, “Wait, where did my browser go?” Well, not anymore. 😎   Today, I’m going to walk you through how to handle multiple tabs/windows using Playwright and yes, it’s way easier than you think! 🧪 The Real-Life Scenario While playing around with OrangeHRM's demo site(https://opensource-demo.orangehrmlive.com/), I noticed something interesting: There’s a link on the login page that says " OrangeHRM Website " — and when you click it… boom! New tab opens with the company's homepage. Perfect use case to try out multiple window handling in Playwright! 🧠 🚀 Warm-up: Managing Multiple Pages Manually First, let’s create two separate tabs and visit two different pages. Simple but useful! test ( 'Handle pages like a multitasking pro' , async () => { const browser = await chromium. launch (); const context = await browser. newCo...

When I first started dabbling in Playwright for automation testing, I was amazed by its power—but honestly, I was intimidated by debugging. Failed tests felt like cryptic puzzles. Why did that button click fail? Was it the DOM? The network? Then I discovered Playwright Trace Viewer, and it was like getting a magnifying glass to solve my test mysteries. This isn’t just a feature—it’s my trusty debugging sidekick. Here’s how I went from “What went wrong?” to “I’ve got this!” using Trace Viewer. ✨ What is Trace Viewer? Picture Trace Viewer as a time machine for your tests. It records everything—clicks, navigations, network calls, console logs, and even what the page looked like—and lets you rewind to spot exactly where things went off the rails. For someone new like me, this was mind-blowing. Here's what Trace Viewer helped me see: ✅ Every action—like a movie script of my test 🖼️ Screenshots that said “This is what the page looked like!” 🌐 Network logs that exposed API failures 📄 D...

When it comes to ensuring our web applications function flawlessly, testing is indispensable. An incredibly helpful aspect of testing is video capture, which allows us to replay test runs and diagnose issues more effectively. Playwright, a fantastic end-to-end testing library, makes this process super easy. In this blog, I’ll show you how to capture videos in Playwright, where they get stored, and how to customize the settings based on your project needs. 🧪 A Simple Login Test Let’s kick things off with a simple Playwright test for a login flow. Here's a test script that logs in to a demo site: const { test, expect } = require ( '@playwright/test' ); test ( 'capture video' , async ({ page }) => { await page. goto ( 'https://www.demoblaze.com/index.html' ); await page. getByRole ( 'link' , { name : 'Log in' }). click (); await page. locator ( '#loginusername' ). fill ( 'switch@example.com' ); await p...