Skip to main content

Getting Started With Cypress Testing On LambdaTest Platform


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 this LambdaTest and Cypress integration, LambdaTest not only allows you to perform Cypress testing on the cloud-based Selenium Grid, but also allows you to perform cross-browser testing at scale. In this document, we will see how to get started with Cypress testing on the LambdaTest platform.

Pre-requisites To Run Your Cypress Testing#


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 just 3 simple steps:

  • Step 1: Installing the LambdaTest CLI You can do install the LambdaTest-Cypress CLI with the help of npm, using the below command:
npm install -g lambdatest-cypress-cli
  • Step 2: 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:
# Create a sample LambdaTest Cypress configuration filelambdatest-cypress init

In this configuration file:

  1. auth: Firstly you need to set up your LambdaTest credentials that will help you run your test on the Online Grid.

        "auth": {    "username": "LT_USERNAME",    "access_key": "LT_ACCESS_KEY"    },

    To get your LambdaTest Username and Access Key, visite your LambdaTest automation dashboard and click on the “key” icon, present on the left to the help button, on the top right corner.

    Image
  2. browsers: Secondly, you need to set up the browser and OS combinations upon which you want the Cypress testing to be done. You can choose among the browsers provided in the list below. Here's an example of few of the browsers selected for Cypress testing.

          "browsers": [  {     "browser": "Chrome",     "platform": "Windows 10",     "versions": [        "86.0"     ]  },  {     "browser": "Firefox",     "platform": "Windows 10",     "versions": [        "82.0"     ]  }],
  3. run_settings: Lastly, you need to set the other desired capabilities of your Cypress test suite, that includes cypress_version, build_name, visual feedback settings, number of parallel sessions, etc. For example:

      "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},

Here's a complete sample configuration.json file:

{   "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   }}
  • Step 3: Execute tests Once you have the above two pre-requisites ready, you can execute your Cypress tests on the LambdaTest platform. To do so, you will need the following command:

    lambdatest-cypress run

Supported Browsers & Operating Systems#


LambdaTest supports the below listed browsers, browser versions and Operating Systems for Cypress testing:

OPERATING SYSTEMCHROMEFIREFOXEDGE
macOS Catalina*66 and above (Except 82)60 and above80 and above (Except 82)
macOS Big Sur66 and above (Except 82)60 and above80 and above (Except 82)
Windows 1066 and above (Except 82)60 and above80 and above (Except 82)
Windows 8.1*66 and above (Except 82)60 and above80 and above (Except 82)
Windows 866 and above (Except 82)60 and above80 and above (Except 82)
Windows 7*66 and above (Except 82)60 and above80 and above (Except 82)

Note: The Operating systems, with (*) mentioned against them, will be live soon.

Running Your First Cypress Test On LambdaTest Platform#


To demonstrate Cypress testing on the LambdaTest platform, we will use the Cypress’ kitchen sink example in the demo below.

  1. Clone the LambdaTest-Cypress’ kitchen sink example github repo and switch to the cloned directory.

    # Clone the Cypress’ kitchen sink example github repogit clone https://github.com/cypress-io/cypress-example-kitchensink.git
    # Switch to the cloned directorycd cypress-example-kitchensink
  2. Setup the LambdaTest-Cypress CLI and configure the configuration file, as shown in the pre-requisites above, using the below command:

lambdatest-cypress init

Here, we have used the below configuration and stored it in a lambdatest_config.json file.

    {   "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   }}

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

  1. Execute your tests using the command shown in the pre-requisites above:
lambdatest-cypress run

View Your Cypress Testing Result On LambdaTest Platform#


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

Image

For each test, you can view the live video feed, screenshots for each test run, view 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.

Image

Running Your Cypress Tests Locally On LambdaTest Platform#

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.

Running Your Cypress Tests Parallelly On LambdaTest Platform#


If you want to run your tests parallelly on the LambdaTest platform, you can do that using either of the following two ways:

1. Run your Cypress tests Parallelly using the CLI#


To perform Cypress testing parallelly using the CLI, you need to use the "--parallels" option while running your tests.

Syntax:

--parallels <number of parallel sessions>

For example, if you want to run your Cypress tests on 5 parallel sessions, use the below command:

lambdatest-cypress run --parallels 5

2. Run your Cypress tests Parallelly using the configuration.json file#


To run your Cypress testing parallelly, you can also use the configuration.json file, using the 'parallels' key. Syntax:

{  "run_settings": {    ...    "parallels": <number of parallel sessions>,    ...  }} 

For example, if you want to run your Cypress tests on 5 parallel sessions, use the below settings:

{  "run_settings": {    ...    "parallels": 5,    ...  }}

The number of parallel test running on the LambdaTest platform at a time, is based on the concurrency plan of your LambdaTest account. In case the number of parallel tests is more than the concurrency plan, the remaining tests will get queued and run after the existing tests are complete. For example, suppose you have a concurrency plan of 5 parallel sessions and want to run 50 tests parallelly. In this case, only 5 parallel tests will be executed at a time, and the rest 45 will be queued. As the test finishes running, the queued tests will be moved to the running state based on availability.

List Of LambdaTest Cypress CLI Commands#


Below is the list of all the LambdaTest Cypress CLI arguments that can be used, along with their purpose:

lambdatest-cypress <command> [options]
Command / ArgPurpose
--help
initTo create an initial config file
runTo run tests on lambdatest
build-infoTo get information about the build

Run command — cli param#


lambdatest-cypress run
OPTIONSPURPOSE
--versionShow version number [boolean]
--helpShow help [boolean]
--ccf, --cypress-config-filepath of the config file [string]
--lcf, –lambdatest-config-filepath of the lambdatest config file [string]
-s, --specspath of the spec file or directory or pattern [string]
--bn, --build-namebuild name [string]
-t, --tagsbuild tags [string]
-p, --parellelsno of parellel sessions [string]

Build info command - cli param#


lambdatest-cypress build-info
OPTIONSPURPOSE
--versionShow version number [boolean]
--helpShow help [boolean]
--id, --build-idBuild Identifier [string][required]
Last updated on