Back to blog
This is an article for people who runs tests using Cypress test framework and who wants to have better, deeper, prettier visibility on test results with ability to do AI-based defects triage and create test automation reports.
Cypress has its own dashboard, but there are a few benefits that are not available in Cypress Cloud and are present in ReportPortal:
free Open Source on-prem installation
unified reporting for different programming languages and frameworks (not only Cypress)
AI-based analysis of failed cases
advanced visualization
Moreover, with ReportPortal, you can track the history of test results across different launches. By integrating Cypress with ReportPortal, you can overcome limitations.
In this article we will go through installation and configuration the ReportPortal's agent-js-cypress, running Cypress tests and update them with attributes, attachments, etc. With this agent, you can send test execution results to ReportPortal, creating a more robust, efficient, and insightful testing process.
Installing the Cypress Agent
The first step involves installing the agent into the project. There is a small project with a few Cypress tests.
The tests are quite simple.
The agent package is available on NPM and GitHub registries.
Below, you can find the commands to install it using npm, yarn or pnpm.
After installation, it will appear in the list of dependencies. At the time of writing this article, the latest version is 5.3.0.
After the installation, it is required to provide some ReportPortal configuration data.
Configuration of the Agent
The next step involves configuring the agent and providing some basic options that will connect ReportPortal with the project.
First, create a Cypress config file if you don't have one.
The basic configuration is presented below.
The ‘dotenv/config’ used to get access to the ENVIRONMENT variables specified in ‘.env’ file. It will be used to store the API key value.
To obtain the configuration options, the ReportPortal profile page can be used.
1. Open the ReportPortal instance (if you don’t have one the demonstration instance can be used) and log in. For a demo instance the GitHub login can be used.
2. Then navigate to the profile page. There, we can find a configuration example for Node.js.
3. Simply copy the JSON object and paste it into your project file assigning it to a variable, e.g. rpConfig’.
Let’s name the launch as e.g. ‘Custоm regressiоn with Cypress’ right after that.
4. Provide an API key which can be generated on the API keys page in your profile.
Open the API Keys page and click on ‘Generate API Key’ button.
Specify the API Key name and click on ‘Generate’.
Detailed API Keys description can be found in the documentation.
After generation the API Key can be copied to use it in the code.
Paste it as a value for REPORTPORTAL_API_KEY in ‘.env’ file and update ‘rpConfig’.
5. Instruct Cypress to use the agent as a reporter.
NOTE:
The full list of options with their description can be found in the agent’s repository.
Running Cypress Tests
After completing the two steps above, run tests as usual.
1. Run "npm run test" command.
2. Monitor the test's progress in ReportPortal. The state can be refreshed to obtain the latest results.
Let’s check the embedded reporter of Cypress. The statistics here match exactly.
Update Cypress tests with additional data
You can enrich your Cypress test report by adding additional data. This includes description, attributes, logs, attachments, TestCaseID and status.
Description and attributes can be used to specify any extra information about the test and can also be used for filtering and building some widgets, like "Component Health Check". Extra logs can also be provided together with attachments. The TestCaseID can be used as a history ID across different launches. There's also the option to change the status in ReportPortal for a particular test result.
How to add additional data to the tests?
To use additional data within the tests, the Cypress custom commands can be used together with ReportPortal plugin.
Add the following code to your custom commands file (‘cypress/support/e2e.js’).
And register ReportPortal plugin inside the configuration file via ’setupNodeEvents’ Cypress config parameter.
1. To provide attributes and a description, use the custom commands within the tests.
After running the tests again, the specified data will be visible in ReportPortal in the newly appeared launch. We just need to drill down into it to see the results.
2. To add logs with specific log levels, use the corresponding custom commands.
Let's run our tests again and check the new launch in the system. To see the logs for particular test result, we can drill down to its latest level.
The error logs thrown by the failed tests are reported by default on the test end.
3. To insert attachments, the log custom commands can be used with the file provided.
After launch appearing in ReportPortal, the attachments can be found on the same place as logs.
Screenshots for failed tests generated by Cypress will be attached automatically.
4. The TestCaseID is a unique test case identifier across all launches in ReportPortal. It is generated automatically based on code reference (physical location of the test within the project) and parameters (if exists). But the real test case ID from your test case management system can be used instead. To provide TestCaseID explicitly, call the "setTestCaseId" custom command.
Applied TestCaseID can be checked via Test item details modal window.
NOTE:
Once the TestCaseID changed for the test result, it will be unlinked from its previous executions from historical data perspective.
History of this test result within previous launches, where the TestCaseID was persistent between runs.
5. In case for some reason it is necessary to set the specific status for test result in ReportPortal only, the corresponding custom commands can be used.
Now in ReportPortal we can check that test that actually passed marked as ‘skipped’ in the system.
NOTE:
Detailed information about the additional data and custom commands for adding it can be found in the agent's repository within the Readme instructions.
Follow these steps to integrate Cypress automation with ReportPortal to view test results in real-time. In addition, ReportPortal uses Machine Learning algorithms to analyze data and can quickly identify defect root causes through the ReportPortal Analyzer. ReportPortal also offers detailed visualization of your automation process, letting you track test automation metrics and create reports, and monitor project stability.
Enhance your Cypress test reporting with ReportPortal!