| 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
- 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.
- Desktop notifications capability allows for faster identification of issues and quicker debugging, leading to improved development efficiency.
- 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.
- Test run starts, stops, passes, or fails, you will be promptly notified, ensuring that you have the most recent information at your fingertips.
- 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
- 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.