Supercharge Your ETests 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 @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

Step 2: Setup Project Structure

Organize your project like this:

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

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"],
  },
};

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'
};

Step 5: Write a Feature File

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

npm install @playwright/test playwright-core @cucumber/cucumber cucumber-html-reporter concurrently

Step 6: Write Step Definitions

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

cucumber.js
cucumber.report.js
/e2e
  /features
    example.feature
  /steps
    example.steps.js

Step 7: Add a NPM Test Script

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

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

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:

// 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'
};

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

// 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"

• 4. Log Console Messages - Print browser console message in headless mode as below

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

• 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:

• Integrate Web Component/MFE with plain static HTML
• Cracking Software Engineering Interviews
• My firsthand experience with web component - learnings and limitations
• Micro-Frontend Decision Framework
• Test SOAP Web Service using Postman Tool

The above is the detailed content of Supercharge Your ETests with Playwright and Cucumber Integration. For more information, please follow other related articles on the PHP Chinese website!