QA Automation Labs

Desktop notifications for Test cases run in Cypress Cloud

image-4-768x394

Desktop notifications for Test cases run in Cypress Cloud

This Blog About :
– Cypress Latest Feature (Desktop Notifications)
– How to enable desktop notifications
– Set up Cypress Project
– Set up Cypress Cloud
– Set Up CI/CD GitHub Action For Parallel Test Execution
– Real-time desktop notifications when test runs start, pass, or fail.

Speed is indeed crucial in software testing as it allows for faster feedback and quicker identification of issues. By identifying and resolving issues promptly, developers can maintain a smoother development process and prevent delays.

Because of the reason Cypress come with New feature desktop notifications for your test runs in Cypress Cloud.

What is Desktop Notifications

Desktop notifications for Cypress is a feature that allows you to receive real-time notifications on your desktop about the status of your Cypress test runs in CI/CD . These notifications provide you with instant updates when your tests start, stop, pass, or fail.

Benefits Of Desktop Notifications

The benefit of desktop notifications is that they enable you to quickly respond to the status of your test runs. For example, if a test run fails, you will be immediately notified, allowing you to investigate and address the issue promptly.

Some of the benefit of desktop notifications are

  1. With desktop notifications for test runs in Cypress Cloud, developers can receive real-time updates on the status of their tests without having to constantly monitor their CI system.
  2. Desktop notifications capability allows for faster identification of issues and quicker debugging, leading to improved development efficiency.
  3. By eliminating the need to constantly monitor your continuous integration (CI) system for updates, you can save valuable time and focus on other tasks while still staying up to date on your test runs.
  4. Test run starts, stops, passes, or fails, you will be promptly notified, ensuring that you have the most recent information at your fingertips.
  5. Improves the overall efficiency of your workflow but also enhances the quality of your software by ensuring that issues are resolved in a timely manner.

How to enable desktop notifications

To receive notifications for your runs, ensure you are logged in to Cypress Cloud and your project is connected. Expand the “Device settings” section on the Settings page and click “Enable desktop notifications.”

Screenshot attached below for more detail

We can set by selecting the check box which type of notification we want to receive.

To See How Desktop notifications work let’s
  • Set up Cypress Project
  • Set up Cypress Cloud
  • Set Up CI/CD GitHub Action For Parallel Test Execution

Create Cypress project

Pre-request

You are logged into Cypress Cloud and your project is connected

Cypress latest version is installed use the command “npm install cypress — save-dev” to install the latest version

  • Create a Cypress Project let’s say “cypress_desktop_notifications
  • Create Some .spec files to run the Test cases in Cypress Cloud

Set up Cypress Cloud For Parallel Test Execution

Step 1

Open the URL https://cloud.cypress.io/login

Step 2

Log in with any of the above options

Step 3

In My case I am log-in with GitHub and Project Cypress_desktops_Notification is already created

Step 4

Once you set up your project to record, generated unique projectId for your project and automatically insert it into your Cypress configuration file.

Or We Can Copy/Paste Project Id from the below screen as well.

Once all the above steps are done integration with Cypress Cloud Is finished

Set Up CI/CD GitHub Action For Parallel Test Execution (For Desktop notifications for Test cases run in Cypress Cloud)

Step 1

Create a repository in my case let’s say “desktops_Notification_github_Action”.Initially, there is no code in created repo

Step 2

Push the code to the newly created repo. Below are the test cases that we are using to run in GitHub Action and Cypress Cloud/// <reference types=”cypress” />
describe(“UI 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 a Google Cloud Pipeline”
);
});
it(“Click on Blogs”, () => {
cy.contains(“Blog”).scrollIntoView().click({ force: true });
});
});describe(“API QAAutomationLabs.com”, { testIsolation: false }, () => {
it(“GET API testing Using Cypress API Plugin”, () => {
cy.request(“GET”, “https://reqres.in/api/users?page=2”).should(
(response) => {
expect(response.status).to.eq(200);
}
);
});

it(“POST API testing Using Cypress API Plugin”, () => {
cy.request(“POST”, “https://reqres.in/api/users”, {
name: “morpheus”,
job: “leader”,
}).should((response) => {
expect(response.status).to.eq(201);
});
});

it(“PUT API testing Using Flip Plugin”, () => {
cy.request(“PUT”, “https://reqres.in/api/users/2”, {
name: “morpheus”,
job: “zion resident”,
}).should((response) => {
expect(response.status).to.eq(200);
});
});

it(“DELETE API testing Using Cypress API Plugin”, () => {
cy.request(“DELETE”, “https://reqres.in/api/users/2”).should((response) => {
expect(response.status).to.eq(204);
});
});
});

Step 3

After pushing the code click on the “Actions” Tab in GitHub

Step 4

After clicking on Actions Tab go to the bottom and click on Configure under Automation -> Manual workflow Section (Highlighted below)

Step 5

Under project/.github/workflows/cypress.yml created. Update the .yml file for parallel execution of Test cases in GitHub Action with below attached code.

name: Cypress Tests
on: [push]
jobs:
Cypress-Test:
runs-on: ubuntu-22.04
strategy:
# when one test fails, DO NOT cancel the other
# containers, because this will kill Cypress processes
# leaving Cypress Cloud hanging …
# https://github.com/cypress-io/github-action/issues/48
fail-fast: false
matrix:
# run 2 copies of the current job in parallel
containers: [1, 2]
steps:
– name: Checkout GitCode
uses: actions/checkout@v3

– name: Run Cypress Test
uses: cypress-io/github-action@v5
with:

browser: chrome
record: true
parallel: true

env:
# pass the Cypress Cloud record key as an environment variable
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
# pass the GitHub token lets this action correctly
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

After updating the .yml as we push the code. Test case start executingIn CI/CD GitHub action with provided container

Both the test case start executing in GitHub Action and Cypress Cloud

Important setting

One Improtant setting that we have to do for to set the environment variable “CYPRESS_RECORD_KEY”

Open the particular repository in GitHub, In my case its cypress_github_Action

  1. Click on Setting

2. Click on Secrets

4. We have to Add the “Repository secrets” by entering Name (e.g CYPRESS_RECORD_KEY)

Enter Secret Key “XXXXXXXXXXX” which can be copied from Cypress Cloud Setting screenshot attached below

Test Case Execution In GitHub and Cypress Cloud

As we push the code test cases to start executing automatically in both palace

GitHub

In GitHub as code is pushed both test cases to start executing parallelly at the same time. We can see in below screenshot Under Jobs

Checking the history of both jobs, we can see that Api_qaAutomationLabs.cy.js has been executed on job 1

Ui_qaAutomationlabs.cy.js has been executed on job 2.

Various type of Desktop notifications for Test cases run in Cypress Cloud

As test case start executing in CI/CD , Desktop Notifications start triggering. In Below screenshot we can see different type of Desktop Notifications

When test cases run Start
When test cases run Pass
When test cases run Fail

Wrap ‘Up

Desktop notifications for Test cases run in Cypress Cloud is a valuable feature , providing developers with a convenient and efficient way to stay informed about the status of their test runs. By leveraging this feature, you can enhance your development process, identify and resolve issues faster, and ultimately deliver higher quality software in a more efficient manner.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More
image

Enhance Testing Workflows with HTML Allure Reports in Cypress

Allure Report is the utility that processes test results collected by a compatible test framework and produces an HTML report. Allure Report is i
Read More