Cypress is a modern web front-end testing tool built with JavaScript Mocha. Cypress testing operates directly on the browsers without the need for Selenium. Its unique DOM manipulation technique makes it a very developer and QA-friendly tool. With LambdaTest, you can perform Cypress testing on an online automation cloud of 40+ browsers versions.
Learn how to get started with Cypress testing on the LambdaTest platform.
- Pre-requisites
- Running Your First Cypress Test On LambdaTest Platform
- 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
Before we get started, make sure to clone the LambdaTest's sample Cypress Kitchen Sink repo, used in this document. You can run your first Cypress test on the LambdaTest platform in a few simple steps:
-
Step 1: Clone the
LambdaTest-Cypress
kitchen sink example Github repo and navigate to the cloned directory.git clone https://github.com/cypress-io/cypress-example-kitchensink.git cd cypress-example-kitchensink
-
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
To demonstrate Cypress testing on the LambdaTest platform, we will use the Cypress’ kitchen sink example in the demo below.
- Clone the LambdaTest-Cypress’ kitchen sink example github repo and switch to the cloned directory.
git clone https://github.com/cypress-io/cypress-example-kitchensink.git
cd cypress-example-kitchensink
- 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 here for more details about authentication.
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
{
"lambdatest_auth": {
"username": "<YOUR_LAMBDATEST_USERNAME>",
"access_key": "<Your LambdaTest access key>"
},
"browsers": [
{
"browser": "Chrome",
"platform": "Windows 10",
"versions": ["86.0"]
},
{
"browser": "Firefox",
"platform": "Windows 10",
"versions": ["82.0"]
}
],
"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 locally section below.
- Execute your tests using the following command in the terminal:
lambdatest-cypress run
As soon as the tests starts executing, you can view them running. Just 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.
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.
Authenticate your Cypress test runs in the following ways -
- Set up the environment variables. (or)
- Utilizing the CLI params. (or)
- 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
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
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>"
},
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.
The LambdaTest Community allows people to interact with LambdaTest 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.
If you want to learn more about the LambdaTest's features, setup, and usage, visit the LambdaTest documentation. You can also find in-depth tutorials around test automation, mobile app testing, responsive testing, manual testing on LambdaTest Blog and LambdaTest Learning Hub.
LambdaTest is a leading test execution platform that allows users to run both manual and automated testing of web and mobile apps across 3000+ different browsers, browser versions, and operating systems. You can accelerate your test execution and achieve faster release cycles. Over 500 enterprises and 1M+ users across 132+ countries rely on LambdaTest for their web testing needs.
- LambdaTest Support: [email protected]
- Cypress Testing Page: https://www.lambdatest.com/cypress-testing
- LambdaTest HomePage: https://www.lambdatest.com