Cypress Testing On LambdaTest

Blog   ⋅   Docs   ⋅   Learning Hub   ⋅   Newsletter   ⋅   Certifications   ⋅   YouTube

     

Learn how to get started with Cypress testing on the LambdaTest platform 🚀

Table of Contents 🗏

• Pre-requisites
• Running Your First Cypress Test On LambdaTest Platform
• Local Testing With Cypress
• Authentication
• Cypress Parallel Testing
• Specify Browsers And OS
• Supported Cypress Versions
• Cypress CLI Commands
• Run Settings
• Download Artefact For Cypress Project
• Integrate LambdaTest With Cypress Dashboard
• Execute Cypress Tests Including Private Dependencies
• Applitools Integration For Cypress
• ReportPortal.io Integration With LambdaTest For Cypress

Pre-requisites

Before we get started, make sure to clone the LambdaTest Cypress Cloud Repo. You can run your first Cypress test on the LambdaTest platform in a few simple steps:

• Step 1: Clone the LambdaTest-Cypress Cloud repo and navigate to the cloned directory.

  git clone https://github.com/LambdaTest/Cypress-Cloud
  cd Cypress-Cloud

• Step 2: Installing the LambdaTest CLI - You need to install the LambdaTest-Cypress CLI package with the help of npm, using the below command:

  npm install -g lambdatest-cypress-cli

• Step 3: Setup configurations on which you want to run your test - Once you have installed the LambdaTest-Cypress CLI, now you need to setup the configuration. You can do that using the below command:

  lambdatest-cypress init

Running Your First Cypress Test On LambdaTest

Test Scenario: To demonstrate Cypress testing on LambdaTest, we will use the Cypress Kitchen Sink Example.

1. Clone the LambdaTest Cypress Cloud GitHub repo and switch to the cloned directory.

git clone https://github.com/LambdaTest/Cypress-Cloud
cd Cypress-Cloud

2. Setup the LambdaTest-Cypress CLI and configure the configuration file, as shown in the pre-requisites before. A file named lambdatest-config.json is generated in your project using the below command:

lambdatest-cypress init

Here, we have used the below configuration as default and generated it in the lambdatest-config.json file. You need to set up the authentication by using LambdaTest credentials. You can check the Authentication documentation for more details about authentication.

{
  "lambdatest_auth": {
    "username": "<YOUR_LAMBDATEST_USERNAME>",
    "access_key": "<Your LambdaTest access key>"
  },
  "browsers": [
    {
      "browser": "Chrome",
      "platform": "Windows 10",
      "versions": ["latest"]
    },
    {
      "browser": "Firefox",
      "platform": "Windows 10",
      "versions": ["latest"]
    }
  ],
  "run_settings": {
    "cypress_config_file": "cypress.json",
    "build_name": "build-name",
    "parallels": 1,
    "specs": "./*.spec.js",
    "ignore_files": "",
    "npm_dependencies": {
      "cypress": "6.1.0"
    },
    "feature_file_suppport": false
  },
  "tunnel_settings": {
    "tunnel": false,
    "tunnelName": null
  }
}

Also in run-settings section you need to specify the path of your spec.js file on which you want to run the test on. Here we will pass the path of a sample to do spec.js file for our demo.

"specs": "./cypress/integration/1-getting-started/todo.spec.js"

In this demo, all occurences of http://localhost:8080 have been replaced with https://example.cypress.io to prevent running the Cypress tests locally. Alternatively, if you want to run your tests locally, refer to the Run Cypress tests locally section below.

3. Execute your tests using the following command in the terminal:

lambdatest-cypress run

View Your Cypress Testing Result

As soon as the tests starts executing, you can view them running. Visit your LambdaTest Automation Dashboard.

For each test, you can view the live video feed, screenshots for each test run, console logs, terminal logs and do much more using the LambdaTest platform.

If the test gets executed successfully, you will see a green tick on the Timeline view and a "Completed" message on the Automation logs view of your Automation dashboard. If not, then you will see a red cross and a "Failed" message respectively.

Running Your Cypress Tests Locally

To run your tests locally on the LambdaTest platform, you need to setup LambdaTest tunnel, and execute commands using the CLI, or download UnderPass, our GUI based desktop app. Once you have the LambdaTest tunnel or Underpass set up and started, you can use the LambdaTest platform to run your Cypress tests locally.

Now you need to activate the tunnel capability in the lambdatest_config.json file under the section "connection_settings" as shown below:

  "connection_settings": {
    "tunnel": true,
    "tunnel_name": "lt-cypress-tunnel"
  },

You can provide the name of the LambdaTest tunnel as per your requirements.

Authentication

Authenticate your Cypress test runs in the following ways -

