playwright-teams-notifications

• Prerequisites
• Installation in your project
• Usage
• Options
• Examples
• Mentioning users on failure

playwright-teams-notifications is a npm package that helps you to send notifications to MS Teams via Playwright custom reporter mechanism - Playwright reporters and MS Teams Incoming Webhooks connector.

It comes with plenty customization options to fit your needs.

I found only one existing reporter for MS Teams (playwright-msteams-reporter), but wanted to have something with more content and more customizable at the same time, thus delivering this reporter.

Prerequisites

This package works together with Playwright. Make sure your project is already dependent on it - Get Playwright.

You need to have MS Teams Incoming Webhook connector set up to get the webhook URL - Create Incoming Webhook

Installation in your project

Using npm

npm install -D playwright-teams-notifications

or using yarn:

yarn add -D playwright-teams-notifications

Usage

You have to add reporter configuration to playwright.config.ts file. It is enough to add the webhookUrl option only to make it work, other options are optional. If webhookUrl is not provided, reporter will do nothing.

import { defineConfig, ReporterDescription } from '@playwright/test'
import { StatusReporterOptions } from 'playwright-teams-notifications';

const myReporters: ReporterDescription[] = [
  ['list'],
  ['playwright-teams-notifications',
    <StatusReporterOptions>{
      webhookUrl: process.env.TEST_WEBHOOK_URL,
      title: 'Custom title',
      titleDescription: 'Custom description',
      linkUrl: 'test results link url',
      linkTitle: 'view in CI',
      includeChart: true,
      includeDetails: true,
      openDetails: true,
      includeTopBorder: true,
      includeBackgroundColor: true,
      sendOnFailureOnly: false,
      mentionOnFailure: true,
      additionalDetails: { buildNumber: process.env.BUILD_NUMBER || 'N/A', 
        buildDescription: process.env.BUILD_DESCRIPTION || 'N/A' },
    },
  ],
]

export default defineConfig({
  reporter: myReporters,
})

or you can create your own reporter file, e.g. myCustomReporter.ts and provide all the configuration + additional logic there (e.g. send report only for CI runs):

// myCustomReporter.ts
import { StatusReporter, StatusReporterOptions } from 'playwright-teams-notifications';
import type { FullResult } from '@playwright/test/reporter';

const {ENV, BUILD_ID, BUILD_NUMBER, PIPELINE_NAME} = process.env

export default class CustomReporter extends StatusReporter {
  constructor(props: StatusReporterOptions) {
    props.webhookUrl = process.env.TEST_WEBHOOK_URL, 
    props.title = 'Custom title from CustomReporter'
    props.titleDescription = `Pineline: ${PIPELINE_NAME}`
    props.linkUrl = `https://my.ci.system/builds/${BUILD_ID}?env=${ENV}`
    props.linkTitle = 'View in CI'
    props.includeChart = true
    props.chartType = 'bar',
    props.includeDetails = true,
    props.openDetails = true,
    props.includeTopBorder = true,
    props.includeBackgroundColor = true,
    props.sendOnFailureOnly = false,
    props.mentionOnFailure = true,
    props.additionalDetails = { buildNumber: BUILD_NUMBER || 'N/A', buildDescription: BUILD_ID || 'N/A' },
    super(props)
  }

  async onEnd(result: FullResult): Promise<void> {
    if (process.env.CI) {
      console.log('CI environment detected, sending report to Microsoft Teams.')
      return super.onEnd(result)
    } else {
      console.log('Non-CI environment detected, skipping report to Microsoft Teams.')
      return;
    }
  }
}

and then add it to playwright.config.ts:

export default defineConfig({
  reporter: [
    ['list'],
    ['./path/to/myCustomReporter.ts'],
  ],
})

[!NOTE] Make sure to provide all the env variables in the pipeline.

Options

The reporter supports the following configuration options:

| Option | Description | Type | Required | Default | |--------------------------|-------------------------------------------------------|-----------------------------|----------|---------------------------| | webhookUrl | The Microsoft Teams webhook URL | string | false | undefined | | title | The notification title | string | false | Playwright Test Results | | titleDescription | The notification title description | string | false | Duration: hh:mm:ss | | linkUrl | Link to the test run | string | false | undefined | | linkTitle | Link button title | string | false | View results | | includeChart | Show chart with results | boolean | false | true | | chartType | You can use either bar or donut charts | bar or donut | false | bar | | includeDetails | Show details section | boolean | false | true | | openDetails | Start with details table visible | boolean | false | false | | includeTopBorder | Use top border of notification card | boolean | false | true | | includeBackgroundColor | Use background color for notification card | boolean | false | true | | sendOnFailureOnly | Send only on test failure | boolean | false | false | | mentionOnFailure | Mention git change authors on failure | boolean | false | true | | additionalDetails | Additional details you want to show in notifications. | { [key: string]: string } | false | undefined |

Title description by default contains duration of test run.

Examples

Here you can see an example of notification with default settings (and expanded details section):

Flaky status with donut chart and custom link:

Notification without colors and top border:

All options set to false with custom title:

It supports narrow view as well:

Mentioning users on failure

You have to add captureGitInfo: { commit: true } to your Playwright config to capture git commit info, then the reporter will find the authors of the commits included in the test run and mention them in the notification when there are test failures.

export default defineConfig({
  captureGitInfo: { commit: true },
  reporter: [
    ['list'],
    ['playwright-teams-notifications', {webhookUrl: process.env.TEST_WEBHOOK_URL}]
  ],
})