Cypress Dashboard Service

With the emerging technology stack, all the software services are moving towards cloud-based hostings, instead of being on-premise. The same is true for automation frameworks. Moreover, multiple tools and organizations are providing various cloud-based services that either provide extended capabilities to the automation tools or even provides a complete cloud-based testing service. Similarly, Cypress also provides a few of its services as paid cloud-based offerings. One of which is the Cypress Dashboard Service, which proves very handy and useful when you are running the Cypress test cases in a CI environment. Subsequently, let’s understand the intricacies of this service and what features does it offer. We will be covering the details in the following topics:

• What is Cypress Dashboard Service?
  • What features are provided by the Cypress Dashboard Service?
• How to set up the Cypress Dashboard?

 

 

What is Cypress Dashboard Service?

The Cypress Dashboard Service is an optional web-based component that provides various features related to projects and test runs in Cypress. Moreover, it is a beneficial and handy tool when you are running your tests on a CI environment. Additionally, it provides the visual representation of the test runs, their reports, and status on a single web window. Also, it proves handy in planning and visualizing the test runs of the Cypress Test Scripts. The Cypress Dashboard service provides various features. Consequently, let’s understand a few of them:

 

 

What features are provided by the Cypress Dashboard Service?

The features provided by the Cypress Dashboard service can broadly categorize into the following categories:

• Project Specific features.
• Test Run Specific features.
• Organization Specific features.

Subsequently, let’s understand what Cypress provides all features under these categories:

 

 

What are the Project-specific features provided by Cypress Dashboard Service?

Cypress provides the capabilities to create different projects. Within an organization, different teams can create their projects and then do the test development under those projects. Consequently, the Cypress Dashboard Service multiple features which make the project management in Cypress very easy. Some of those features are:

Feature	Description
Set up a project	This feature provides the capability to set up a new project in Cypress.
Change User Access	This feature provides the capability to configure users who all can access a specific project.
Transfer Ownership	This feature provides the capability to change the ownership of a project from one user to another.
Delete Projects	This feature provides a capability to the admin users to delete the projects they own

 

 

What are TestRun-specific features provided by Cypress Dashboard Service?

The Cypress Dashboard service provides features that help in managing and organizing the test runs. Subsequently, few of these features are:

Feature	Description
Test Stats	You can view the number and details of all failed, passed, pending, and skipped tests.
Stack Trace	You can view the complete stack trace of the failed test cases
View Screenshots	You can view all the screenshots taken for the test cases during the test run.
View Video	You can watch a complete video of the test run. Additionally, you can also watch just a clip out of the entire test run.
Parallel Tests	You can run multiple tests in parallel while running them on CI.
Grouping Tests	You can group tests based on specific parameters and run them in one test run.
Cancel Test Runs	You can cancel a specific test run from the Cypress Dashboard.

 

What are Organization-specific features provided by Cypress Dashboard Service?

As the dashboard service is a paid service, so based on licensing, it provides various features that will apply to all the projects running in that organization. Moreover, in the Cypress Dashboard, the organization is a way of multiple grouping projects. In other words, the Cypress Dashboard service provides various features that are specific to the organization. Subsequently, few of those features are:

Feature	Description
Create, Edit and Delete organization	This feature of the Cypress Dashboard Service provides the capability to create a new organization. Additionally, one can edit or delete an existing organization.
See usage and billing.	This feature of the Cypress Dashboard Service provides the capability to view the usage and bill amount of each organization.
Manage user roles	This feature of the Cypress Dashboard Service provides the capability to add/remove users from an organization.

Now let’s understand how we can set up and start using the Cypress Dashboard service for our projects:

 

 

How to set up the Cypress Dashboard?

As we already discussed, the Cypress Dashboard is a component of Cypress using which we can trigger all the tests. Additionally, we can even see the test results along with their ongoing progress. Moreover, it also displays the last runs initiated when we run our cypress test from CLI. Subsequently, let’s understand how we can configure and start using the Cypress Dashboard.

One of the main challenges for the setting up the Cypress Dashboard Service is that we have to establish a communication between the dashboard(which is a cloud-hosted service at “https://www.cypress.io/dashboard/“) and our cypress tests which are running on our local machine or a CI system. Additionally, we can run our test on a local or inside docker image on a CI server. Whereas, the Cypress Dashboard is on a cloud server. Therefore, we have to set up something between them so that our dashboard could show all the runs. Subsequently, let’s see step by step how we can achieve the same.

 

1. Firstly, open your Cypress Test Runner and go to the Runs tab. After that, on that screen, click on the Setup project to record as currently, it shows there are no recorded runs.

 

2. Secondly, after clicking on setup, it will prompt you to log in so you can log in with your Github account or Google account. After doing a successful login, it will show the success screen, as shown below:

 

3. Thirdly, it will ask the following details:

1. Name of the project.
2. Owner of the project
3. Who can see the project?

For now, I have taken ownership and have provided public access to this. But this can be changed as per the need.

 

4. Fourthly, after setting up the project with the above options, you will see the following two steps suggested by Cypress.

 

The first step is to verify the project id in the cypress.json, which should be auto-populated, as shown below:

And the second step is to run the mentioned command in the terminal, as suggested by Cypress.

Where the key is the private key of the project, we just created on the Cypress Dashboard.

After running the command, we will see a sample output, as shown below:

 

5. Finally, go back to Cypress Test Runner, and on the Runs tab, you’ll see the runs getting recorded, and it will be present there. A sample view under the Runs tab will look as below:

 

If you click on any particular row, the index record run will open in Chrome. Additionally, it will give you a detailed report of what we finished in that specific test run, which tests ran, and their run status. Moreover, it also provides the option of output(stack trace), screenshot (for failed runs), and videos for every test. After selecting any run, you can see the details which are related to the dashboard, as shown below:

 

So, now we are all set to use these terrific features of Cypress Dashboard to get more insights into test runs.

 

 

Key Takeaways

• Cypress Dashboard Service is an optional web-based companion that provides simple and powerful insights on all your tests run at a glance.
• Moreover, the Cypress Dashboard Service various features related to project, organization and test run management.
• In addition to the above, we can integrate the Cypress Dashboard with the local instance of Cypress by following the step by the procedure of setting up a Cypress Dashboard from the Test runner.

Conclusively, let’s move further in our journey of learning Cypress. Additionally, we will understand how we can capture screenshots and videos, which can help in debugging and seeing your test runs.