Blog

Playwright 1.56: Key Features and Updates

by Rajesh K | Nov 11, 2025 | Automation Testing, Blog, Latest Post | 11 comments

The automation landscape is shifting rapidly. Teams no longer want tools that simply execute tests; they want solutions that think, adapt, and evolve alongside their applications. That’s exactly what Playwright 1.56 delivers. Playwright, Microsoft’s open-source end-to-end testing framework, has long been praised for its reliability, browser coverage, and developer-friendly design. But with version 1.56, it’s moving into a new dimension, one powered by artificial intelligence and autonomous test maintenance. The latest release isn’t just an incremental upgrade; it’s a bold step toward AI-assisted testing. By introducing Playwright Agents, enhancing debugging APIs, and refining its CLI tools, Playwright 1.56 offers testers, QA engineers, and developers a platform that’s more intuitive, resilient, and efficient than ever before.

Let’s dive deeper into what makes Playwright 1.56 such a breakthrough release and why it’s a must-have for any modern testing team.

Why Playwright 1.56 Matters More Than Ever

In today’s fast-paced CI/CD pipelines, test stability and speed are crucial. Teams are expected to deploy updates multiple times a day, but flaky tests, outdated selectors, and time-consuming maintenance can slow releases dramatically.

That’s where Playwright 1.56 changes the game. Its built-in AI agents automate the planning, generation, and healing of tests, allowing teams to focus on innovation instead of firefighting broken test cases.

• Less manual work
• Fewer flaky tests
• Smarter automation that adapts to your app

By combining AI intelligence with Playwright’s already robust capabilities, version 1.56 empowers QA teams to achieve more in less time with greater confidence in every test run.

Introducing Playwright Agents: AI That Tests with You

At the heart of Playwright 1.56 lies the Playwright Agents, a trio of AI-powered assistants designed to streamline your automation workflow from start to finish. These agents, the Planner, Generator, and Healer, work in harmony to deliver a truly intelligent testing experience.

Planner Agent – Your Smart Test Architect

The Planner Agent is where it all begins. It automatically explores your application and generates a structured, Markdown-based test plan.

This isn’t just a script generator; it’s a logical thinker that maps your app’s navigation, identifies key actions, and documents them in human-readable form.

• Scans pages, buttons, forms, and workflows
• Generates a detailed, structured test plan
• Acts as a blueprint for automated test creation

Example Output:

# Checkout Flow Test Plan

• Navigate to /cart
• Verify cart items
• Click “Proceed to Checkout”
• Enter delivery details
• Complete payment
• Validate order confirmation message

This gives you full visibility into what’s being tested in plain English before a single line of code is written.

Generator Agent – From Plan to Playwright Code

Next comes the Generator Agent, which converts the Planner’s Markdown test plan into runnable Playwright test files.

• Reads Markdown test plans
• Generates Playwright test code with correct locators and actions
• Produces fully executable test scripts

In other words, it eliminates repetitive manual coding and enforces consistent standards across your test suite.

Example Use Case:
You can generate a test that logs into your web app and verifies user access in just seconds, no need to manually locate selectors or write commands.

Healer Agent – The Auto-Fixer for Broken Tests

Even the best automation scripts break, buttons get renamed, elements move, or workflows change. The Healer Agent automatically identifies and repairs these issues, ensuring that your tests remain stable and up-to-date.

• Detects failing tests and root causes
• Updates locators, selectors, or steps
• Reduces manual maintenance dramatically

Example Scenario:
If a “Submit” button becomes “Confirm,” the Healer Agent detects the UI change and fixes the test automatically, keeping your CI pipelines green.

This self-healing behavior saves countless engineering hours and boosts trust in your test suite’s reliability.

How Playwright Agents Work Together

The three agents work in a loop using the Playwright Model Context Protocol (MCP).

This creates a continuous, AI-driven cycle where your tests adapt dynamically, much like a living system that grows with your product.

Getting Started: Initializing Playwright Agents

Getting started with these AI assistants is easy. Depending on your environment, you can initialize the agents using a single CLI command.

