Cypress

Connecting Cypress Project to Cypress Cloud

Estimated reading: 7 minutes 112 views
cypress-testing-featured-image

Connecting your Cypress project to Cypress Cloud is an essential step to enhance your testing workflow. Cypress Cloud offers robust features such as test recording, parallelization, and integration with CI/CD pipelines, which can significantly improve the efficiency and visibility of your test results. In this guide, we’ll walk through the steps to set up and connect your Cypress project to Cypress Cloud, ensuring a seamless integration.

cypress-cloud-login
Cypress Cloud Login Page

Setup Cypress Cloud Account

First, sign up for a Cypress Cloud account at Cypress Cloud. Once registered, create a new project in the Cypress Cloud dashboard. This project will be linked to your local Cypress project.

cypress-create-new-project
Creating A New Project In Cypress Cloud

Add Cypress Project ID To Your Local Project

In your local project, let’s add project id to the cypress.config.js file. You can find this file in the root of the project.

cypress-setup-add-project-id
Reviewing The Cypress Project Config
cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  projectId: 'your-project-id',
  // other configurations
});
added-project-id-to-modules-export
Adding Project ID To Local Project

Choose Your CI Provider – GitHub

To start recording test runs in a pipeline we have to configure our CL Provider in this case, we’ll be configure the the GitHub Actions.
choosing-ci-option-as-github
Selecting GitHub As CI Integration
cypress-github-actions-setup
Cypress GitHub Actions Setup
  1. Record a run - In Terminal run this command
    npx cypress run --record --key your-record-key
  2. Set CYPRESS_RECORD_KEY in the GitHub repo.
    Settings Secrets and Variables Actions then create New repository secret
  3. Cypress.yml - Create a directory and create new yml file to store the pipeline configurations.
cypress-terminal-run-record
Running Cypress Run Record For Home Advance Test
cypress-github-new-cypress-key-set
Setting the CYPRESS_RECORD_KEY In GitHub

Create Cypress.yml File

To set up your Cypress project for seamless integration with CI/CD pipelines, the first step is to create a directory and a new cypress.yml file. This file will house all your pipeline configurations, ensuring your testing processes are streamlined and efficient. Navigate to your project directory, and within the Cypress local project, add a new directory at the following location:
.github workflows .

cypress-creating-directory-to-store-the-cypress-yml-file
Creating Directory To Store The Cypress.yml File

In the Cypress Cloud Setup Guide, you’ll start by copying the generated cypress.yml file that’s been tailored for your project. To better align this configuration with the specific needs of your project, I’ve made several adjustments to the file.

cypress-yml-ready-to-push
Tweaked Cypress YML File In Staging
  1. Cypress YML File - New file created.
  2. Focus On Main Branch Only - Refined the on push step to trigger exclusively when changes are pushed to the main branch.
  3. Self Hosted - Using local workstation as the runner in GitHub.
  4. Single Container - Optimized resource usage by reducing the number of containers from two to one.
  5. Added Build & Start Scripts - Added two essential scripts: 'build' and 'start'. These scripts are designed to efficiently prepare and initialize the project environment.
  6. Environment Variable - Mod the environment variable naming convention by updating GH_TOKEN to replace the restricted GITHUB_TOKEN named variable.
Configure Your Runner & Personal Access Token

Before you commit your yaml file ensure that your that you have your Runner and PAT token are configured. Failure to do so will result in the test not running in the pipeline.

github-runner-is-idling
GitHub Runner Is Idling
cypress-gh-token
Added GH TOKEN in GitHub in Action

View Cypress Record Results In The Cloud.

Before finalizing the YAML file for our project, let’s take a moment to revisit your Cypress Cloud Account. Here, you should be able to see the previous test run that we initiated through the Terminal. This step is crucial as it ensures that the command we executed earlier has been correctly captured by Cypress Cloud.
cypress-github-results-link-cloud
Viewing Cypress Run Record Results

Commit Your Cypress YML File

To effectively manage your YAML file execution within the pipeline and seamlessly integrate it with Cypress Cloud, you’ll first need to commit your changes. In my project, I utilize GitLens, a powerful tool for handling Git Pull and Push requests.
cypress-yml-staging-changes
Committing Cypress YML Changes

