DEV Community

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

Posted on • Edited on

2

Supercharge Your E2E Tests with Playwright and Cucumber Integration

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. This configuration file is the place where various configurations related to Cucumber can be specified. Here is the link to explore all available options of Cucumber Configuration

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

Step 4: Configure Test Reporting

Create cucumber.report.js - A file in the root of the project to configure the test report. Report is the evidence to show whether or not tests are running per expectation. All available 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

Conclusion

This article only scratches the surface of what’s possible with Playwright and Cucumber for E2E testing. To truly master these tools and unlock their full potential, I strongly recommend exploring the official documentation for Playwright and Cucumber. The official guides are invaluable resources, offering in-depth explanations, best practices, and examples straight from the source.

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:

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay