When we start learning Playwright, most of us follow a simple flow: Write test Open terminal Run command → npx playwright test See the result on our machine This is an important starting point. It helps us understand: Playwright basics Locators and assertions Test execution flow 👉 But this is local execution only 👉 If tests only run on your laptop → automation is incomplete It depends on one machine, one person, one environment, and one manual action. If the test runs only

Learn how to refactor Playwright tests using the Page Object Model (POM). Build a scalable automation framework with reusable page classes, global setup, and cleaner test workflows.

In this tutorial, we explore Playwright reporting from the ground up—starting with console output, moving to the built-in HTML dashboard, and finally integrating Allure reporting for advanced test visualization. You’ll also learn how to capture screenshots, videos, and traces to debug failures in modern automation frameworks.

Introduction In the previous post , we introduced Playwright hooks . We used beforeAll  along with storageState  to solve an important real-world problem: avoiding repeated login before every test in a single spec file. Earlier, each test had to perform login steps as part of its workflow. This made the scripts longer, slower, and harder to maintain. By moving the login logic into beforeAll, we were able to authenticate once, save the session state, and reuse it across tests

In the previous lesson , we automated a complete purchase workflow on our DemoShop test store using Playwright. One of the key improvements we introduced was the beforeAll hook , where we logged in once and saved the authenticated session using Playwright’s storageState. This was an important step forward. Instead of logging in before every test, Playwright reused the saved authentication state. This made our tests faster, cleaner, and more efficient. We also organized the wo

In real-world automation, logging in before every test is inefficient and slows down execution. As tests grow, repeated login steps also make scripts harder to maintain and harder to scale. Playwright provides two important mechanisms to solve this problem: • Hooks  – to control setup and cleanup • storageState  – to save and reuse authentication In this post, we will use Playwright hooks together with storageState to perform a login once and reuse the authenticated session a

When we write our first Playwright test, we usually see this structure: import { test, expect } from "@playwright/test"; test("Open homepage", async ({ page }) => {   await page.goto("https://qa-cart.com/"); } ); Here, the page object is not something we created manually. Playwright automatically provides it using a concept called fixtures . A fixture is a ready-to-use object that Playwright provides to your test, so you don’t have to manually launch the browser, create sessi

One of the biggest advantages of Playwright is its auto-wait feature , which makes tests more reliable and less flaky. Unlike traidional automation tools where we have to add waits manually, Playwright automatically waits for elements to be ready before performing actions like click() or fill(). Consider this example from our login test: await page.goto('https://qa-cart.com/');await expect(page.getByRole('heading', { name: /login/i })).toBeVisible();const userNameIncorrect =.

Why Traditional CSS-Based Automation Often Fails If you have worked with traditional automation tools like Selenium, your tests probably looked something like this: driver.findElement(By.cssSelector( "div.container > form > div:nth-child(3) > button.primary" )).click(); When engineers begin learning test automation, CSS selectors are usually the first method used to locate elements. CSS selectors are powerful, flexible, and essential—but relying exclusively on them can lead t

Introduction Modern web applications are dynamic, interactive, and driven by JavaScript frameworks. To automate such applications reliably, it is essential to learn how automation tools interact with real user interface elements such as forms, authentication workflows, navigation menus, filters, sliders, and checkout processes. If you are learning Playwright test automation using JavaScript or TypeScript , the most effective way to build real confidence is by practising on a

If you are new to Playwright and modern web automation, one of the most important concepts you must understand is the DOM (Document Object Model) . Playwright does not interact with the page the way humans do. It does not “see” buttons, textboxes, or labels visually. Instead, it interacts with the structured HTML representation of the page — the DOM. Before writing stable and reliable automation scripts, you must clearly understand: What is a DOM tree? What are element nodes,

Playwright is a modern end-to-end test automation framework designed for reliable, cross-browser testing using a single unified API. It supports Chromium, Firefox, and WebKit, and comes with a powerful built-in test runner, automatic waiting mechanisms, parallel execution, and rich HTML reporting. In this Playwright tutorial for beginners , we will go beyond basic installation and understand how Playwright fits into a modern TypeScript-based automation workflow. This guide wa

Introduction In the previous post , we covered loops and string methods in TypeScript , learning how to repeat actions and manipulate text efficiently. These concepts are essential for controlling program flow and handling data, but they represent only the foundational level of TypeScript programming. In this post, we move to the next core concept: functions in TypeScript . Functions are the backbone of every real-world TypeScript application and are heavily used in modern a

In the previous post , we covered the core basics of TypeScript , including variables, data types, arrays, objects, operators, and conditional statements. These concepts form the foundation of TypeScript and are essential before writing any real-world code. In this post, we continue building on that foundation by focusing on two very important topics: loops  and string methods . Loops help us repeat actions efficiently, while string methods allow us to work with and manipulat

In the previous part-1 post , we set up the complete TypeScript development environment  required for learning modern automation tools like Playwright . This included installing Node.js , configuring Visual Studio Code , and creating a clean TypeScript project structure  with src, dist, and a minimal tsconfig.json. At this stage, we focused only on preparing a solid TypeScript learning setup , without installing Playwright itself. With the environment now ready, the next im

TypeScript Environment with Node.js and VSCode Before starting with Playwright test automation, it is important to understand the language and development environment  on which Playwright is built. Playwright tests are written using JavaScript or TypeScript , and both run on top of Node.js . In this guide, we will not install Playwright yet . The focus here is on setting up a clean TypeScript development environment from scratch  and understanding how TypeScript works behind

In this post, I will share links and code for my youtube series for practising useful Tkinter programs. In my youtube tutorials, I have...

In this post, we will learn to create a python program for maths quiz. Through this program, user would be given a choice of maths...

In this program, we will learn to create a python program for grocery shopping. Through this program, available items with price would be...

Program for converting currency values using python functions, inputs , while loop, if-else