"Stepception" in playwright allure report when iterating over values with allure-js-common.step()

[mcsymiv]

Hi there,

I'm having trouble to understand how can i show allure steps in report without nesting.
Here is how it is shown in the report (see screenshot below) when i'm iterating over some arbitrary values with allure step:

Ive added repository whoever wants to reproduce it.
STR:

npm i
npx playwright test --config playwright.config.ts
allure generate allure-results --clean -o allure-report && allure open

But essentially test setup looks like this:

test('stepception', { tag: ['@stepception'] }, 
  async ({ page }) => {

  const logos: string[] = [
    'VS Code',
    'Bing',
    'Outlook',
    'Non existing logo'
  ];

  logos.forEach(async name => {
    await step('validate logo alt tag', async () => {
      await expect(page.getByRole('link', { name })).toBeVisible()
    });
  });
})

I'd expect to see validate logo alt tag steps stacked in report for each passed or failed value in logos array, but not nested. Like so:

> validate logo alt tag - VS Code
> validate logo alt tag - Bing
> validate logo alt tag - Outlook
> validate logo alt tag - Non existing logo

Is there a way to achive my expected view instead of nested one? Or maybe someone knows anoter way to check lots of values and show readable result in report.
Considering that in production i have 50+ values to check the same way. And they come from API call, so it was an elequant solution until we saw the report.

[baev]

Could you please specify the versions of allure-playwright and @playwright/test?

I just checked it with using latest versions:

{
  "name": "playwright-yarn-esm-ts",
  "type": "module",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "playwright test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@playwright/test": "^1.48.2",
    "@types/node": "^22.9.0",
    "allure-js-commons": "^3.0.6",
    "allure-playwright": "^3.0.6",
    "typescript": "^5.6.3"
  },
  "packageManager": "[email protected]"
}

import { test, expect } from "@playwright/test";
import { step } from "allure-js-commons";

test("sample test", async ({ page }) => {
  await page.goto("https://allurereport.org");
  const names = [
    "Manual QA",
    "Developers",
    "Project Managers"
  ]
  for (const name of names) {
    await step(`check ${name}`, async () => {
      await expect(page.getByRole("button", { name })).toBeVisible();
    })
  }
});

And everything works as expected:

[mcsymiv]

Sure:

{
  "name": "stepception",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@playwright/test": "^1.48.2",
    "@types/node": "^22.9.0"
  },
  "dependencies": {
    "allure-playwright": "^3.0.6"
  }
}

ha, now that i tried with for...of instead of forEach it shows as in your screenshot.

so this

  for (const name of names) {
    await step(`check ${name}`, async () => {
      await expect(page.getByRole("button", { name })).toBeVisible();
    })
  }

and this

  names.forEach(async name => {
    await step(`check ${name}`, async () => {
      await expect(page.getByRole("button", { name })).toBeVisible();
    }
  }

result in different steps view.

Guess, it answers my question, thank you)

[baev]

Yeah, the issue is that you have async functions in forEach. This leads to unresolved promises, which is why you have an undetermined order and nesting of steps.

[sumitdasonline]

Hey @baev , I am facing a similar problem. With Playwright-allure

my code uses a lot of Promise.alls to make sure we wait for corrent calls. For example.

await Promise.all([wait for a network event(function a), a click action(function b])

function a {
await test.step(description of the function a, async () => {
whatever the function does
})}

function b {
await test.step(description of the function b, async () => {
whatever the function does
})}

So this produces similar nested step report And because we have a loooot of this type of waits in one test, finding a failure in a report is getting difficult.

We also tried something like this

await test.step('whatever the whole promie.all does, async () => {
await Promise.all([wait for a network event(function a), a click action(function b])
})

await test.step('next steps, async () => {
next steps
})

And this also results in the second step nested in the first one. Can you help me out with this? Is there a way around to this?

Btw love the reporter overall with all the features we can have. But this one is a head scratcher :(