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:

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:

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:

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.

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

# 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

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(); });