Prettier Playwright MS Teams Report

Prettier Playwright MS Teams Report is an enhanced version of the original playwright-msteams-reporter. This package improves the reporting capabilities of Playwright by sending detailed and visually appealing test results to Microsoft Teams.

Features

• Enhanced Reporting: Generates detailed test reports with additional metrics and visualizations.
• Donut Chart Visualization: Includes a donut chart to visualize the distribution of passed, failed, skipped, and flaky tests.
• Percentage Metrics: Displays the percentage of each test status alongside the total counts.
• Customizable Notifications: Allows customization of notification messages and styles.
• Grouped Test Details: Groups test results by status and provides detailed information for each test.

Prerequisites

To use this reporter, you must have a Microsoft Teams webhook URL. You can create a webhook URL using the Microsoft Teams Power Automate connector or the Microsoft Teams incoming webhook functionality.

Installation

To install the package, run:

npm install prettier-playwright-msteams-report

Usage

To use the reporter in your Playwright tests, configure it in your Playwright configuration file (playwright.config.ts or playwright.config.js):

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

export default defineConfig({
  reporter: [
    ['line'],
    ['prettier-playwright-msteams-report', {
      webhookUrl: 'YOUR_TEAMS_WEBHOOK_URL',
      title: 'Playwright Test Results',
      notifyOnSuccess: true,
      enableEmoji: true,
      linkToResultsUrl: 'YOUR_CI_RESULTS_URL',
      linkToResultsText: 'View CI Results',
      linkTextOnFailure: 'View Failure Details',
      linkUrlOnFailure: 'YOUR_FAILURE_DETAILS_URL',
      mentionOnFailure: ['[email protected]'],
      mentionOnFailureText: 'Attention: Test Failures Detected!',
      debug: false,
      quiet: false,
    }]
  ],
});

Configuration Options

• webhookUrl: The Microsoft Teams webhook URL to send the notifications.
• title: The title of the notification.
• notifyOnSuccess: Whether to send notifications for successful test runs.
• enableEmoji: Whether to include emojis in the notification.
• linkToResultsUrl: URL to the CI results.
• linkToResultsText: Text for the link to CI results.
• linkTextOnFailure: Text for the link to failure details.
• linkUrlOnFailure: URL to the failure details.
• mentionOnFailure: List of email addresses to mention on test failures.
• mentionOnFailureText: Custom text for mentioning users on test failures.
• debug: Enable debug mode to log the notification payload without sending it.
• quiet: Suppress console logs.

Changes from the Original

• Donut Chart Generation: Added a function to generate a donut chart using QuickChart to visualize test results.
• Percentage Metrics: Updated the table to include percentage metrics for each test status.
• Background Color: Set the background color of the notification container to black for better contrast.
• Grouped Test Details: Added detailed grouping of test results by status (passed, failed, skipped, flaky) and included these details in the adaptive card.
• Dynamic Report Path: Dynamically determine the report path for better flexibility.
• Improved Logging: Enhanced logging for better debugging and transparency.

Example Cards

Here you can see an example card for failed test results:

Credits

This project is based on the original playwright-msteams-reporter by Elio Struyf. You can reach him at [email protected].

Contributing

Contributions are welcome! Please open an issue or submit a pull request with your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Support

If you find this project useful, consider supporting me: