Feature: Display data table content in Allure report

[alescinskis]

The problem I'm using Allure for Playwright as a reporting tool (https://github.com/allure-framework), and content of Data Table is not displayed in report.

Steps "framework opens storybook "core components core", story "currency" and feature "currency" with controls:" should be expandable, with data table values presented there (at least it was like this at my previous work where we used webdriverio + allure)

Solution I'm not quite sure if it's achievable or not, as quick search in their repo didn't show anything related to data table and playwright, but perhaps there's some workaround. https://github.com/search?q=repo%3Aallure-framework%2Fallure-js%20datatable&type=code As far as I know, Allure is quite popular reporting tool, so possibly this feature request might be very welcomed.

[vitalets]

I've found that allure supports step parameters that could be a great way to show data tables:

• https://github.com/allure-framework/allure2/pull/211

Although in allure-playwright docs I don't see an option to pass step parameters (only suite parameters). I've tried to call allure.parameter() and it sets parameter on suite level, not step level. Maybe you can look deeper on that.

Here are two relevant discussions on displaying dataTables in allure:

• https://github.com/orgs/allure-framework/discussions/1528
• https://github.com/allure-framework/allure2/issues/355

Lookin at CucumberJSAllureReporter by your link I think the most suitable workaround is to utilize allure.attachment method. For example:

Feature: todo page

    Scenario: adding todos
        Given I am on todo page
        When I add todos:
          | title  | description         |
          | todo 1 | very important item |
          | todo 2 | can be skipped      |

Step definition:

When('I add todos:', async ({ page }, dataTable: DataTable) => {
  const csvDataTable = dataTable.raw().map(r => r.join(',')).join('\n');
  await allure.attachment("Data table", csvDataTable, 'text/csv');
});

Allure report - requires a few extra clicks, but shows needed data:

@alescinskis could you show a screenshot how allure report with data table looked at your prev work?

[alescinskis]

@vitalets thanks for the info. I think it looked similar to your screenshot, and it certainly wouldn't be an issue in my case to make few clicks, as long as data table information is present.

Where are you importing allure from in your example? I'm getting TS2339: Property  attachment  does not exist on type  typeof allure  if I import { allure } from "allure-playwright";.

Unfortunately I cannot provide any old allure report screenshots from my previous work.

[vitalets]

I've used exactly import { allure } from 'allure-playwright';. My version of is allure-playwright is:

npm show allure-playwright version
2.9.2

Could you check your version?

[alescinskis]

Yes, that helped, for some strange reason I was running a very old version of allure-playwright - 2.4.0

[alescinskis]

Eventually I had to fallback to 2.6.0, as for some reason the formatting of the report changed, despite my attempts to change settings https://github.com/orgs/allure-framework/discussions/2160

[vitalets]

@alescinskis I've created playwright config similar to yours - with project "chrome". With suiteTitle: false it does not show filename in report. Maybe you looked on some outdated report as well?

With suiteTitle: false:

With suiteTitle: true:

allure-playwright version is 2.9.2

[alescinskis]

I've tried again 2ith 2.9.2 but to no avail. I've double-checked that allure-results folder is removed prior to launching tests. playwright.config.ts has this:

  reporter: [
    [
      'allure-playwright',
      {
        detail: false,
        suiteTitle: false,
      },
    ],
  ],

I've restarted Intellij IDEA and invalidated cache, but I get this result:

I don't understand what I'm doing wrong :/

[vitalets]

Magic.. Lets check version of allure itself. For me it's:

$ allure --version
2.22.0

Also what command do you use for opening allure report? I use the following (notice --clean flag):

allure generate --clean && allure open

[alescinskis]

for me:

% allure --version
2.23.0

I usually just do rm -rf allure-results in the folder with reports, but I've tried also what you've suggested allure generate --clean && allure open and have suiteTitle: false, but it still results in path-to-file in the report

[vitalets]

Could you try on a brand new project with only playwright (no playwright-bdd)?

[alescinskis]

Hi!

I've tried new clean playwright project (the default that comes with playwright setup), installed "allure-playwright": "^2.9.2", and everything works as intended

reporter: [
    [
      "allure-playwright",
      {
        detail: false,
        suiteTitle: false,
      },
    ],
  ],

I've noticed that I was missing devDependancy "@types/node": "^20.8.9", in my project, but I added it to my project, updated allure-playwright, gave another try and yet issue is the same, so it's not caused by lack of this particular dependency.

