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

Answer

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;
       break;
     }
   }
   
   expect(found).toBeTruthy();
});

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