[Feature]: HTML Report: Metadata: Possibility to display metadata in HTML report when information is provided

[SishaMafonov]

🚀 Feature Request

Warm greetings 👋

It would be nice to have a possibility to display additional (optional) information in the HTML. In 1.49.0 version was possibility to provide certain data under metadata section to display information related to the CI build.

Reference: https://github.com/microsoft/playwright/blob/release-1.49/packages/html-reporter/src/metadataView.tsx#L68-L124

Consumer could add relevant information to create easy access to CI logs, Merge / Pull request via links:

It simplify process when CI/CD system doesn't have possibility to display reports in their UI directly.

Feature request resonate with following requests and comments:

• https://github.com/microsoft/playwright/issues/11319#issuecomment-2374481035
• https://github.com/microsoft/playwright/issues/30983

Example

It would be nice to grant possibility to display metadata in the HTML via PW confige:

import { defineConfig } from '@playwright/test';

const {
    CI_JOB_URL,
    CI_MERGE_REQUEST_IID,
    CI_PROJECT_URL,
} = process.env;

const mrURL = `${CI_PROJECT_URL}/-/merge_requests/${CI_MERGE_REQUEST_IID}`;

export default defineConfig({
  metadata: {
      title: "Pipeline information",
      "CI/CD Logs": CI_JOB_URL,
      "Merge Request": mrURL,
  },
});

Motivation

The feature may allow to add a small customization possibility of HTML report via standard configuration. For a moment there's not much that can be done in amazing HTML report: https://github.com/microsoft/playwright/issues/16089 😢

[michalD-qa]

+1 This feature would be very valuable, as it would allow for more efficient work with reports. Is there a chance it could be implemented?

[yairEO]

I would prefer a way to customize the HTML reporter as much as possible without actually copying the source-code and hard-code manipulate it, essentially creating my own reporter.. this will get out-of-sync with the official reporter and I consider such practice a last-resort.

I work a lot with screenshots (png files) and the reporter's width is sometimes too narrow, or there's too much blabbing for a failed test, where all I want to see is the screenshot comparison without scrolling to it.

ideally I would like to see all the failed tests' screenshots in a single page where I can review about 50 of them rapidly. many times they are failing due to style changes and I simply re-create the screenshots, but first I must review them manually.. which is time consuming, and the reporter is my tool of work.. not ideal.

[buti1021]

It seems like this was possible at some point: https://github.com/microsoft/playwright/pull/34517 @Skn0tt @dgozman Has this been removed (accidentally)?

[kasperjjit]

+1

[buti1021]

Could we have some feedback on this one? :)

[Smile-TA]

+1