Playwright Tests with MS Teams Webhook Notifications

Introduction:

Harnessing the power of Microsoft Teams, our project integrates seamlessly with its webhook functionality to provide real-time notifications about the status of Playwright tests. This streamlined approach keeps teams informed and agile, ensuring prompt responses to test outcomes.

Setting Up the Webhook

Easily configure incoming webhooks within Microsoft Teams by accessing channel settings under “Connectors”. Once set up, Teams furnishes a unique URL for message transmission, simplifying the integration process.

Configuring Report Portal

Effortlessly manage test results with Report Portal configuration, ensuring smooth transmission of data to the designated endpoint. Simply update the provided TypeScript configuration file with your Report Portal details for seamless integration.

The project is configured to send test results to Report Portal. The configuration is located in the playwright.config.ts file:

export const RPconfig = {
  apiKey: 'Your_Report_Portal_API_Key',
  endpoint: 'Your_Report_Portal_Endpoint',
  project: 'Your_Report_Portal_Project_Name',
  launch: process.env.RPlaunchName,
  attributes: [
    {
      key: 'attributeKey',
      value: 'attrbiuteValue',
    },
    {
      value: 'anotherAttrbiuteValue',
    },
  ],
  includeTestSteps: true,
  uploadTrace: true,
  description: process.env.URL,
};

Replace the placeholders with your actual Report Portal details:

• apiKey: Your Report Portal API key.
• endpoint: The URL of your Report Portal server.
• project: The name of your Report Portal project.
• launch: The name of your test launch. This is read from the RPlaunchName environment variable.
• attributes: An array of attributes to be attached to the launch.
• includeTestSteps: If set to true, test steps will be included in the report.
• uploadTrace: If set to true, trace files will be uploaded to Report Portal.
• description: The description of the launch. This is read from the URL environment variable.

MS Teams Notifications Setup

To set up MS Teams notifications, you need to create an Incoming Webhook in MS Teams and use it in your project:

1. Go to the channel where you want to receive the notifications.
2. Click on the three dots (…) next to the channel name and select “Connectors”.
3. Search for “Incoming Webhook” and click “Configure”.
4. Provide a name and upload an image for your webhook, then click “Create”.
5. Copy the webhook URL provided by Microsoft Teams.
6. Replace 'YOUR_WEBHOOK_URL' in the sendNotification function in utils/report/notificationSender.ts with the webhook URL you got from Microsoft Teams.

Sending Notifications

The actual sending of notifications is handled by the notificationSender.ts script in the utils/report directory. This script uses the axios HTTP client to send a POST request to the webhook URL. The body of the request is a JSON object that defines the content of the message.

Here’s a simplified example of what the code might look like:

const axios = require('axios');

async function sendSummaryNotification(summary) {
  const webhookUrl = process.env.TEAMS_WEBHOOK_URL;
  const message = {
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "Test Summary",
    "sections": [{
      "activityTitle": "Playwright Tests",
      "activitySubtitle": "Automated tests",
      "facts": [{
        "name": "Total tests",
        "value": summary.total
      }, {
        "name": "Passed tests",
        "value": summary.passed
      }, {
        "name": "Failed tests",
        "value": summary.failed
      }]
    }]
  };

  try {
    const response = await axios.post(webhookUrl, message);
    console.log(`Sent summary message to Teams with response status: ${response.status}`);
  } catch (error) {
    console.error(`Failed to send summary message to Teams: ${error}`);
  }
}

const summary = {
  total: 100,
  passed: 90,
  failed: 10
};

sendSummaryNotification(summary);

In this example, message is a MessageCard object that defines the layout of the Teams message. The facts array can be used to include key-value pairs of information in the message.

Summary Reports

In addition to sending individual notifications, we also generate summary reports using the summaryReport.ts class in utils/report/summaryReport.ts. These reports are sent to the Teams channel in the same way as the notifications.

Explore Further: For a deeper dive into our project and to access the codebase, visit our GitHub repository: Playwright-MSTeam-webhook