npx playwright init-agents --loop=vscode

Other environments:

npx playwright init-agents --loop=claude

npx playwright init-agents --loop=opencode

These commands automatically create configuration files:

.github/chatmodes/🎭 planner.chatmode.md
.github/chatmodes/🎭 generator.chatmode.md
.github/chatmodes/🎭 healer.chatmode.md
.vscode/mcp.json
seed.spec.ts

This setup allows developers to plug into AI-assisted testing seamlessly, whether they’re using VS Code, Claude, or OpenCode.

New APIs That Empower Debugging and Monitoring

Debugging has long been one of the most time-consuming aspects of test automation. Playwright 1.56 makes it easier with new APIs that offer deeper visibility into browser behavior and app performance.

These additions give QA engineers powerful insights without needing to leave their test environment, bridging the gap between frontend and backend debugging.

Command-Line Improvements for Smarter Execution

The CLI in Playwright 1.56 is more flexible and efficient than ever before.

New CLI Flags:

• --test-list: Run only specific tests listed in a file
• --test-list-invert: Exclude tests listed in a file

This saves time when you only need to run a subset of tests, perfect for large enterprise suites or quick CI runs.

Enhanced UI Mode and HTML Reporting

Playwright’s new UI mode isn’t just prettier, it’s more practical.

Key Enhancements:

• Unified test and describe blocks in reports
• “Update snapshots” option added directly in UI
• Single-worker debugging for isolating flaky tests
• Removed “Copy prompt” button for cleaner HTML output

With these updates, debugging and reviewing reports feel more natural and focused.

Breaking and Compatibility Changes

Every major upgrade comes with changes, and Playwright 1.56 is no exception:

• browserContext.on('backgroundpage') → Deprecated
• browserContext.backgroundPages() → Now returns empty list

If your project relies on background pages, update your tests accordingly to ensure compatibility.

Other Enhancements and Fixes

Beyond the major AI and API updates, Playwright 1.56 also includes important performance and compatibility improvements:

• Improved CORS handling for better cross-origin test reliability
• ARIA snapshots now render input placeholders
• Introduced PLAYWRIGHT_TEST environment variable for worker processes
• Dependency conflict resolution for projects with multiple Playwright versions
• Bug fixes, improving integration with VS Code, and test execution stability

These refinements ensure your testing experience remains smooth and predictable, even in large-scale, multi-framework environments.

Playwright 1.56 vs. Competitors: Why It Stands Out

Verdict:
Playwright 1.56 offers the smartest balance between speed, intelligence, and reliability, making it the most future-ready framework for teams aiming for true continuous testing.

Pro Tips for Getting the Most Out of Playwright 1.56

• Start with AI Agents Early – Let the Planner and Generator create your foundational suite before manual edits.
• Use page.requests() for API validation – Monitor backend traffic without external tools.
• Leverage the Healer Agent – Enable auto-healing for dynamic applications that change frequently.
• Run isolated tests in single-worker mode – Ideal for debugging flaky behavior.
• Integrate with CI/CD tools – Playwright works great with GitHub Actions, Jenkins, and Azure DevOps.

Benefits Overview: Why Upgrade

Conclusion

Playwright 1.56 is not just another update; it’s a reimagination of test automation. With its AI-driven Playwright Agents, enhanced APIs, and modernized tooling, it empowers QA and DevOps teams to move faster and smarter. By automating planning, code generation, and healing, Playwright has taken a bold leap toward autonomous testing where machines don’t just execute tests but understand and evolve with your application.

Frequently Asked Questions

Take your end-to-end testing to the next level with Playwright. Build faster, test smarter, and deliver flawless web experiences across browsers and devices.

Start Testing with Playwright

Design Patterns for Test Automation Frameworks

by Rajesh K | Nov 6, 2025 | Automation Testing, Blog, Latest Post | 1 comment

