What are the steps to integrate Playwright with Cucumber for testing?


Sure, let's get started with integrating Playwright and Cucumber for testing.

First, install the necessary dependencies:

npm install --save-dev @playwright/test cucumber

Next, create a "features" directory in your project's root. Inside, create "example.feature" and define your feature and scenarios using Gherkin syntax:

Feature: Search on Ray
  As a user
  I want to search for information on Ray
  So that I can find what I'm looking for

  Scenario: Searching for Playwright documentation
    Given I am on the Ray homepage
    When I search for "Playwright documentation"
    Then I should see search results containing "Playwright"

Now, create a "step-definitions" directory inside "features". Here, create "example.steps.ts" for your step definitions.

import { Given, When, Then } from '@cucumber/cucumber';
import { chromium } from 'playwright';

let page;

Given('I am on the Ray homepage', async () => {
  const browser = await chromium.launch();
  page = await browser.newPage();
  await page.goto('https://www.ray.run');

When('I search for {string}', async (searchQuery) => {
  await page.fill('[name="q"]', searchQuery);

Then('I should see search results containing {string}', async (expectedText) => {
   const resultsSelector = '.g h3';
   await page.waitForSelector(resultsSelector);
   const elements = await page.$$(resultsSelector);
   let found = false;
   for (const element of elements) {
     const textContent = await element.textContent();
     if (textContent.includes(expectedText)) {
       found = true;

And that's it! You've successfully integrated Playwright with Cucumber. Happy testing!


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.