Begin by crafting a clear and concise commit message that reflects the changes made. Once your commit message is ready, push your changes directly to your branch. This process will trigger the pipeline, allowing you to observe the YAML file execution in real time.

cypress-github-pipeline-running
Cypress YML Starting The Pipeline Job

Monitoring Cyress Cloud Run

After setting up and ensuring that everything is functioning smoothly, it’s time to verify whether Cypress Cloud is actively monitoring and recording your tests. You the commit message and  as well as a blue spinning icon that shows that the test is in action! 

pipeline-being-monitored-by-cypress-cloud
Pipeline Being Monitored By Cypress Cloud

Monitoring GitHub Pipeline Run

As your Cypress test runs, you’ll notice a yellow icon indicating that the process is ongoing. This yellow icon serves as a real-time status update, letting you know that your tests are actively running within the CI/CD pipeline. Once the job is complete, this icon will turn green, signaling that the tests have finished executing. At this point, the log will automatically display the results of the test run. If all the tests have passed successfully, you’ll be greeted with the message, “All specs passed!”

cypress-github-run-in-progress
GitHub Cypress Run In Action
cypress-github-run-job-complete
Test Passed From Pipeline Job

Reviewing Cypress CI/CD Results

To review your Cypress test results in greater detail, start by navigating to the test results section. First, exit the run details view. Once you’re out of the run details, select the most recent run from the list displayed. This will direct you to a page where you can view the detailed Cypress TestResult. Here, you will also find a convenient link that allows you to access these test results directly in the cloud.

cypress-github-test-details-cypress-link
Cypress Test Results In GitHub

When you click the View in Cypress Cloud link, you’ll be seamlessly redirected to the Cypress Cloud results, offering a comprehensive overview of your test outcomes. It’s a smooth transition that enhances your testing workflow. Based on the configuration in my package.json file, this script executed all the tests within the e2e folder, specifically targeting the home-basic.cy.js and home-advance.cy.js tests. This setup ensures that your end-to-end testing is thorough and that the results are conveniently accessible through Cypress Cloud, optimizing your testing process and improving overall efficiency.

Run Test Results In Cypress Cloud

Enabling Video Recording & Screenshots 

To enable video capture in your Cypress test runs, you need to configure the appropriate settings in your cypress.config.js file. 

cypress.config.js (Enabling Video & Screenshots)
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  projectId: "[your-id-here]", // Add your projectId here
  e2e: {
    defaultCommandTimeout: 10000, // 10 seconds
    pageLoadTimeout: 60000, // 60 seconds for page load
    baseUrl: 'https://jahmalrichard.github.io/kicks-flutter-web-app/',
    video: true, // This ensures video recording is enabled
    videoCompression: 32, // This compresses the video to save space
    screenshotOnRunFailure: true, // Automatically takes a screenshot when a test fails
    screenshotsFolder: 'cypress/screenshots', // Specifies where screenshots are saved in the project
    setupNodeEvents(on, config) {
      // Add any node event listeners here
    },
  },
});
  • video - Begin by setting the video property to true, which activates video recording for all your test executions.
  • videoCompression - To manage the size of the recorded videos, adjust the videoCompression setting to 32. This compression level strikes a balance between video quality and storage.
  • screenshotOnRunFailure - This feature automatically captures a screenshot whenever a test fails, providing a visual snapshot of the problem at the exact moment it occurs.
  • screenshotsFolder - By setting the screenshotsFolder to 'cypress/screenshots', you ensure that all screenshots are organized in a dedicated folder within your project.

Cypress Passed Test With Video PlayBack

cypress-passed-test-with-video-playback
Cypress Passed Test With Video Playback

Cypress Failed Test With Screenshot

cypress-failed-test-with-screenshot
Cypress Failed Test With Screenshot

Conclusion

Now that your Cypress project is connected to Cypress Cloud, you’ll immediately experience the powerful features Cypress Cloud offers. These features include parallel testing, seamless CI/CD integration, and automatic screenshots and videos.In the upcoming guide, we’ll dive deeper into Using Advance Assertions In Cypress

Leave a Comment

Share this Doc

Connecting Cypress Project to Cypress Cloud

Or copy link

CONTENTS
Review Your Cart
0
Add Coupon Code
Subtotal
Total Installment Payments
Bundle Discount