BDD + POM in Playwright using Typescript

Anandhi K
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,

To run the script,

npm test

Will display the results as,

And will generate cucumber reports under test-results folder,

GitHub Repo :

A2ZTestAutomation/PW_BDD_POM_Sample (github.com)

Reference :

@cucumber/cucumber — npm (npmjs.com)

Page object models | Playwright

Conclusion :

As a result, we can implement BDD using cucumber in Playwright using Page Object Model.

--

--

Anandhi K

DevOps Test Automation Consultant, Trainer and Blogger in Cypress, Selenium, Cucumber, Playwright & CI/CD Tools.