[Question]: How to reuse a non-decorator steps in decorators steps

[HariHaraBhuvanesh]

Question

I have a use case where non-decorator steps are in a backend library which is being consumed by another project.

Currently project consuming the library also has non-decorator steps for easily reusability purpose via fixture.

But however I want to the consuming project to use decorator steps and have it invoke non-decorator steps. I tried to setup the non-decorator steps in a variable export (bundled with rollup) and define that as a typeof in the consuming project fixture. But it ended up say "Fixture has unknown parameter "

Maybe this is not feasible ? Could you please point to some example for this use case ?

this is similar to #352

[vitalets]

Hey @HariHaraBhuvanesh, in general it should work.
Could you construct a minimal setup showing the issue? From scratch or based on https://github.com/vitalets/playwright-bdd-example.

[HariHaraBhuvanesh]

@vitalets

Here is the setup

Feature File:

Feature: Playwright site

  Scenario: Adding todos
    Given I am on todo page
    When I add todo "foo"
    And I add todo "bar"
    Then visible todos count is 2

Fixture File:

import { test as base, createBdd } from "playwright-bdd";
import { ActionPage } from "../steps/actions.steps";
import { ConditionPage } from "../steps/condition.steps";
import { ValidationPage } from "../steps/validation.steps";
import { clikSteps } from "../steps/click.steps";

export type Fixtures = {
    conditionPage: ConditionPage,
    actionPage: ActionPage,
    validationPage: ValidationPage,
    click: typeof clikSteps
}
export const test = base.extend<Fixtures>({
    conditionPage: async ({ page }, use) => {
        await use(new ConditionPage(page));
    },
    actionPage: async ({ page, validationPage }, use) => {
        await use(new ActionPage(page, validationPage));
    },
    validationPage: async ({ page, click  }, use) => {
        await use(new ValidationPage(page, click));
    },
});

export const { Given, When, Then } = createBdd(test);

condition.steps.ts

import { Page } from "@playwright/test";
import { Fixture, Given } from "playwright-bdd/decorators";

export @Fixture('conditionPage') class ConditionPage {

    constructor(private page: Page) {}

    @Given('I am on todo page')
    async open () {
        await this.page.goto('https://demo.playwright.dev/todomvc/');
    }
}

actions.steps.ts

import { Page } from "@playwright/test";
import { Fixture, When } from "playwright-bdd/decorators";
import { ValidationPage } from "./validation.steps";

export @Fixture('actionPage') class ActionPage {

    constructor(private page: Page, private validation: ValidationPage) {}

    @When('I add todo {string}')
    async addToDo(text: string) {
        await this.page.locator('input.new-todo').highlight();
        await this.page.locator('input.new-todo').fill(text);
        await this.page.locator('input.new-todo').press('Enter');
    }
}

validation.steps.ts (decorator style step reusing non-decorator steps)

import { clikSteps } from './click.steps';
import { expect, Page } from "@playwright/test";
import { Fixture, Then } from "playwright-bdd/decorators";

export @Fixture('validationPage') class ValidationPage {

    constructor(private page: Page, private click: typeof clikSteps) {}

    @Then('visible todos count is {int}')
    async checkVisibleTodosCount(count: number) {
        await expect(this.page.getByTestId('todo-item')).toHaveCount(count);
        const page = this.page;
        await this.click.getTodo({page});
    }
}

click.steps.ts (this is non-decorator steps)

import { When } from "../fixtures/fixtures";
export const getTodo = When('I get todo', async ({ page }) => {
    const text = await page.getByTestId('todo-item').allTextContents();
    console.log(text);
});

export const getUrl = When('I navigate to the page', async ({ page}) => {
    await page.goto('https://demo.playwright.dev/todomvc/');
    await page.waitForTimeout(5000);
});

export const clikSteps = { getUrl, getTodo }

Below is the error:

➜  playwright-bdd-poc pnpm bddgen && pnpm playwright test                                              
Fixture "validationPage" has unknown parameter "click".

   at ../src/fixtures/fixtures.ts:13

  11 |     click: typeof clikSteps
  12 | }
> 13 | export const test = base.extend<Fixtures>({
     |                          ^
  14 |     conditionPage: async ({ page }, use) => {
  15 |         await use(new ConditionPage(page));
  16 |     },
Fixture "validationPage" has unknown parameter "click".

   at ../src/fixtures/fixtures.ts:13

  11 |     click: typeof clikSteps
  12 | }
> 13 | export const test = base.extend<Fixtures>({
     |                          ^
  14 |     conditionPage: async ({ page }, use) => {
  15 |         await use(new ConditionPage(page));
  16 |     },
Fixture "validationPage" has unknown parameter "click".

   at ../src/fixtures/fixtures.ts:13

  11 |     click: typeof clikSteps
  12 | }
> 13 | export const test = base.extend<Fixtures>({
     |                          ^
  14 |     conditionPage: async ({ page }, use) => {
  15 |         await use(new ConditionPage(page));
  16 |     },
Fixture "validationPage" has unknown parameter "click".

   at ../src/fixtures/fixtures.ts:13

  11 |     click: typeof clikSteps
  12 | }
> 13 | export const test = base.extend<Fixtures>({
     |                          ^
  14 |     conditionPage: async ({ page }, use) => {
  15 |         await use(new ConditionPage(page));
  16 |     },


To open last HTML report run:

  pnpm exec playwright show-report

➜  playwright-bdd-poc

[vitalets]

The error is correct, because Playwright needs a definition for the click fixture within base.extend(...). But I suppose you just missed it.

The real issue here is circular dependencies:

• click.steps.ts imports When from fixtures.ts
• fixtures.ts imports click steps to pass them to the validationPage

To resolve this, you can dynamically import click steps inside the validationPage fixture:

    validationPage: async ({ page }, use) => {
        const { default: clikSteps } = await import('./click.steps.js');
        await use(new ValidationPage(page, clikSteps));
    },

[HariHaraBhuvanesh]

@vitalets yeah this works but there are couple of other things issues related to this:

1. Not able to pass this.page when reusing non-decorator steps. works fine when assigned to local variable.

works fine:

Doesn't work:

2. When the non-decorator style is reused either of below method, the function arguments to be passed are not clear:
   - another non-decorator style
   - inside decorator style
   - when bundled and used in above method

In the below example, how to determine what fixture/argument to be passed to the steps ? it can be using page or testInfo or anyother custom fixture. I understand its a type inference and how it is displayed to the user but is there a configuration to be enabled that maybe I'm missing or a bug/code update to be done to make it more understandable ?

[vitalets]

1. When reusing a step function, arguments are the same as you define them. Your getTodo is defined as

   export const getTodo = When('I get todo', async ({ page }) => {
     ...
   });
   

   so it expects page param. click.getTodo({ page: this.page }) should also work.

2. About typing the step arguments: it’s hard to make the type narrower because Playwright determines which fixtures are actually available at runtime. This is the same limitation you see in regular Playwright tests: when you write test('my test', async ({ ... }) => ...), it can be tricky to know (statically) which fixtures are available. Playwright’s docs don’t provide a complete list of fixtures.
   For a library of reusable steps (like yours), a practical approach is to add JSDoc to the reusable steps so consumers can quickly see the expected parameters (and get better editor hints).