In modern software development, test automation is not just a luxury. It’s a vital component for enhancing efficiency, reusability, and maintainability. However, as any experienced test automation engineer knows, simply writing scripts is not enough. To build a truly scalable and effective automation framework, you must design it smartly. This is where test automation design patterns come into play. These are not abstract theories; they are proven, repeatable solutions to the common problems we face daily. This guide, built directly from core principles, will explore the most commonly used test automation design patterns in Java. We will break down what they are, why they are critical for your success, and how they help you build robust, professional frameworks that stand the test of time and make your job easier. By the end, you will have the blueprint to transform your automation efforts from a collection of scripts into a powerful engineering asset.

Why Use Design Patterns in Automation? A Deeper Look

Before we dive into specific patterns, let’s solidify why they are a non-negotiable part of a professional automation engineer’s toolkit. The document highlights four key benefits, and each one directly addresses a major pain point in our field.

• Improving Code Reusability: How many times have you copied and pasted a login sequence, a data setup block, or a set of verification steps? This leads to code duplication, where a single change requires updates in multiple places. Design patterns encourage you to write reusable components (like a login method in a Page Object), so you define a piece of logic once and use it everywhere. This is the DRY (Don’t Repeat Yourself) principle in action, and it’s a cornerstone of efficient coding.
• Enhancing Maintainability: This is perhaps the biggest win. A well-designed framework is easy to maintain. When a developer changes an element’s ID or a user flow is updated, you want to fix it in one place, not fifty. Patterns like the Page Object Model create a clear separation between your test logic and the application’s UI details. Consequently, maintenance becomes a quick, targeted task instead of a frustrating, time-consuming hunt.
• Reducing Code Duplication: This is a direct result of improved reusability. By centralizing common actions and objects, you drastically cut down on the amount of code you write. Less code means fewer places for bugs to hide, a smaller codebase to understand, and a faster onboarding process for new team members.
• Making Tests Scalable and Easy to Manage: A small project can survive messy code. A large project with thousands of tests cannot. Design patterns provide the structure needed to scale. They allow you to organize your framework logically, making it easy to find, update, and add new tests without bringing the whole system down. This structured approach is what separates a fragile script collection from a resilient automation framework.

1. Page Object Model (POM): The Structural Foundation

The Page Object Model is a structural pattern and the most fundamental pattern for any UI test automation engineer. It provides the essential structure for keeping your framework organized and maintainable.

What is it?

As outlined in the source, the Page Object Model is a pattern where each web page (or major screen) of your application is represented as a Java class. Within this class, the UI elements are defined as variables (locators), and the user actions on those elements are represented as methods. This creates a clean API for your page, hiding the implementation details from your tests.

Benefits:

• Separation of Test Code and UI Locators: Your tests should read like a business process, not a technical document. POM makes this possible by moving all findElement calls and locator definitions out of the test logic and into the page class.
• Easy Maintenance and Updates: If the login button’s ID changes, you only update it in the LoginPage.java class. All tests that use this page are instantly protected. This is the single biggest argument for POM.
• Enhances Readability: A test that reads loginPage.login(“user”, “pass”) is infinitely more understandable to anyone on the team than a series of sendKeys and click commands.

Structure of POM:

The structure is straightforward and logical:

Each page (or screen) of your application is represented by a class. For example: LoginPage.java, DashboardPage.java, SettingsPage.java.

Each class contains:

• Locators: Variables that identify the UI elements, typically using @FindBy or driver.findElement().
• Methods/Actions: Functions that perform operations on those locators, like login(), clickSave(), or getDashboardTitle().

Example:

// LoginPage.java
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;
public class LoginPage {
WebDriver driver;
@FindBy(id = "username")
WebElement username;
@FindBy(id = "password")
WebElement password;
@FindBy(id = "loginBtn")
WebElement loginButton;
public LoginPage(WebDriver driver) {
this.driver = driver;
PageFactory.initElements(driver, this);
}
public void login(String user, String pass) {
username.sendKeys(user);
password.sendKeys(pass);
loginButton.click();
}
}

2. Factory Design Pattern: Creating Objects with Flexibility