1. Set up the environment variables. (or)
2. Utilizing the CLI params. (or)
3. Mention yourusername and access key in the lambdatest-config.json.

Warning: We use the following order of precedence to determine which auth credentials to use if you use more than one option to pass your auth credentials:

CLI arguments > Options set in lambdatest-config.json > Environment variables

Utilizing CLI Params:

The following args can be used while running tests using the run command.

Arg	Shorthand	Accepted values
--username	-u	Your LambdaTest username
--key	-k	Your LambdaTest access key

For example -

 lambdatest-cypress run --username YOUR_USERNAME --key YOUR_ACCESS_KEY

Using lambdatest-config.json:

The auth option will help you in specifying your username and access key. You can find your username and access key in the LambdaTest Automation Dashboard. Both, the auth credentials set in environment variables and the ones mentioned in the lambdatest-config.json file will get overridden.

The options supported in the auth are as follows:

Arg	Accepted values
username	Your LambdaTest username
access_key	Your LambdaTest access key

For example -

"lambdatest_auth": {
      "username": "<your username>",
      "access_key": "<your access key>"
   },

Setup the Environment Variables:

While utilizing the CLI params, you can set up the following environment variables.

Env variable	Accepted values
LT_USERNAME	Your LambdaTest username
LT_ACCESS_KEY	Your LambdaTest access key

Or you can also set environment variables using following commands:

• For Linux/macOS:

export LT_USERNAME="YOUR_USERNAME" export LT_ACCESS_KEY="YOUR ACCESS KEY"

• For Windows:

set LT_USERNAME="YOUR_USERNAME" set LT_ACCESS_KEY="YOUR ACCESS KEY"

Note - By doing so, the auth credentials you use in your lambdatest-config.json file will get overridden only if these options are not provided in lambdatest-config.json.

Tutorials 📙

Check out our latest tutorials on Cypress automation testing 👇

• Cypress Vs Selenium: Which is Better in 2022?
• Introduction to Cypress Test Automation Framework
• Scalable and Reliable Cross Browser Testing with Cypress
• Now Run Your Cypress Tests on LambdaTest
• How to Perform Cypress Testing at Scale with LambdaTest
• Complete Guide to Cypress Visual Regression Testing
• How to Fill and Submit Forms in Cypress
• How to Find HTML Elements Using Cypress Locators
• Handling Touch and Mouse Events in Cypress [Tutorial]
• How to Find Broken Links using Cypress [With Examples]
• Web Performance Testing with Cypress and Google Lighthouse

For video tutorials on Cypress testing, please refer to our Cypress Testing Tutorial Playlist. ▶️

Subscribe To Our LambdaTest YouTube Channel 🔔 and keep up-to-date on the latest video tutorial around Cypress.

Documentation & Resources 📚

Visit the following links to learn more about LambdaTest's features, setup and tutorials around test automation, mobile app testing, responsive testing, and manual testing.

• LambdaTest Documentation
• LambdaTest Blog
• LambdaTest Learning Hub

LambdaTest Community 👥

The LambdaTest Community allows people to interact with tech enthusiasts. Connect, ask questions, and learn from tech-savvy people. Discuss best practises in web development, testing, and DevOps with professionals from across the globe 🌎

What's New At LambdaTest ❓

To stay updated with the latest features and product add-ons, visit Changelog

About LambdaTest

LambdaTest is a leading test execution and orchestration platform that is fast, reliable, scalable, and secure. It allows users to run both manual and automated testing of web and mobile apps across 3000+ different browsers, operating systems, and real device combinations. Using LambdaTest, businesses can ensure quicker developer feedback and hence achieve faster go to market. Over 500 enterprises and 1 Million + users across 130+ countries rely on LambdaTest for their testing needs.

Features

• Run Selenium, Cypress, Puppeteer, Playwright, and Appium automation tests across 3000+ real desktop and mobile environments.
• Real-time cross browser testing on 3000+ environments.
• Test on Real device cloud
• Blazing fast test automation with HyperExecute
• Accelerate testing, shorten job times and get faster feedback on code changes with Test At Scale.
• Smart Visual Regression Testing on cloud
• 120+ third-party integrations with your favorite tool for CI/CD, Project Management, Codeless Automation, and more.
• Automated Screenshot testing across multiple browsers in a single click.
• Local testing of web and mobile apps.
• Online Accessibility Testing across 3000+ desktop and mobile browsers, browser versions, and operating systems.
• Geolocation testing of web and mobile apps across 53+ countries.
• LT Browser - for responsive testing across 50+ pre-installed mobile, tablets, desktop, and laptop viewports

We are here to help you 🎧

• Got a query? we are available 24x7 to help. Contact Us
• For more info, visit - https://www.lambdatest.com