BDD + POM in Playwright using Typescript — Part 1

In this article we will implement BDD using Page Object Model in Playwright with Typescript. To integrate BDD and Playwright we will use @cucumber/cucumber npm package.

Cucumber is a tool for running automated tests written in plain language. Because they’re written in plain language, they can be read by anyone on your team. Because they can be read by anyone, you can use them to help improve communication, collaboration and trust on your team.

This package is the JavaScript implementation of Cucumber. So, install cucumber extension,

Initial Setup :

As a first step, create a project folder(PW_BDD_POM_Sample) and install the below npm packages,

npm install playwright

npm install @playwright/test

npm install ts-node

npm install @cucumber/cucumber

The package.json file has,

"devDependencies": {
    "@cucumber/cucumber": "^9.3.0",
    "@playwright/test": "^1.36.1",
    "ts-node": "^10.9.1"
  }