The Factory Design Pattern is a creational pattern that provides a smart way to create objects. For a test automation engineer, this is the perfect solution for managing different browser types and enabling seamless cross-browser testing.

What is it?

The Factory pattern provides an interface for creating objects but allows subclasses to alter the type of objects that will be created. In simpler terms, you create a special “Factory” class whose job is to create other objects (like WebDriver instances). Your test code then asks the factory for an object, passing in a parameter (like “chrome” or “firefox”) to specify which one it needs.

Use in Automation:

• Creating WebDriver instances (Chrome, Firefox, Edge, etc.).
• Supporting cross-browser testing by reading the browser type from a config file or a command-line argument.

Structure of Factory Design Pattern:

The pattern consists of four key components that work together:

• Product (Interface / Abstract Class): Defines a common interface that all concrete products must implement. In our case, the WebDriver interface is the Product.
• Concrete Product: Implements the Product interface; these are the actual objects created by the factory. ChromeDriver, FirefoxDriver, and EdgeDriver are our Concrete Products.
• Factory (Creator): Contains a method that returns an object of type Product. It decides which ConcreteProduct to instantiate. This is our DriverFactory class.
• Client: The test class or main program that calls the factory method instead of creating objects directly with new.

Example:

// DriverFactory.java

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class DriverFactory {

  public static WebDriver getDriver(String browser) {
    if (browser.equalsIgnoreCase("chrome")) {
      return new ChromeDriver();
    } else if (browser.equalsIgnoreCase("firefox")) {
      return new FirefoxDriver();
    } else {
      throw new RuntimeException("Unsupported browser");
    }
  }
}

3. Singleton Design Pattern: One Instance to Rule Them All

The Singleton pattern is a creational pattern that ensures a class has only one instance and provides a global point of access to it. For test automation engineers, this is the ideal pattern for managing shared resources like a WebDriver session.

What is it?

It’s implemented by making the class’s constructor private, which prevents anyone from creating an instance using the new keyword. The class then creates its own single, private, static instance and provides a public, static method (like getInstance()) that returns this single instance.

Use in Automation:

This pattern is perfect for WebDriver initialization to avoid multiple driver instances, which would consume excessive memory and resources.

Structure of Singleton Pattern:

The implementation relies on four key components:

• Singleton Class: The class that restricts object creation (e.g., DriverManager).
• Private Constructor: Prevents direct object creation using new.
• Private Static Instance: Holds the single instance of the class.
• Public Static Method (getInstance): Provides global access to the instance; it creates the instance if it doesn’t already exist.

Example:

// DriverManager.java

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class DriverManager {

  private static WebDriver driver;

  private DriverManager() { }

  public static WebDriver getDriver() {
    if (driver == null) {
      driver = new ChromeDriver();
    }
    return driver;
  }

  public static void quitDriver() {
    if (driver != null) {
      driver.quit();
      driver = null;
    }
  }
}

4. Data-Driven Design Pattern: Separating Logic from Data

The Data-Driven pattern is a powerful approach that enables running the same test case with multiple sets of data. It is essential for achieving comprehensive test coverage without duplicating your test code.

What is it?

This pattern enables you to run the same test with multiple sets of data using external sources like Excel, CSV, JSON, or databases. The test logic remains in the test script, while the data lives externally. A utility reads the data and supplies it to the test, which then runs once for each data set.

Benefits:

• Test Reusability: Write the test once, run it with hundreds of data variations.
• Easy to Extend with More Data: Need to add more test cases? Just add more rows to your Excel file. No code changes are needed.

Structure of Data-Driven Design Pattern:

This pattern involves several components working together to flow data from an external source into your test execution:

• Test Script / Test Class: Contains the test logic (steps, assertions, etc.), using parameters for data.
• Data Source: The external file or database containing test data (e.g., Excel, CSV, JSON).
• Data Provider / Reader Utility: A class (e.g., ExcelUtils.java) that reads the data from the external source and supplies it to the tests.
• Data Loader / Provider Annotation: In TestNG, the @DataProvider annotation supplies data to test methods dynamically.
• Framework / Test Runner: Integrates the test logic with data and executes iterations (e.g., TestNG, JUnit).