[vitalets]

updated allure-playwright

To what version did you update allure-playwright?

[alescinskis]

2.9.2

[vitalets]

@alescinskis could you add playwright-bdd to that brand new project, to ensure that there is no impact from it?

For your main project lets try to make deeper clean up:

1. remove all allure stuff rm -rf allure-results allure-report
2. remove node_modules
3. run npm i
4. run tests again and open allure report with allure generate --clean && allure open
5. 🤞

[alescinskis]

Installed playwright-bdd to new project, new project wasn't impacted by that.

Tried deep clean up for my project, didn't help, still seeing path to file. I don't know, maybe it's something in the config file...

import { defineConfig, devices } from '@playwright/test';
import { defineBddConfig } from 'playwright-bdd';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */

const testDir = defineBddConfig({
  paths: ['tests/e2e', 'tests/visual-regression'],
  require: ['tests/steps/*.ts'],
  outputDir: 'tests/bddgen/',
  featuresRoot: 'tests/',
  importTestFrom: 'tests/commonUtils/browserSetup.ts',
});
/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir,
  snapshotPathTemplate: 'tests/{testFileDir}/screenshots/{projectName}/{arg}{ext}',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: [
    [
      'allure-playwright',
      {
        detail: false,
        suiteTitle: false,
      },
    ],
  ],
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    launchOptions: {
      ignoreDefaultArgs: ['--hide-scrollbars'],
    },
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: process.env.CI_ENVIRONMENT_URL || 'http://localhost:9001/',
    screenshot: 'only-on-failure',
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
      retries: 1,
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
      retries: 1,
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
      retries: 1,
    },
    /* Test against mobile viewports. */
    {
      name: 'chrome-mobile-portrait',
      use: {
        userAgent:
          'Mozilla/5.0 (Linux; Android 12.0; Moto G (5)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.5938.62 Mobile Safari/537.36',
        viewport: {
          width: 412,
          height: 915,
        },
        deviceScaleFactor: 3,
        isMobile: true,
        hasTouch: true,
        defaultBrowserType: 'chromium',
      },
      retries: 1,
    },
    {
      name: 'chrome-mobile-landscape',
      use: {
        userAgent:
          'Mozilla/5.0 (Linux; Android 12.0; Moto G (5)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.5938.62 Mobile Safari/537.36',
        viewport: {
          width: 915,
          height: 412,
        },
        deviceScaleFactor: 3,
        isMobile: true,
        hasTouch: true,
        defaultBrowserType: 'chromium',
      },
      retries: 1,
    },
  ],
});

[alescinskis]

oh wow I've realised what was causing this issue.

so in config file I had allure-playwright but I was launching tests by command npx bddgen --tags='@storybook and (not @localisation)' && npx playwright test core/select --reporter=allure-playwright --workers=4... which appears to be re-writing the defaults. Once I removed --reporter and gave it another try allure report was presented correctly without displaying path to file. Oooof.

[vitalets]

And we didn't check the command you are using for running tests! Well, it's good that there is no deeper problem in code :)

[dpjp]

Hi @vitalets - Am trying to configure the below steps in hooks instead of having it in each step where I pass my dataTable. const csvDataTable = dataTable.raw().map(r => r.join(',')).join('\n'); await allure.attachment("Data table", csvDataTable, 'text/csv');

for example, We tried using the below step in hooks for Given,

Given('.*', async function({$step, allure,param}) { console.log("test given step"); if ($step.dataTable) { const markdownTable = $step.dataTable.raw().map(r => r.join(',')).join('\n'); await allure.addAttachment("Data table", markdownTable, 'text/csv'); } }); But this function is not getting executed. Can you help us or let us know how it can be configured in hooks?

[vitalets]

Hi @dpjp ! Let me clarify - you want to automatically attach to allure each step that has DataTable, right?

If yes, we need 2 things to be added to playwright-bdd:

1. support BeforeStep / AfterStep hooks
2. add $step.dataTable property

Then we will be able to have the following:

// possible syntax
AfterStep(async ({ $step, allure }) -> {
  if ($step.dataTable) {
    const markdownTable = $step.dataTable.raw().map(r => r.join(',')).join('\n');
    await allure.addAttachment("Data table", markdownTable, 'text/csv');
  }
});