Use decorators to define steps in Page Object Models

[vitalets]

Imagine I use TodoPage fixture (page object model) from Playwright docs:

// fixtures.ts

export class TodoPage {
  private readonly inputBox: Locator;
  private readonly todoItems: Locator;

  constructor(public readonly page: Page) {
    this.inputBox = this.page.locator('input.new-todo');
    this.todoItems = this.page.getByTestId('todo-item');
  }

  async goto() {
    await this.page.goto('https://demo.playwright.dev/todomvc/');
  }

  async addToDo(text: string) {
    await this.inputBox.fill(text);
    await this.inputBox.press('Enter');
  }
}

Typical BDD step definitions for todoPage will be:

// steps.ts

Given('I am on todo page', async ({ todoPage }) => {
  await todoPage.goto();
});

When('I add todo {string}', async ({ todoPage }, text: string) => {
  await todoPage.addToDo(text);
});

For me such step definitions look like a boilerplate code. It would be more convenient to just mark todoPage methods with step text - the same way as it's done in Cucumber Java. Having new JS decorators syntax it should be possible:

// fixtures.ts

export class TodoPage {
  private readonly inputBox: Locator;
  private readonly todoItems: Locator;

  constructor(public readonly page: Page) {
    this.inputBox = this.page.locator('input.new-todo');
    this.todoItems = this.page.getByTestId('todo-item');
  }

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

  @When('I add todo {string}')
  async addToDo(text: string) {
    await this.inputBox.fill(text);
    await this.inputBox.press('Enter');
  }
}

In that case there is no need for additional steps.ts file. We just define fixture and write scenarios.

Possible downside is that VSCode BDD extensions maynot recognize such step definitions (to be checked).

Would appreciate your ideas on that.

[NikkTod]

@vitalets This would definitely save us some code typing and linking between feature -> steps -> pages.
Hope it is not affecting the VSCode BDD extensions with all the bindings :)

[jzaratei]

That could be interesting, but what if I want to make use of multiples pages objects in a single step, for example:

When("I delete an old project", async ({ ProjectsPage, deleteProjectPage }) => {
  oldProjectName = await ProjectsPage.getLastProjectName();
  await deleteProjectPage.deleteProject(oldProjectName);
});

This implementation could be still be possible?

[vitalets]

That could be interesting, but what if I want to make use of multiples pages objects in a single step, for example:

When("I delete an old project", async ({ ProjectsPage, deleteProjectPage }) => {
  oldProjectName = await ProjectsPage.getLastProjectName();
  await deleteProjectPage.deleteProject(oldProjectName);
});

This implementation could be still be possible?

Yes, that will be possible as regular Given / When / Then functions will be available as well.

Btw, if "delete project" is some link / button on ProjectsPage - shouldn't it be part of ProjectsPage?

[vitalets]

Released in v4.0.0. Docs.

I would appreciate if try it and share your feedback :)
Personally I've moved one of my projects to BDD decorators and I found this syntax very concise.

[konkakaka]

@vitalets which extension on Visual Studio Code on Mac that would suggest the steps while typing existing defined step on feature file? I tried Cucumber (Gherkin) Full Support, and others, but it doesn't seem work, thank you!

[vitalets]

@konkakaka Cucumber (Gherkin) Full Support works for me. Could you share more details, especially .vscode/settings.json?