Example with TestNG:

@DataProvider(name = "loginData")
public Object[][] getData() {
  return new Object[][] {
    {"user1", "pass1"},
    {"user2", "pass2"}
  };
}

@Test(dataProvider = "loginData")
public void loginTest(String user, String pass) {
  new LoginPage(driver).login(user, pass);
}

5. Fluent Design Pattern: Creating Readable, Chainable Workflows

The Fluent Design Pattern is an elegant way to improve the readability and flow of your code. It helps create method chaining for a more fluid and intuitive workflow.

What is it?

In a fluent design, each method in a class performs an action and then returns the instance of the class itself (return this;). This allows you to chain multiple method calls together in a single, flowing statement. This pattern is often used on top of the Page Object Model to make tests even more readable.

Structure of Fluent Design Pattern:

The pattern is built on three simple components:

• Class (Fluent Class): The class (e.g., LoginPage.java) that contains the chainable methods.
• Methods: Perform actions and return the same class instance (e.g., enterUsername(), enterPassword()).
• Client Code: The test class, which calls methods in a chained, fluent manner (e.g., loginPage.enterUsername().enterPassword().clickLogin()).

Example:

public class LoginPage {

  public LoginPage enterUsername(String username) {
    this.username.sendKeys(username);
    return this;
  }

  public LoginPage enterPassword(String password) {
    this.password.sendKeys(password);
    return this;
  }

  public HomePage clickLogin() {
    loginButton.click();
    return new HomePage(driver);
  }
}

// Usage
loginPage.enterUsername("admin").enterPassword("admin123").clickLogin();

6. Strategy Design Pattern: Defining Interchangeable Algorithms

The Strategy pattern is a behavioral pattern that defines a family of algorithms and allows them to be interchangeable. This is incredibly useful when you have multiple ways to perform a specific action.

What is it?

Instead of having a complex if-else or switch block to decide on an action, you define a common interface (the “Strategy”). Each possible action is a separate class that implements this interface (a “Concrete Strategy”). Your main code then uses the interface, and you can “inject” whichever concrete strategy you need at runtime.

Use Case:

• Switching between different logging mechanisms (file, console, database).
• Handling multiple types of validations (e.g., validate email, validate phone number).

Structure of the Strategy Design Pattern:

The pattern is composed of four parts:

• Strategy (Interface): Defines a common interface for all supported algorithms (e.g., PaymentStrategy).
• Concrete Strategies: Implement different versions of the algorithm (e.g., CreditCardPayment, UpiPayment).
• Context (Executor Class): Uses a Strategy reference to call the algorithm. It doesn’t know which concrete class it’s using (e.g., PaymentContext).
• Client (Test Class): Chooses the desired strategy and passes it to the context.

Example:

public interface PaymentStrategy {
  void pay();
}

public class CreditCardPayment implements PaymentStrategy {
  public void pay() {
    System.out.println("Paid using Credit Card");
  }
}

public class UpiPayment implements PaymentStrategy {
  public void pay() {
    System.out.println("Paid using UPI");
  }
}

public class PaymentContext {

  private PaymentStrategy strategy;

  public PaymentContext(PaymentStrategy strategy) {
    this.strategy = strategy;
  }

  public void executePayment() {
    strategy.pay();
  }
}

Conclusion

Using test automation design patterns is a definitive step toward writing clean, scalable, and maintainable automation frameworks. They are the distilled wisdom of countless engineers who have faced the same challenges you do. Whether you are building frameworks with Selenium, Appium, or Rest Assured, these patterns provide the structural integrity to streamline your work and enhance your productivity. By adopting them, you are not just writing code; you are engineering a quality solution.

Frequently Asked Questions

Ready to transform your automation framework? Let's discuss how to apply these design patterns to your specific project and challenges.

Free Consult

Playwright + TypeScript Is the Future of End-to-End Testing

