cypress-discord-webhook-integration
This package helps to send reports for Cypress Autotests to Discord channel.
⚠️ From version 1.2.0, please use this import: `const { sendToDiscordWebhook } = require('cypress-discord-webhook-integration');` ⚠️
Content
- [Installation](#installation)
- [Default data in message for Discord](#default-data-in-message-for-discord)
- [Prepare your Discord Server for using package](#prepare-your-discord-server-for-using-package)
- [Add package into `cypress.config.js` file:](#add-package-into-cypressconfigjs-file)
- [Running code](#running-code)
- [Example](#example)
- [Notes](#notes)
- [Version `1.1.0`](#version-110)
- [Version `1.2.0`](#version-120)
# Installation
```
npm i cypress-discord-webhook-integration
```
# Default data in message for Discord
- `username` = `Cypress Autotest Report`
- `avatarUrl` = `https://avatars.githubusercontent.com/u/8908513?s=200&v=4`
- `content` = `Report from Cypress:\nDate: `
# Prepare your Discord Server for using package
1. Open Server Settings in Discord Server
2. Open Integrations tab and click on the Create Webhook button
3. Click on your Webhook > Webhook is expanded
4. Setup your Webhook and click on the Copy Webhook URL button (this URL will be used for `.env` file)
# Add package into `cypress.config.js` file:
1. Create an `.env` file or add this param to existed file with environments:
```env
WEBHOOK_URL=https://discord.com/api/webhooks/id/token
```
2. Setup your reported for Cypress
3. Add this package to `cypress.config.js` file. Example:
```js
const { defineConfig } = require('cypress');
require('dotenv').config();
module.exports = defineConfig({
e2e: {
// other settings
setupNodeEvents(on, config) {
on('after:run', async (results) => {
// on this step report should be generated
// --------------------required part------------------------------
const { sendToDiscordWebhook } = require('cypress-discord-webhook-integration'); // import lib
const webhookURL = process.env.WEBHOOK_URL; // REQUIRED: Webhook URL for Discord
const files = ['./cypress/reports/html/index.html']; // REQUIRED: File paths
// --------------------required part------------------------------
// --------------------custom data------------------------------
const customUsername = 'Custom Username for Bot'; // Custom name for Bot's username in Discord
const customMessage = 'Custom message for Bot'; // Custom message for Bot's message in Discord
const customAvatar = 'https://cdn.sanity.io/images/o0o2tn5x/production/13b9c8412093e2f0cdb5495e1f59144967fa1664-512x512.jpg'; // Custom avatar URL for Bot in Discord
// --------------------custom data------------------------------
// --------------------required part------------------------------
// Using function
await sendToDiscordWebhook(
webhookURL, // required variable
files, // required variable
customMessage, // set to undefined if you don't use custom message, but use custom avatar, custom username or convertHtmlToPng functionality
customUsername, // set to undefined if you don't use custom username, but use custom avatar or convertHtmlToPng functionality
customAvatar, // set to undefined if you don't use custom message, but use convertHtmlToPng functionality
true, // if you want to convert HTML files to PNG set it as true, or remove it if you don't want to use this functionality
);
// --------------------required part------------------------------
});
return config;
},
specPattern: 'cypress/e2e/**/*.spec.{js, jsx, ts, tsx}',
},
});
```
# Running code
1. Run Cypress tests: `npx cypress run`
2. After it you should see message in Discord channel which you selected in Webhook
3. You can upload report from Discord channel when you want.
Video example:
https://user-images.githubusercontent.com/104084410/222214637-f130fda1-fcf3-4dab-83f7-a53a087fbbf5.mp4
# Example
You can use this example: https://github.com/Smoliarick/cypress-discord-webhook-integration-example. This project was set up using cypress-discord-webhook-integration package.
# Notes
## Version `1.1.0`
I've added new functionality which helps to convert HTML reports to PNG file for Discord.
```js
await sendToDiscordWebhook(
webhookURL, // required variable
files, // required variable
customMessage, // set to undefined if you don't use custom message, but use custom avatar, custom username or convertHtmlToPng functionality
customUsername, // set to undefined if you don't use custom username, but use custom avatar or convertHtmlToPng functionality
customAvatar, // set to undefined if you don't use custom message, but use convertHtmlToPng functionality
true, // if you want to convert HTML files to PNG set it as true, or remove it if you don't want to use this functionality
);
```
Example (when you use only convertHtmlToPng functionality, but don't want to use other functions):
```js
await sendToDiscordWebhook(
webhookURL, // required variable
files, // required variable
undefined, // set to undefined if you don't use custom message, but use custom avatar, custom username or convertHtmlToPng functionality
undefined, // set to undefined if you don't use custom username, but use custom avatar or convertHtmlToPng functionality
undefined, // set to undefined if you don't use custom message, but use convertHtmlToPng functionality
true, // if you want to convert HTML files to PNG set it as true, or remove it if you don't want to use this functionality
);
```
Just set `true` value to `convertHtmlToPng` variable. Your paths to files should contain `.html` at the end of the file path. It convert HTML file to PNG file and put PNG file into you directory, after it these PNG files will be send to Discord.
## Version `1.2.0`
From this version you can use several ways to send messages with PNG files:
Send 1 message with 1 PNG file which contains results
```js
on('after:run', async (results) => {
await afterRunHook();
// --------------------required part------------------------------
const { sendToDiscordWebhook } = require('cypress-discord-webhook-integration'); // import lib
const webhookURL = process.env.WEBHOOK_URL; // REQUIRED: Webhook URL for Discord
const files = ['./cypress/reports/html/index.html']; // REQUIRED: File paths
// --------------------required part------------------------------
// --------------------custom data------------------------------
const customUsername = 'Custom Username for Bot'; // Custom name for Bot's username in Discord
const customMessage = 'Custom message for Bot'; // Custom message for Bot's message in Discord
const customAvatar = 'https://cdn.sanity.io/images/o0o2tn5x/production/13b9c8412093e2f0cdb5495e1f59144967fa1664-512x512.jpg'; // Custom avatar URL for Bot in Discord
// --------------------custom data------------------------------
// --------------------required part------------------------------
// Using function
await sendToDiscordWebhook(
webhookURL, // required variable
files, // required variable
customMessage, // set to undefined if you don't use custom message, but use custom avatar, custom username or convertHtmlToPng functionality
customUsername, // set to undefined if you don't use custom username, but use custom avatar or convertHtmlToPng functionality
customAvatar, // set to undefined if you don't use custom message, but use convertHtmlToPng functionality
true, // if you want to convert HTML files to PNG set it as true, or remove it if you don't want to use this functionality
);
// --------------------required part------------------------------
});
```
Send 1 message for each spec file with 1 PNG file
```js
on('after:spec', async (results) => {
await afterRunHook();
// --------------------required part------------------------------
const { sendToDiscordWebhook } = require('cypress-discord-webhook-integration'); // import lib
const webhookURL = process.env.WEBHOOK_URL; // REQUIRED: Webhook URL for Discord
const files = ['./cypress/reports/html/index.html']; // REQUIRED: File paths
// --------------------required part------------------------------
// --------------------custom data------------------------------
const customUsername = 'Custom Username for Bot'; // Custom name for Bot's username in Discord
const customMessage = 'Custom message for Bot'; // Custom message for Bot's message in Discord
const customAvatar = 'https://cdn.sanity.io/images/o0o2tn5x/production/13b9c8412093e2f0cdb5495e1f59144967fa1664-512x512.jpg'; // Custom avatar URL for Bot in Discord
// --------------------custom data------------------------------
// --------------------required part------------------------------
// Using function
await sendToDiscordWebhook(
webhookURL, // required variable
files, // required variable
customMessage, // set to undefined if you don't use custom message, but use custom avatar, custom username or convertHtmlToPng functionality
customUsername, // set to undefined if you don't use custom username, but use custom avatar or convertHtmlToPng functionality
customAvatar, // set to undefined if you don't use custom message, but use convertHtmlToPng functionality
true, // if you want to convert HTML files to PNG set it as true, or remove it if you don't want to use this functionality
);
// --------------------required part------------------------------
});
```
Send 1 message for each 10 spec files (1 message contains results for 10 or less specs)
```js
// Add the next line at the beginning of the file
const { sendToDiscordWebhookForEachSpec, afterSpecFunction } = require('cypress-discord-webhook-integration'); // import lib
// Add the next lines into the setupNodeEvents function
on('after:spec', async (results) => {
await afterRunHook();
await afterSpecFunction('./cypress/reports/html/index.html');
});
on('after:run', async (results) => {
// --------------------required part------------------------------
const webhookURL = process.env.WEBHOOK_URL; // REQUIRED: Webhook URL for Discord
// --------------------required part------------------------------
// --------------------custom data------------------------------
const customUsername = 'Custom Username for Bot'; // Custom name for Bot's username in Discord
const customMessage = 'Custom message for Bot'; // Custom message for Bot's message in Discord
const customAvatar = 'https://cdn.sanity.io/images/o0o2tn5x/production/13b9c8412093e2f0cdb5495e1f59144967fa1664-512x512.jpg'; // Custom avatar URL for Bot in Discord
// --------------------custom data------------------------------
// --------------------required part------------------------------
// Using function
await sendToDiscordWebhookForEachSpec(
webhookURL, // required variable
customMessage, // set to undefined if you don't use custom message, but use custom avatar, custom username functionality
customUsername, // set to undefined if you don't use custom username, but use custom avatar functionality
customAvatar, // set to undefined if you don't use custom message
);
// --------------------required part------------------------------
});
```