Cucumber and playwright integration: cucumber doesn't store cookies and each scenario tries to login

Question

I am trying to integrate cucumber and playwright in my framework. When i try to run different features or multiple scenarios in one feature, if one scenario is logging on a site, another scenarios and features will be logged out. I tried to store state in storageState like it did in playwright, but somehow it doesn't work in cucumber. My setup file:

import { Before, After, BeforeAll, AfterAll, Status, setDefaultTimeout } from '@cucumber/cucumber';
import { OurWorld } from "./custom-world";
import config from './config';
import { AllPagesObject } from './src/pages/all-pages-object';
import {chromium, firefox, webkit,} from 'playwright';
import { FullConfig } from '@playwright/test';
const fs = require("fs");

setDefaultTimeout(config.defaultTimeout);

BeforeAll(async function (this: OurWorld) {
  const commonBrowserOptions = {
    headless: config.runHeadless,
    slowMo: 50,
  };

  switch (config.browser) {
    case 'firefox':
      global.browser = await firefox.launch(commonBrowserOptions);
      break;

    case 'webkit':
      global.browser = await webkit.launch(commonBrowserOptions);
      break;

    default:
      global.browser = await chromium.launch(commonBrowserOptions); 
      
  }
});

Before(async function () { //this: OurWorld
  if(fs.existsSync('./storageState.json')){ 
    this.context = await global.browser.newContext({storageState: "./storageState.json"});
    console.log(this.context);
    this.page = await this.context.newPage();
    this.pagesObj = new AllPagesObject(this.page, this.context);
  } else {
    this.context = await global.browser.newContext();
    this.page = await this.context.newPage();
    this.pagesObj = new AllPagesObject(this.page, this.context);
    await this.page.goto("https://beta.bluetape.com/");
    await this.page.locator('[data-testid="login"]').fill("katsiaryna+atest@bluetape.com");
    await this.page.locator('"Continue"').click();
    await this.page.locator('[data-testid="password"]').fill("A1234567");
    await this.page.locator('"Log In"').click();
    await this.page.waitForLoadState('networkidle');
    await this.page.context().storageState({path: "./storageState.json" as string});
  }
});


// Cleanup after each scenario
After(async function (this: OurWorld) {

});

AfterAll(async function () {
  await this.page.close();
  await this.context.close();
  await global.browser.close();
});

I was trying this approach: in before feature i check if i have a storageState file. If i have one - i load state from it. If i don't have - i login and save state into storageState. But on the run of each feature, and even on every scenario in a single feature cucumber opens a new instance of a browser and test fails cause it is not logged in. Any advice how to manage cookies and state between tests in cucumber+playwright is highly appreciated. Working example of cucumber + playwright with a single state between tests will be even better)

Answer 1

When cuking each scenario is a independent single test, starting from scratch and exercising a particular piece of behaviour. Scenarios are not designed to be run in any sort of sequence, or to have one scenario set up things for another scenario.

So ...

• each scenario will login and terminate the session when complete
• any data setup for one scenario will be removed when the scenario completes

All of this is by design to ensure that you don't get the actions of one scenario causing bugs in another scenario. This is standard practice for all testing frameworks.

You should not be trying to manage cookies and state between tests instead cookies and state should be setup and torn down for each individual scenario.