🎭 Yasin Playwright Slack Reporter

A custom Slack reporter for Playwright that sends visually rich, informative test results to your Slack channel — including emojis, test stats, build info, links, and even pie charts! 📊

---

🚀 Features

• ✅ Summary of passed/failed/skipped tests
• ⏱️ Total test duration
• 🔗 Build info, branch, and custom HTML report links
• 📊 Pass/fail donut chart via QuickChart
• 📡 Works with any Slack Incoming Webhook

---

📦 Installation

To install the package, run the following command:

1npm install --save-dev yasin-playwright-slack-report
2
3yarn add --dev yasin-playwright-slack-report
4

---

🛠️ Configuration

1. Create Slack Webhook

Go to Slack Incoming Webhooks and generate a Webhook URL for your channel.

2. Add Reporter to playwright.config.ts

1// playwright.config.ts
2
3import { defineConfig } from "@playwright/test";
4
5export default defineConfig({
6  reporter: [
7    ["list"],
8    [
9      "yasin-playwright-slack-report",
10      {
11        webhookUrl: "https://hooks.slack.com/services/XXXX/XXXX/XXXX",
12        buildId: "https://your.ci/build/123",
13        branchName: "main",
14        htmlReportUrl: "https://your.html.report/index.html",
15      },
16    ],
17  ],
18});

---

Slack Message Format

Here’s what the Slack message will look like:

---

🎭 Playwright Results

• ✅ Passed: 16 | ❌ Failed: 2 | ⏭️ Skipped: 1
• 🧪 Total Tests: 19
• 🕒 Duration: 00:00:25
• 🔗 Build: View Build
• 🌿 Branch: main
• 📊 HTML Report: View Report

---

And includes a donut chart:

---

🔧 Advanced Options

Option	Type	Required	Description
webhookUrl	string	✅	Slack webhook URL
buildUrl	string	❌	CI build link to show in the message
branchName	string	❌	Branch name shown in report
htmlReportLink	string	❌	Link to the HTML report

---

🧪 Development

If you're developing or contributing to this package:

1git clone https://github.com/your-user/playwright-slack-report.git
2cd playwright-slack-report
3npm install
4npm run build

---

💬 Feedback & Issues

If you have any suggestions or run into issues, feel free to open an issue or submit a PR!

---

📄 License

MIT © 2025 [Yasin Ramazan Oguz]

---

Then just commit the change if your project is in version control:

1git add README.md
2git commit -m "Update README with usage instructions and chart support"

Key Changes:

• Yarn Installation: Added the yarn add --dev playwright-slack-report command under the Installation section.
• No lint step: As per your request, the lint step has been removed from the npm version patch script.

This should provide clear instructions for users who prefer Yarn over npm for installing the package. Let me know if you need any further adjustments!