by Rajesh K | Oct 23, 2025 | Automation Testing, Blog, Latest Post | 36 comments

As software development accelerates toward continuous delivery and deployment, testing frameworks are being reimagined to meet modern demands. Teams now require tools that deliver speed, reliability, and cross-browser coverage while maintaining clean, maintainable code. It is in this evolving context that the Playwright + TypeScript + Cucumber BDD combination has emerged as a revolutionary solution for end-to-end (E2E) test automation. This trio is not just another stack; it represents a strategic transformation in how automation frameworks are designed, implemented, and scaled. At Codoid Innovation, this combination has been successfully adopted to deliver smarter, faster, and more maintainable testing solutions. The synergy between Playwright’s multi-browser power, TypeScript’s strong typing, and Cucumber’s behavior-driven clarity allows teams to create frameworks that are both technically advanced and business-aligned.

In this comprehensive guide, both the “why” and the “how” will be explored, from understanding the future-proof nature of Playwright + TypeScript to implementing the full setup step-by-step and reviewing the measurable outcomes achieved through this modern approach.

The Evolution of Test Automation: From Legacy to Modern Frameworks

For many years, Selenium WebDriver dominated the automation landscape. While it laid the foundation for browser automation, its architecture has often struggled with modern web complexities such as dynamic content, asynchronous operations, and parallel execution.

Transitioning toward Playwright + TypeScript was therefore not just a technical choice, but a response to emerging testing challenges:

• Dynamic Web Apps: Modern SPAs (Single Page Applications) require smarter wait mechanisms.
• Cross-Browser Compatibility: QA teams must now validate across Chrome, Firefox, and Safari simultaneously.
• CI/CD Integration: Automation has become integral to every release pipeline.
• Scalability: Code maintainability is as vital as functional coverage.

These challenges are elegantly solved when Playwright, TypeScript, and Cucumber BDD are combined into a cohesive framework.

Why Playwright and TypeScript Are the Future of E2E Testing

Playwright’s Power

Developed by Microsoft, Playwright is a Node.js library that supports Chromium, WebKit, and Firefox, the three major browser engines. Unlike Selenium, Playwright offers:

• Built-in auto-wait for elements to be ready
• Native parallel test execution
• Network interception and mocking
• Testing of multi-tab and multi-context applications
• Support for headless and headed modes

Its API is designed to be fast, reliable, and compatible with modern JavaScript frameworks such as React, Angular, and Vue.

TypeScript’s Reliability

TypeScript, on the other hand, adds a layer of safety and structure to the codebase through static typing. When used with Playwright, it enables:

• Early detection of code-level errors
• Intelligent autocompletion in IDEs
• Better maintainability for large-scale projects
• Predictable execution with strict type checking

By adopting TypeScript, automation code evolves from being reactive to being proactive, preventing issues before they occur.

Cucumber BDD’s Business Readability

Cucumber uses Gherkin syntax to make tests understandable for everyone, not just developers. With lines like Given, When, and Then, both business analysts and QA engineers can collaborate seamlessly.

This approach ensures that test intent aligns with business value, a critical factor in agile environments.

The Ultimate Stack: Playwright + TypeScript + Cucumber BDD

Such a framework is built for the future, efficient for today’s testing challenges, yet adaptable for tomorrow’s innovations.

Step-by-Step Implementation: Building the Framework

Step 1: Initialize the Project

mkdir playwright-cucumber-bdd  
cd playwright-cucumber-bdd  
npm init -y

This command creates a package.json file and prepares the environment for dependency installation.

Step 2: Install Required Dependencies

npm install playwright @cucumber/cucumber typescript ts-node @types/node --save-dev

npx playwright install

These libraries form the backbone of the framework.

Step 3: Organize Folder Structure

A clean directory layout enhances clarity and maintainability:

playwright-cucumber-bdd/
│
├── features/
│   ├── login.feature
│
├── steps/
│   ├── login.steps.ts
│
├── pages/
│   ├── login.page.ts
│
├── support/
│   ├── hooks.ts
│
├── tsconfig.json
└── cucumber.json

