Sep 30, 2023 3 min read cypress

Cypress GitHub Teams Notification [shorts]

This How-to guide uses GitHub - Skitionek/notify-microsoft-teams: Github action to send comprehensive reports to the Microsoft Teams channel

Everything is broken down to you in simple steps. Before processing make sure the above action is whitelisted for your account.

Step #1:

Create an Incoming Webhook for the channel where you would like to receive notifications by right-clicking ChannelName > Connectors > Incoming WebHook > Configure.

Note: Copy The URL shown on the Bottom Page.

Step #2:

Add the Copied URL as a secret in the repo whose action you want this to be triggered, By going to Settings > Secrets & Variables > Actions > New Repository Secret.

Add the teams WebHook as a secret in GitHub Repo

Step #3:

Add The following code in your actions file from where you want to receive the Notification:

Example Code:

...
# Send Notification to Teams Channel QA Team > General
  - name: Send Notification to Teams Channel
    uses: Skitionek/[email protected]
    if: always()
    with:
      webhook_url: ${{ secrets.DOC_AI_TESTING_TEAMS_WEBHOOK }}
      overwrite: "{ title: `Nightly Test Run Status`, sections: [{ activityTitle: `Run Info:`, activitySubtitle: `Started by GitHub`, facts: [{ name: `Run from branch`, value: `${{ github.ref }}` }, { name: `Environment`, value: `${{ github.event.inputs.environment }}` }, { name: `Tags`, value: `${{ github.event.inputs.tags }}` }, { name: `Recorded`, value: `true` }], markdown: true }], potentialAction: [{ \\"@type\\": `OpenUri`, name: `Repository`, targets: [{ os: `default`, uri: `<https://github.com/${{> github.repository }}` }] }, { \\"@type\\": `OpenUri`, name: `Workflow Run`, targets: [{ os: `default`, uri: `<https://github.com/${{> github.repository }}/actions/runs/${{ github.run_id }}` }] }, { \\"@type\\": `OpenUri`, name: `Cypress Dashboard`, targets: [{ os: `default`, uri: `${{ steps.run_step.outputs.dashboardUrl }}` }] }] }"
      needs: ${{ toJSON(needs) }}
      steps: ${{ toJSON(steps) }}
      job: ${{ toJSON(job) }}

This code to be added as a step to the existing GitHub Action workflow.yaml

The most important bits are:

webhook_url (you need to get this from step 2)

overwrite: ( This defines a template of what information will be sent to the teams' channel as part of the notification)
The following code will yield a teamS notification card which will have:
- sections (read-only text)
- potentialAction (Hyperlink to resources, which opens outside of the teams' app)

{
	title: `Nightly Test Run Status`,
	sections: [{
		activityTitle: `Run Info:`,
		activitySubtitle: `Started by GitHub`,
		facts: [{
			name: `Run from branch`,
			value: `${{ github.ref }}`
		}, {
			name: `Environment`,
			value: `${{ github.event.inputs.environment }}`
		}, {
			name: `Tags`,
			value: `${{ github.event.inputs.tags }}`
		}, {
			name: `Recorded`,
			value: `true`
		}],
		markdown: true
	}],
	potentialAction: [{
		\\
		"@type\\": `OpenUri`,
		name: `Repository`,
		targets: [{
			os: `default`,
			uri: `<https://github.com/${{> github.repository }}`
		}]
	}, {
		\\
		"@type\\": `OpenUri`,
		name: `Workflow Run`,
		targets: [{
			os: `default`,
			uri: `<https://github.com/${{> github.repository }}/actions/runs/${{ github.run_id }}`
		}]
	}, {
		\\
		"@type\\": `OpenUri`,
		name: `Cypress Dashboard`,
		targets: [{
			os: `default`,
			uri: `${{ steps.run_step.outputs.dashboardUrl }}`
		}]
	}]
}

Code for 'overwrite' section of the previous step

Note: You can add additional information after passing results from the Test Execution step to the Notification Step

Teams Card Notification based on the above template:

Based on the GitHub Job run status the card color gets changed to Red (failed) Green (Successful) or Yellow (canceled)

A sample Teams card posted on this webhook by GitHub Action run

Cypress Dashboard-Microsoft Teams Notification:

Also now it is possible to directly send a Notification from Cypress Dashboard directly to your Microsoft Teams' channel when a run finishes. Cypress has built a Teams Integration that can directly push Notifications to a specified channel. There is an excellent article on how to do it :

Microsoft Teams Integration | Cypress Documentation

Microsoft Teams integration is currently in