Wrap each cucumber step in test.step

[brzezinskimarcin]

Hello,

I would like to combine using playwright-bdd with allure-playwright. The latter one allows to generate rich HTML reports of test runs. However, instead of showing details of execution with low-level playwright API steps, I would like it to show details in the form cucumber feature steps.

Right now, if I set details: false in allure-playwright, nothing is shown.

It's caused by the fact, that with details: false it only shows steps defined with test.step function.

Generated test file:

/** Generated from: features\example.feature */
import { test } from "playwright-bdd";

test.describe("Playwright site", () => {

  test("Check title", async ({ Given, When, Then }) => {
    await Given("I open url \"https://playwright.dev\"");
    await When("I click link \"Get started\"");
    await Then("I see in title \"Playwright\"");
  });

});

And if I wrap each cucumber step with test.step

/** Generated from: features\example.feature */
import { test } from "playwright-bdd";

test.describe("Playwright site", () => {

  test("Check title", async ({ Given, When, Then }) => {
    await test.step("Given I open url \"https://playwright.dev\"", () => Given("I open url \"https://playwright.dev\""));
    await test.step("When I click link \"Get started\"", () => When("I click link \"Get started\""));
    await test.step("Then I see in title \"Playwright\"", () => Then("I see in title \"Playwright\""));
  });

});

everything looks great in allure report:

So my questions are:

1. Would it be possible to wrap each cucumber step with playwright's test.step during test generation?
2. If not, is there a possibility to hook into to test generation process and make slight modifications? I think this could be useful not only in this case, but also in different scenarios as well.

Actually, if I understand the source code correctly and if it makes sense to always define playwright step, then maybe it could be changed directly on fixture level, somwhere inside src/run/invoke.ts:L6-L14

[vitalets]

I like this suggestion! Will check.
Also it would be useful to show bdd steps in built-in html report, currently it shows the following:

Answering your questions:

1. Yes, we can wrap cucumber steps with playwright test.step. I'm just thinking, will it show correct sources when expanding steps in html report
2. Hooking into test-generation process is interesting idea. Could you create separate issue for that and share more thoughts and usecases?

Relates to #9

[vitalets]

Playwright's html report when wrapping with test.step in generated test files:

test.describe("Playwright site", () => {

  test("Check title", async ({ Given, When, Then }) => {
    await test.step("Given I open url \"https://playwright.dev\"", () => Given("I open url \"https://playwright.dev\""));
    await test.step("When I click link \"Get started\"", () => When("I click link \"Get started\""));
    await test.step("Then I see in title \"Playwright\"", () => Then("I see in title \"Playwright\""));
  });

});

Report:

[NikkTod]

Sorry to rush, but any chance to push/merge that one 🙏

Will have a demo in a week and wanted to show some nice bdd reporting📈

[vitalets]

Sorry to rush, but any chance to push/merge that one 🙏

Will have a demo in a week and wanted to show some nice bdd reporting📈

Yes, you will show it. Hoping to release v3 until end of this week.