This modular layout ensures test scalability and easier debugging.

Step 4: Configure TypeScript

File: tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "outDir": "./dist",
    "types": ["node", "@cucumber/cucumber"]
  },
  "include": ["steps/**/*.ts"]
}

This ensures strong typing, modern JavaScript features, and smooth compilation.

Step 5: Write the Feature File

File: features/login.feature

Feature: Login functionality

  @Login
  Scenario: Verify login and homepage load successfully
    Given I navigate to the SauceDemo login page
    When I login with username "standard_user" and password "secret_sauce"
    Then I should see the products page

This test scenario defines the business intent clearly in natural language.

Step 6: Implement Step Definitions

File: steps/login.steps.ts

import { Given, When, Then } from "@cucumber/cucumber";
import { chromium, Browser, Page } from "playwright";
import { LoginPage } from "../pages/login.page";
import { HomePage } from "../pages/home.page";

let browser: Browser;
let page: Page;
let loginPage: LoginPage;
let homePage: HomePage;

Given('I navigate to the SauceDemo login page', async () => {
  browser = await chromium.launch({ headless: false });
  page = await browser.newPage();
  loginPage = new LoginPage(page);
  homePage = new HomePage(page);
  await loginPage.navigate();
});

When('I login with username {string} and password {string}', async (username: string, password: string) => {
  await loginPage.login(username, password);
});

Then('I should see the products page', async () => {
  await homePage.verifyHomePageLoaded();
  await browser.close();
});

These definitions bridge the gap between business logic and automation code.

Step 7: Define Page Objects

File: pages/login.page.ts

import { Page } from "playwright";

export class LoginPage {
  private usernameInput = '#user-name';
  private passwordInput = '#password';
  private loginButton = '#login-button';

  constructor(private page: Page) {}

  async navigate() {
    await this.page.goto('https://www.saucedemo.com/');
  }

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

File: pages/home.page.ts

import { Page } from "playwright";
import { strict as assert } from "assert";

export class HomePage {
  private inventoryContainer = '.inventory_list';
  private titleText = '.title';

  constructor(private page: Page) {}

  async verifyHomePageLoaded() {
    await this.page.waitForSelector(this.inventoryContainer);
    const title = await this.page.textContent(this.titleText);
    assert.equal(title, 'Products', 'Homepage did not load correctly');
  }
}

This modular architecture supports reusability and clean code management.

Step 8: Configure Cucumber

File: cucumber.json

{
  "default": {
    "require": ["steps/**/*.ts", "support/hooks.ts"],
    "requireModule": ["ts-node/register"],
    "paths": ["features/**/*.feature"],
    "format": ["progress"]
  }
}

This configuration ensures smooth execution across all feature files.

Step 9: Add Hooks for Logging and Step Tracking

File: support/hooks.ts

(Refer to earlier code in your document, included verbatim here)

These hooks enhance observability and make debugging intuitive.

Step 10: Execute the Tests

npx cucumber-js --require-module ts-node/register --require steps/**/*.ts --require support/**/*.ts --tags "@Login"

Run the command to trigger your BDD scenario.

Before and After Outcomes: The Transformation in Action

At Codoid Innovation, teams that migrated from Selenium to Playwright + TypeScript observed measurable improvements:

Best Practices for a Scalable Framework

• Maintain a modular Page Object Model (POM).
• Use TypeScript interfaces for data-driven testing.
• Run tests in parallel mode in CI/CD for faster feedback.
• Store test data externally to improve maintainability.
• Generate Allure or Extent Reports for actionable insights.

Conclusion

The combination of Playwright + TypeScript + Cucumber represents the future of end-to-end automation testing. It allows QA teams to test faster, communicate better, and maintain cleaner frameworks, all while aligning closely with business goals. At Codoid Innovation, this modern framework has empowered QA teams to achieve new levels of efficiency and reliability. By embracing this technology, organizations aren’t just catching up, they’re future-proofing their quality assurance process.

Frequently Asked Questions