BDD + POM in Playwright using Typescript

4 min readJul 23, 2023

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"
  }

‘ts-node’ is used to transforms TypeScript into JavaScript, enabling us to directly execute TypeScript on Node.js without precompiling.

Create a project folder structure as shown below,

In the project folder, delete the below files and folders,

/tests , /test-examples, Playwright.config.ts

Cucumber has 3 components like — Feature files, Step definitions and a Runner file. To maintain these components create folders namely /src/test/features and /src/test/steps and a runner file cucumber.json.

Page Objects :

Create list of page objects under /pages folder as,

Application used here is — Conduit (realworld.io)

Cucumber Implementation :

Create a feature file to login into application and to view particular post details from list of posts.

Feature: Post CRUD Operations

Background: Valid user login
    Given User must launch login page
    When User enters valid credentials
    Then Should display Home page

 Scenario: View post details
        Given Post must be  listed
        When User select the post 
        Then Should display the post details

To run this feature file include the below script in package.json,

 "scripts": {
    "test": "cucumber-js test"
  },

When we run from terminal

npm test

Will generate default implementations for the given steps as ,

Create a step definition file — /src/test/steps/viewPostStep.ts, include these steps and provide the below definitions,

Given('User must launch login page', async function () {
    browser = await chromium.launch({ headless: false })
    const context = await browser.newContext()
    page = await context.newPage()
    await page.goto('https://react-redux.realworld.io/')
    homePage = new HomePage(page)
    loginPage = new LoginPage(page)
    await homePage.navigateToLogin()
});

When('User enters valid credentials', async function () {
    await loginPage.validLogin(uName, pwd)
});

Then('Should display Home page', async function () {
    await homePage.validateLogin();
});

Given('Post must be  listed', async function () {
    homePage = new HomePage(page)
    viewPostPage = new PostViewPage(page)
    await homePage.navigateToGlobalFeed()
    globalListPage = new GlobalFeedListPage(page, articleTitle)
});

When('User select the post', async function () {
    await globalListPage.clickArticle()
});

Then('Should display the post details', async function () {
    await expect(viewPostPage.isPostAvailable(articleTitle)).toContainText(articleTitle)
});

Now to run this features create a cucumber.json file as,

{
    "default": {
        "formatOptions": {
            "snippetInterface": "async-await"
        },
        "publishQuiet": true,
        "dryRun": false,
        "paths": [
            "src/test/features/"
        ],
        "require": [
            "src/test/steps/*.ts"
        ],
        "requireModule": [
            "ts-node/register"
        ],
        "format": [
            "html:test-results/cucumber-report.html"
        ]
    }
}

Let we see the above options in detail,

publishQuite — To suppress cucumber cloud reports warning

dryRun — true / false

paths — path to feature files

require — path to step definitions

requireModule — to import the libraries as ES6 modules in typescript files.

Format — to generate cucumber reports.

Before running, need to make the glue between features and stepdefs in cucumber settings. To do that goto cucumber extensions -> settings -> Edit settings.json file,