Displaying Additional Information in HTML Reports

Oct 13, 2025 by pinkandtrash.com 54 views

🚀 Feature Request

Displaying Additional Information in HTML Reports

In the world of Continuous Integration (CI) and Continuous Deployment (CD), having a clear and concise report is crucial for developers and teams to understand the status of their builds and deployments. The HTML report generated by Playwright is an excellent feature that provides a detailed view of the test results. However, there is a possibility to further enhance this feature by allowing users to display additional metadata in the HTML report.

The Current State of HTML Reports

In the latest version of Playwright (1.49.0), there is a possibility to provide certain data under the metadata section to display information related to the CI build. This feature is a great step towards making the HTML report more informative and user-friendly. However, there is still room for improvement.

The Need for Customization

As mentioned earlier, the HTML report is a fantastic feature that provides a detailed view of the test results. However, there are situations where users may want to add additional information to the report to make it more accessible and user-friendly. For instance, users may want to add links to CI logs, merge requests, or pull requests to make it easier for others to access the relevant information.

Example Use Case

Let's consider an example where a user wants to add a link to the CI logs and a merge request in the HTML report. They can achieve this by using the metadata section in the Playwright configuration file.

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,
  },
});

In this example, the user is using the metadata section to add a title and two additional pieces of information: the CI/CD logs and the merge request. The CI_JOB_URL and mrURL variables are used to store the URLs of the CI logs and the merge request, respectively.

Motivation

The feature of displaying metadata in the HTML report is a great way to add a small customization possibility to the report. Currently, there is not much that can be done in the amazing HTML report. By allowing users to display additional metadata, we can make the report more informative and user-friendly.

Related Feature Requests

This feature request resonates with the following requests and comments:

These feature requests highlight the need for additional customization options in the HTML report. By displaying metadata, we can make the report more accessible and user-friendly.

Benefits

The feature of displaying metadata in the HTML report has several benefits:

Improved accessibility: By adding links to CI logs, merge requests, and pull requests, users can easily access the relevant information.
Enhanced user experience: The report becomes more informative and user-friendly, making it easier for users to understand the status of their builds and deployments.
Customization: Users can add additional information to the report to make it more relevant to their needs.

Conclusion

🚀 Feature Request

Displaying Additional Information in HTML Reports

The Current State of HTML Reports

The Need for Customization

Example Use Case

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

Related Feature Requests

This feature request resonates with the following requests and comments:

These feature requests highlight the need for additional customization options in the HTML report. By displaying metadata, we can make the report more accessible and user-friendly.

Benefits

The feature of displaying metadata in the HTML report has several benefits:

Improved accessibility: By adding links to CI logs, merge requests, and pull requests, users can easily access the relevant information.
Enhanced user experience: The report becomes more informative and user-friendly, making it easier for users to understand the status of their builds and deployments.
Customization: Users can add additional information to the report to make it more relevant to their needs.

Q&A

Q: What is the purpose of the metadata section in the Playwright configuration file?

A: The metadata section is used to add additional information to the HTML report. This can include links to CI logs, merge requests, or pull requests.

Q: How do I add a link to the CI logs in the HTML report?

A: You can add a link to the CI logs by using the CI_JOB_URL variable in the metadata section of the Playwright configuration file.

Q: Can I add multiple links to the HTML report?

A: Yes, you can add multiple links to the HTML report by using the metadata section in the Playwright configuration file.

Q: What are the benefits of displaying metadata in the HTML report?

A: The benefits of displaying metadata in the HTML report include improved accessibility, enhanced user experience, and customization.

Q: How does this feature request relate to other feature requests?

A: This feature request resonates with the following requests and comments:

Q: What is the current state of the HTML report in Playwright?

A: The current state of the HTML report in Playwright is that it provides a detailed view of the test results. However, there is still room for improvement.

Q: Can I customize the HTML report further?

A: Yes, you can customize the HTML report further by using the metadata section in the Playwright configuration file.

Q: What is the motivation behind this feature request?

A: The motivation behind this feature request is to add a small customization possibility to the HTML report. Currently, there is not much that can be done in the amazing HTML report. By allowing users to display additional metadata, we can make the report more informative and user-friendly.