Cypress Cloud and Microsoft Teams Integration

This blog originally published in https://qaautomationlabs.com/cypress-microsoft-teams-integration/

Cypress is an open-source end-to-end testing framework for web applications. It allows developers to write tests in JavaScript to simulate user interactions and verify the behavior of their web applications. Cypress provides a rich set of APIs and a built-in test runner that makes it easy to write, run, and debug tests.

On the other hand Microsoft Teams is a collaborative communication and teamwork platform developed by Microsoft. It is part of the Microsoft 365 suite of productivity tools and is designed to bring together individuals, teams, and organizations to collaborate and communicate effectively

The Microsoft Teams integration with Cypress allows you to see your test results directly in your Microsoft Teams channels.

This blog covers:

1. How we can integrate Microsoft Teams with Cypress
2. How we can see the Cypress test results in Microsoft Teams

Pre-Condition

User already logged into Microsoft Teams and Cypress Cloud organization

Why Cypress Microsoft Teams Integration

Cypress Microsoft Teams integration can be beneficial for teams that use both Cypress for automated testing and Microsoft Teams for collaboration and communication. By integrating Cypress with Microsoft Teams, you can:

1. Real-time test notifications: Receive instant notifications in Microsoft Teams when your Cypress tests run, allowing team members to stay updated on test execution status.
2. Collaborative debugging: Share test failure details, including error messages, screenshots, and logs, directly in a Teams channel. This enables team members to collaborate on debugging and resolving test failures more efficiently.
3. Centralized communication: Keep all relevant test-related communication and discussions within the Microsoft Teams platform, providing a centralized location for team collaboration and reducing the need to switch between different tools.
4. Improved visibility: By integrating Cypress with Microsoft Teams, you can make test execution and results more visible to the entire team. This increased visibility helps ensure that everyone stays informed about the application’s test coverage and quality.
5. Seamless integration with existing workflows: Microsoft Teams is a widely used collaboration platform, and integrating Cypress with Teams allows you to leverage your existing workflow and tools. You can combine Cypress test notifications with other capabilities of Teams, such as creating tasks, scheduling meetings, or sharing documentation, to streamline your development and testing processes.
6. Centralized test reporting: By integrating Cypress test reports with Microsoft Teams, you can centralize the storage and access of test reports. Team members can access test reports directly within Teams channels, making it easier to review test results, track progress, and share information with stakeholders.

Let’s do Cypress Microsoft Teams Integration

Step 1

Login into Cypress Cloud and Open Organization settings

Step 2

Click on Integrations link from left side menu

Step 3

Click the ‘Enable’ Option in the Microsoft Teams section.

As we enabled the option you’ll navigate to a panel that controls webhooks as a means of communication between Microsoft Teams and Cypress Cloud.

Step 4

Now Open Microsoft Teams and open the particular channel

• Open the channel in which you want to add the web-hook and select three dot ••• from the upper-right corner.
• Select Connectors from the options as shown below

Step 5

As we select ‘Connectors’ below screens open

Step 6

Click on “Configure” against Incoming Hook

Provide the webhook name and Click on “Create” button

Once we click on create button webhook url https://xxx.webhook.office.com/webhookbx/xxx@xxx/IncomingWebhook/xxx/xxx is created can be shown below

Finally Click on Done Button

Step 7

Now From Integration screen in Cypress Cloud Click on “Add Teams webhook”

Provide the detail in above screen

Step 8

Enter WebHook Name ,Teams webhook URL,Keep option “All runs” selected under drop down Notification and finally click on “Add webhook”

The installation is finished once your webhooks have been added and configured. All run results for projects in your organisation will be posted by Cypress Cloud to the designated Microsoft Teams channel.

Step 9

Set up Cypress project for demo purpose using below code

Install Cypress version 12.12.0 using command

npm install — save-dev cypress

Finally after installation create test case

/// <reference types="cypress" />
describe("QAAutomationLabs.com", { testIsolation: false }, () => {
    it("Open URL", () => {
      cy.visit("https://qaautomationlabs.com/");
    });
    it("Click on Read More ", () => {
      cy.get(".staticslider-button").click();
    });
    it("Verify Particular Blog ", () => {
      cy.contains(
        "Running End-to-End Cypress Test cases In Google Cloud Build Pipeline"
      );
    });
    it("Click on Blogs", () => {
      cy.contains("Blog").scrollIntoView().click({ force: true });
    });
    it("Search the data", () => {
      cy.get('[id="wp-block-search__input-2"]').scrollIntoView();
      cy.get('[id="wp-block-search__input-2"]')
        .click({ force: true })
        .type("cypress");
      cy.get('[id="search-icon"]').click({ force: true });
      cy.contains("Search Results for: cypress");
    });
  });

Step 10

In cypress.config.js Add ‘projectId’

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  projectId: "projectId",
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Step 11

Run the test case using the command. In Cypress, the --record and --key flags are used in combination to enable test recording and specify the record key for a project.

npx cypress run — record — key xxxx-xxx-xxxxxx–xxxx

When running Cypress tests from the command line, the --record flag is used to enable test recording. Test recording allows the test results to be sent to the Cypress Dashboard, where you can view and analyze the test runs.

The --key flag is used to specify the record key, which is a unique identifier associated with your project in the Cypress Dashboard. The record key is used to authenticate and link the test results to your project in the dashboard.

Step 12

After running the test case let see the result in Team Channel

Run the command and see the result in Team

npx cypress run — record — key xxx-xxx-41f0-b763–xx

Ms Team Notification Result (Pass/Fail Result)

Pass Scenario

In the below screenshot we can see Pass notification sent to Ms Team, All 5 test are executed successfully

Fail Scenario

In the below screenshot we can see Pass/Fail notification sent to Ms Team. 4 test are executed successfully and 1 test failed

Wrap Up

Cypress Microsoft Teams Integration allows developers and testers to collaborate efficiently within the Microsoft Teams environment. They can easily share test results, discuss issues, and coordinate their efforts in real-time.

Teams integration provides improved visibility into the testing process. Test run notifications and updates can be automatically sent to relevant team members, keeping everyone informed about the progress and status of the tests.