Playwright/Cucumber

In this practice you’ll build a web UI test suite with Playwright and Cucumber.

Playwright gives fast, reliable cross-browser testing (Chromium, Firefox, WebKit) and device emulation for mobile.

Paired with Cucumber + TypeScript, you get readable BDD scenarios and type-safe step definitions in a robust setup.

First, if you don’t have Playwright set up already, there are a few pre-requisites to execute this test suite.

Set the environmnent right:

First of all, you’ll need a suitable developer environment. For TypeScript projects Visual Studio Code is an excellent choice. However these installations can be tricky, if one’s not that seasoned yet.

1: Check if you have Node.js on your computer. If not, you can install it from here: https://nodejs.org/en Node.js is a free, open source crosds platform, JavaScript environment, which lets you create your scripts. After instally, verify in a terminal:

node -v
npm -v

You should see version numbers.

2: Install Visual Studio Code. You can download it from the official site: https://code.visualstudio.com/ Once it is successfully installed, you may consider to download a few useful add-ins from VS Code’s extensions (Extensions are optional; the exercises work without them) :

Cucumber (Gherkin) support
ESLint for code quality checks
Prettier for consistent code formatting

3: Set up playwright. To do so, you’ll have to initialize a new project. Start with creating a new TypeScript project in VS Code:

Create a new folder for the project
Open the folder in VS Code
Open a New Terminal (Terminal > New Terminal)
initiate the npm project:

In the terminal run the following:

npm init -y

Install the required dependencies:

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

Install PlayWright (you can find the same command ont he official website: https://playwright.dev/ ):

npx playwright install

4: Configure TypeScript

Create a tsconfig.json file in the root folder of the project:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "types": ["node", "cucumber"]
  },
  "include": ["**/*.ts"]
}

5: Configure Cucumber

Create a cucumber.js file in the root folder of the project:

module.exports = {
  default: {
    requireModule: ['ts-node/register'],
    require: ['features/step_definitions/**/*.ts'],
    format: ['progress', 'summary'],
  }
};

6: BDD Feature File creation

Create a features folder in the root folder, and then inside a mobile_web_test.feature file:

# language: en
Feature: Testing a mobile website in the Chrome browser
  In order to ensure the website works correctly on mobile devices
  As a tester
  I want to automatically verify the page loads and shows the expected content

  Scenario: Open and verify the website on an Android device
    Given I open the Chrome browser on the Android emulator
    And I load the "https://teszteljukle.hu" website
    Then the page title should contain "Teszteljük le"
    And the page should contain the text "Magyar szoftvertesztelő közösség"
    And I close the browser

7: Step Definitions implementation with Playwright:

Create a features/step_definitions folder in the root folder, and then inside a mobile_web_steps.ts file:

import { Given, When, Then } from '@cucumber/cucumber';
import { chromium, devices, Page, Browser } from 'playwright';
import { strict as assert } from 'assert';

let browser: Browser;
let page: Page;

Given('I open the Chrome browser on the Android emulator', async function () {
  // Start a mobile-like Chromium instance
  browser = await chromium.launch({
    headless: false, // keep visible during development
  });

  // Use Playwright’s built-in device emulation
  const context = await browser.newContext({
    ...devices['Pixel 5'],      // or any other supported device
    locale: 'hu-HU',
  });

  page = await context.newPage();
});

When('I load the {string} website', async function (url: string) {
  await page.goto(url, { waitUntil: 'networkidle' });
});

Then('the page title should contain {string}', async function (expectedTitle: string) {
  const title = await page.title();
  assert.ok(
    title.includes(expectedTitle),
    `Expected title to include "${expectedTitle}", but got "${title}"`
  );
});

Then('the page should contain the text {string}', async function (expectedText: string) {
  const content = await page.textContent('body');
  assert.ok(
    content && content.includes(expectedText),
    `Expected page to contain "${expectedText}", but it did not`
  );
});

Then('I close the browser', async function () {
  await browser.close();
});

8: Run the test :)

To run the test, first you need to add a script to the file. Make sure to paste it the editor, and not in the terminal:

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

Then run the test:

npm test

Congratulations! You ran your first automated test. For more practical examples make sure to check out the Selenium and Appium section just as well.