Restart browser for each feature instead of for each Scenario

[ahmed-al-sadoon]

Hi there,
I'm using SerenityJS with Cucumber and Playwright and I have a feature file with multi scenarios, I would like that the browser restartet for each feature instead of each scenario like in Serenity-BDD "restart.browser.for.each = feature".
Is it posssible in SerenityJS?

[jan-molak]

Hi @ahmed-al-sadoon!

Cucumber.js hooks work in the scope of an entire test suite (BeforeAll/AfterAll), scenario (Before/After), or a step (BeforeStep/AfterStep). Cucumber doesn't support hooks that would be executed before/after a feature because of the reasons described in cucumber/cucumber-js#914 (comment)

Also, it's usually better to keep your test scenarios isolated, so that the state from one scenario doesn't leak to another.

Having said that, if you've considered the above and concluded that you still want to do it, here's how.

Integrating with Playwright

Serenity/JS actors integrate with Playwright using the ability to BrowseTheWebWithPlaywright.

There are two ways to inject Playwright API into this ability that work slightly differently:

• BrowseTheWebWithPlaywright.using(browser, options) creates a new Playwright browser context and page the first time the ability is used. When the actors are dismissed - it closes any open pages, as well as the context itself. Note that actors instantiated in a Before hook or a step definition are dismissed when the scenario finishes, while actors instantiated in BeforeAll are dismissed when all the scenarios finish. This is the setup recommended for most Cucumber integrations and offered in the default template
• BrowseTheWebWithPlaywright.usingPage(page, options) - assumes that the test runner, such as Playwright Test, is responsible for managing the browser context and creating the initial page, so will not create a new context or new page, but reuse the received object. In this case, when the actor is dismissed, any additional pages/new tabs opened while the actor was active will be closed, but the initial page and context are left intact. This setup is recommended and default for Playwright Test runner.

Note that both the above setups keep the actual browser process running for the duration of your entire test run and operate on browser context, which is much cheaper and faster to create and destroy than restarting the whole browser.

Reusing the same page between scenarios

Caution

Reusing the same page object between test scenarios will ensure that Serenity/JS will not attempt to close it, but will likely lead to state leakage and flaky tests if your test scenarios rely on other scenarios to bring the system under test to a desired state.
A common anti-pattern is to have a feature file where the first scenario logs the test user in, and the second scenario assumes that the user is already logged in, or similar. Please try to avoid that and keep your scenarios independent.

To reuse the same page between test scenarios, you can follow the pattern proposed in the Playwright Test documentation.

So instead of injecting the browser, as recommended in the Serenity/JS Cucumber Playwright template:

import { AfterAll, BeforeAll, setDefaultTimeout } from '@cucumber/cucumber';
import { configure } from '@serenity-js/core';
import * as playwright from 'playwright';

let browser: playwright.Browser;

BeforeAll(async () => {

    browser = await playwright.chromium.launch({
        headless: true,
    });

    configure({
        actors: Cast.where(actor => {
          return actor.whoCan(BrowseTheWebWithPlaywright.using(browser)),
        }),
    });
});

AfterAll(async () => {
    if (browser) {
        await browser.close();
    }
});

You create a context yourself, instantiate the initial page, and inject that instead:

import { AfterAll, BeforeAll, setDefaultTimeout } from '@cucumber/cucumber';
import { configure } from '@serenity-js/core';
import * as playwright from 'playwright';

let browser: playwright.Browser;
let page: playwright.Page;

BeforeAll(async () => {

    browser = await playwright.chromium.launch({
        headless: true,
    });
    
    page = await browser.newPage();

    configure({
        actors: Cast.where(actor => {
          return actor.whoCan(BrowseTheWebWithPlaywright.usingPage(page)),
        }),
    });
});

AfterAll(async () => {
    if (page) {
        await page.close();
    }

    if (browser) {
        await browser.close();
    }
});

This way, all your test scenarios will reuse the same page instance, and Serenity/JS will not attempt to close it.

Since you're now in full control of the page, you can also introduce Before and After hooks that manipulate the page and recreate it when needed.

How to work around the lack of before/after feature hooks

The Cucumber.js team actively discourages the idea of before/after feature hooks, suggesting for you to use @tags instead. I agree with this view and recommend that test scenarios should be independent.

[ahmed-al-sadoon]

Hi @jan-molak
Thanks alot for your reply and your advice