"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": "yarn@4.5.1"
}

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.