DEV Community

Cover image for Supercharge Your E2E Tests with Playwright and Cucumber Integration
AK DevCraft
AK DevCraft Subscriber

Posted on

Supercharge Your E2E Tests with Playwright and Cucumber Integration

#javascript #playwright #testing #tutorial

Introduction

In this post, I'll walk you through why Playwright and Cucumber are exceptional tools for end-to-end (E2E) testing. We'll then dive into the steps for integrating Playwright for seamless usage in a JavaScript frontend application. Finally, I'll share some pro tips to maximize your efficiency with Playwright.

Why Playwright and Cucumber?

While there are numerous capable tools for building E2E test suites, none match the synergy of Playwright and Cucumber.

Here’s why Playwright stands out in the market to write E2E tests, to name a few:

  • 1. Any browser, Any platform, One API
    • a. Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox.
    • b. Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed.
    • c. Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, and Java.
  • 2. Resilient, No flaky tests
    • a. Auto-wait. The playwright waits for elements to be actionable before performing actions.
    • b. Web-first assertions. Playwright assertions are created specifically for the dynamic web.
  • 3. Powerful Tooling
    • a. Codegen. Generate tests by recording your actions. Save them in any language.
    • b. Playwright inspector. Inspect the page, generate selectors, step through the test execution, see click points, and explore execution logs.

However, without Cucumber managing test code can become a maintenance nightmare. Cucumber facilitates writing tests in plain, human-readable language, making them accessible even to non-technical stakeholders. As a cornerstone of Behavior Driven Development (BDD), Cucumber acts as technical documentation and accelerates onboarding for new engineers.

Integration of Playwright and Cucumber

Step 1: Install Dependencies

Install the necessary packages using npm or yarn.

npm install --save-dev @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently
Enter fullscreen mode Exit fullscreen mode

Step 2: Setup Project Structure

Organize your project like this:

cucumber.js
cucumber.report.js
/e2e
  |-- /features
      |-- example.feature
  |-- /steps
      |-- example.steps.js
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Cucumber

Create a Cucumber Configuration File - cucumber.js file in the root of your project with the following content:

// filepath: /cucumber.js
module.exports = {
  default: {
    require: ["./steps/**/*.js"],
    format: ["pretty"],
    paths: ["./features/**/*.feature"],
  },
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Configure Test Reporting

Create cucumber.report.js - A file to configure the test report. Configuration options can be found here

// filepath: /cucumber.report.js
import reporter from 'cucumber-html-reporter

const options = {
  theme: 'bootstrap',
  output: report/report.html',
  jsonFile: 'report/report.json',
  brandTitle: 'E2E Test Report'
};
Enter fullscreen mode Exit fullscreen mode

Step 5: Write a Feature File

Create a feature file in the features directory, e.g., example.feature:

// filepath: /e2e/features/example.feature
Feature: Example feature

  Scenario: Open a webpage
    Given I open the "https://example.com" page
    Then the title should be "Example.com"
Enter fullscreen mode Exit fullscreen mode

Step 6: Write Step Definitions

Create a step definition file in the steps directory, e.g., example.steps.js:

// filepath: /e2e/steps/example.steps.js
import { Before, Given, Then, setDefaultTimeout, After } from '@cucumber/cucumber';
import { chromium, expect } from 'playwright';

setDefaultTimeout(30 * 1000); //milliseconds
let browser, page, context;

Before(async function(){
  browser = await chromium.launch({headless: true});
  context = await brwoser.newContext();
  page = await content.newPage();
});

Given('I open the {string} page', async function (url) {
  await page.goto(url);
});

Then('the title should be {string}', async function (title) {
  const pageTitle = await page.title();
  expect(pageTitle).toHaveText(title);
});

After(async function(){
  await context.close();
  await browser.close();
});
Enter fullscreen mode Exit fullscreen mode

Step 7: Add a NPM Test Script

Add a script to your package.json to run the tests:

// filepath: /package.json
{
  "scripts": {
    "e2e": "cucumber-js --exit",
    "test:e2e": "concurrently -n 'server,test' -c 'auto' --kill-others 'npm run dev' 'npm run e2e'"
  }
}
Enter fullscreen mode Exit fullscreen mode

concurrently npm package is a handy tool that lets you execute two processes at the same test, as to execute the E2E test you'll need to run the application as well, sometimes locally and sometimes remotely.

Step 8: Run Tests

Execute tests with:

npm run test:e2e
Enter fullscreen mode Exit fullscreen mode

Playwright Pro Tips

  • 1. Error Messages - Read them carefully—they often pinpoint the problem.
  • 2. Iterative Development - Test small chunks of code to isolate and resolve issues.
  • 3. Playwright Inspector - It can help to record actions and generate test scripts automatically, so would have to write just a piece of code. You can launch Playwright Inspector as below 
npx playwright codegen HTTP://example.com
Enter fullscreen mode Exit fullscreen mode
  • 4. Log Console Messages - Print browser console message in headless mode as below 
page.on('console', (msg) => {
     console.log(`Console: ${msg.type()} - ${msg.text()}`);
Enter fullscreen mode Exit fullscreen mode
  • 5. Handle Lazy Loading - For lazy loading elements, use the following functions
    • a. waitForSelector or waitFor
    • b. waitForTimeout
    • c. scrollIntoViewIfNeeded
  • 6. Debug DOM - Use document.querySelector or other query selector in the browser console to locate the elements
  • 7. Capture a screenshot of the failure

If you have reached here, then I made a satisfactory effort to keep you reading. Please be kind enough to leave any comments or share corrections.

My Other Blogs:

Top comments (0)

Read next

safdarali25 profile image

Build Your Own Sleek Digital Clock with Free Source Code

Safdar Ali -

tobidelly profile image

Single Player Tic Tac Toe

TD! -

sudhil profile image

Mystery of Hoisting in JavaScript!

Sudhil Raj K -

msnmongare profile image

Node.js is not a JavaScript framework

Sospeter Mong'are -