How to perform Cypress Test Automation

The Cypress Test Automation Framework has gained substantial popularity as an alternative to. As an automation framework, Cypress is known for being easy to set up and use.

This clause will discuss how mechanization testers can perform trial automation using Cypress. In other words, this is the perfect place to start for anyone ask “ What is a Cypress mechanisation creature? ” or “ How to commence automation with Cypress io? ”

What is Cypress?

The is a NodeJS-based modernistic automation tool that endorse JavaScript/Typescript as the programing language. There are many of Cypress. However, it is the most democratic and easy-to-use tool in the mechanisation world, cursorily becomes a ducky of devs and testers despite its recency.

What is Cypress Test Automation?

Cypress is a NodeJS-based test mechanisation framework for the modernistic web. It employ JavaScript as a programming language.

Unlike other tool, the Cypress automation instrument can be used for a variety of tests & # 8211; unit test, integration tests,, API tests, etc. Cypress also comes with multiple in-built functionalities to make developer ’ and QA ’ s jobs easier. Some of these include screen capture, picture recording, clip traveling, easygoing debugging, etc. Currently, Cypress too supports on Edge, Firefox, and Chrome.

exercise Mocha and Chai assertions by nonremittal, so examiner can use statement from these library. The reporting feature is one of the most exploited characteristic in the mechanisation world. Cypress usesMocha reporterinternally, so tester can configure Mocha newsperson or Spec newsperson in their specs.

The Cypress Test Automation CLI

Cypress comes with Command line Interface aka Cypress CLI which helps exploiter integrate Cypress test with CI/CD tools such as Jenkins, Azure DevOps, etc. In particular, it likewise helps testers execute Cypress exam on BrowserStack.

For a more detailed dive, refer to this.

How to set up Cypress for Test Automation

Bear in mind that all must be executed on real browsers for precise results. Start running tests on 30+ versions of the modish browsers across Windows and macOS with BrowserStack. Use insistent, hassle-free parallelization to get faster results without compromise on accuracy. Detect bugs before exploiter do by try package in with BrowserStack.

Let ’ s discuss, footstep by step, how to perform mechanization with Cypress. In order to start, exploiter will need the following prerequisites:

1. Download and Install NodeJS
2. Download and install Optical Studio Code

Note: Optical Studio Code is the most used IDE. However, testers can use any IDE.

Step 1: Create Empty Project Folder

Navigate to the want location, and create an empty folder inside. In this representative,CypressJavaScriptis the undertaking folder.

Step 2: Open the folder in Optical Studio Code or Any IDE

Go to Visual Studio Code Menu& gt; Navigate toFile& gt; Click onOpen Folder& gt; Choose the freshly make Folder (CypressJavascript) fromOpen Folder Wizard

Step 3: Create package.json

The package.jsonhelps tag all the packages installed for the Cypress automation fabric, and it also helps to create shortcut bidding to run the tests.

In order to make thepackage.json, open Terminalin Visual Studio Code Menu and type the command below:

npm init

On enteringnpm initin the terminal, it ask for a set of questions. Answer them or hit [Enter] [Enter] until it finishes.

Finally, it asks & # 8211; Is this OK? (yes). Then, hit [Enter].

Now the file namedpackage.jsonis automatically created in the root leaflet of the project.

Thepackage.jsonin the beginning folder looks like this:

Step 4: Install Cypress

Cypress is a NodeJS based mechanization tool, available as an npm package. Cypress can be also downloaded as an installer, but the recommended way is to install from npm.

In the themeProject Folder(CypressJavascript) & gt;Terminal > type 

npm install cypress -- save-dev

Step 5: Exposed Cypress Window

Once Cypress packages have be installed, Cypress, by nonremittal, configures some folders. Typically 4 folders will be created inside the Cypress folder videlicet plugins, support, integration, fixtures & # 8211; the first time when the quizzer open Cypress. In order to open the Cypress window, use one of the undermentioned dictation:

node ./node_modules/cypress/bin/cypress open

Or 

npx cypress open

On entering the above command, installation Begin:

Upon successful completion of this dictation, the Cypress window launching, as seen below:

As mentioned earlier, this command likewise prepares the framework in the ground.

It creates a Cypress folder in the project directory, and the Cypress brochure will have subfolders like integration, fixtures, plugins, and support.

Now the Project Folder look like below:

Let ’ s quickly examine these folders, why they are required:

• Fixtures:This folder helps keep datum file such asdata.json,which can be read directly inside the test scripts.
• Integration:This is an important folder. All tryout should sit inside this folder, because, by nonremittal, Cypress assumes that this is the test folder. Testers can create any act of subfolders inside this.
• Plugins: Helps to modify or extend the internal behavior of Cypress. Users can extend this framework or customize this framework beyond what Cypress gives them by nonremittal.
• Support:The support folder contains common files (reusable code, global variables, etc.) that necessitate to be access globally inside the framework.

Step 5: Create Spec Folder to organize tests

This footstep is optional but recommended. By creating a specification folder, it become easy to manage tests, since by default Cypress comes with representative tests.

• Navigate tocypress/integration & gt;create folder & gt; gens it.

Step 6: Create the maiden Cypress tryout file for Cypress Automation Framework

It ’ s clip to create the first spec. In this example, let & # 8217; s name the filefirst-test.js

• Create the test filefirst-test.jsinside thespec foldercreated in step 5.
• Navigate tocypress/integration/specs& gt; create a file with namefirst-test.js

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Step 7: Create the first test

Cypress use Mocha syntax for exam, so typically it contains describe () and it () function

• describe ():act as trial suites in Cypress
• it() :act as test cases in Cypress

In first-test.js,copy and paste the code below:

describe ('Verify Browser Stack Home Page ', () = & gt; {it ('Verify Browserstack logo is visible ', () = & gt; {cy.visit ('https: //www.browserstack.com/ '); cy.get (' # logo ') .should ('be.visible ');}) it ('Verify Header is present ', () = & gt; {cy.get ('h1 ') .first () .should ('be.exist ');}) it ('Verify Product menu are present ', () = & gt; {cy.get (' # product-menu-toggle ') .first () .should ('be.exist '); cy.get (' # developers-menu-toggle ') .first () .should ('be.exist '); cy.get (' # developers-menu-toggle ') .first () .should ('be.exist ');}) it ('Verify menu Links are present ', () = & gt; {cy.get (`` a [title='Pricing '] '') .first () .should ('be.exist '); cy.get (`` a [title='Sign In '] '') .first () .should ('be.exist '); cy.get (`` a [title='Live for Teams '] '') .first () .should ('be.exist ');})})

In Visual Studio Code it looks as shown below:

Step 8: Run tests on Cypress

You can run tests on Cypress either through CLI or through the Cypress UI Window.

Option 1: Run tests in Cypress Window/UI

To run test on Cypress window, do the followers:

In the end, participate the bid

npx cypress open

Or,

Alternatively, enter the command

node ./node_modules/cypress/bin/cypress unfastened

The above command will open the Cypress window

In the cypress window, pawl onfirst-test.js. Tests will start executing.

Once executing is complete, the results below will testify up as yield:

How to run Cypress tests using Cypress dictation line AKA Cypress CLI

In the Visual Studio Code Terminal, enter the following command:

npx cypress runtest

Or

node ./node_modules/cypress/bin/cypress run

On entering the command above, Cypress tests begin fulfil locally. Once execution is finished it gives results in the Command line.

How to run Cypress tests on multiple environments (OS/Browser) using Browserstack

Bear in mind that must be executed on real browsers for accurate results. Start running tests on 30+ versions of the late browsers across Windows and macOS with BrowserStack. Use instant, hassle-free parallelization to get fast results without compromising on accuracy. Detect bugs before users do by quiz software in with BrowserStack.

Let ’ s see how to execute Cypress tests on multiple platforms using BrowserStack.

Step 1: Install Browserstack node bundle

npm install -g browserstack-cypress-cli

Step 2: Create browserstack.json

The browserstack.json is a JSON file that will make the run configuration, which will be used to action Cypress tests on the BrowserStack environment. This is the lonesome additional file testers need to make.

In order to createbrowserstack.json

• Navigate to theProject rootage folder (where cypress.jsonis located.
• Create one more file namedbrowserstack.json

Step 3: Configure browserstack.json to run Cypress trial on multiple program

Now, configurebrowserstack.jsonfile. For this, tester need a BrowserStackusername and access_key.

To get a BrowserStack username and access_key, follow the steps below:

• Login to BrowserStack & gt; Click onACCESS KEY
  
• The username and access_key will appear above the splasher.
• Copy those keys and add username and access key to thebrowserstack.jsonfile as below:

'' auth '': {'' username '': `` & lt; user_name & gt; '', '' access_key '': `` & lt; approach key & gt; ''},

Configure browser details:

This example will run Cypress test on the undermentioned browser-device combinations:

1. Windows 10 & amp; Chrome browser (Latest adaptation and Previous Version)
2. OS X Mojave & amp; Firefox browser (Latest adaptation and Previous Version)
3. OS X Catalina & amp; Edge browser (Only latest variation)

So, a total of 5 test runs must be configured. To accomplish that, testers must have the entries show below in theirin browserstack.json file:

`` browsers '': [{'' browser '': '' chrome '', '' os '': '' Windows 10 '', '' versions '': [`` latest '', '' up-to-the-minute - 1 '']}, {'' browser '': '' firefox '', '' os '': '' OS X Mojave '', '' versions '': [`` latest '', '' latest - 1 '']}, {'' browser '': '' edge '', '' os '': '' OS X Catalina '', '' versions '': [`` latest '']}],

Finally, the tester needsto cite run settings, which will include & # 8211; the Cypress config file path, Cypress edition, project name, construct name and parallel runs.

Now, add the following entry tobrowserstack.json

'' run_settings '': {'' cypress_config_file '': '' ./cypress.json '', '' cypress_version '': '' 7 '', '' project_name '': '' My sandbox projection '', '' build_name '': '' Build no. 1 '', '' parallels '': '' 5 ''}

On putting everything together,the final browserstack.jsonfile looks as shown below:

{'' auth '': {'' username '': '' & lt; user_name & gt; '', '' access_key '': '' & lt; access_key & gt; ''}, '' browsers '': [{'' browser '': '' chrome '', '' os '': '' Windows 10 '', '' version '': [`` latest '', '' latest - 1 '']}, {'' browser '': '' firefox '', '' os '': '' OS X Mojave '', '' versions '': [`` latest '', '' up-to-the-minute - 1 '']}, {'' browser '': '' edge '', '' os '': '' OS X Catalina '', '' versions '': [`` latest '']}], '' run_settings '': {'' cypress_config_file '': '' ./cypress.json '', '' cypress_version '': '' 7 '', '' project_name '': '' My sandbox project '', '' build_name '': '' Build no. 1 '', '' latitude '': '' 5 ''}}

In Visual Studio Code IDE, it looks as shown below:

Now that browserstack.json is ready, let ’ s execute tests on BrowserStack.

Talk to an Expert

Step 4: Execute your Cypress Tests on Browserstack

Executing Cypress tests on Browserstack is fairly uncomplicated.

• Navigate toOptic Studio Code & gt; Terminal & gt;Enter the undermentioned command:

npx browserstack-cypress run -- sync

On executing the dictation above, the Cypress exam start escape. Users can see the test solvent in the BrowserStack dashboard.

• Login to Browserstack& gt; Navigate toDashboard

Click on a browser name, which will redirect to the page with test point.

A major vantage of scat Cypress tests on BrowserStack is that it will read picture of examination execution. Uncalled-for to say, this is immensely helpful when it comes to identifying and debugging unexpected errors or bugs.

With the many advantages Cypress provides, it is natural that QAs want to conduct tests using this particular automation framework. While it may appear slightly complicated at first, simply follow the steps outlined in this clause, and Cypress testing will become a regular, easy accomplished task.

Frequently Asked Questions

1. How do I run a Cypress tryout in Chrome?

You can run Cypress tests in Chrome using the undermentioned command:cypress run & # 8211; browser chrome

Alternatively, you can use the Cypress Test Runner and select the Chrome browser from the browser dropdown card. Read more about

2. How do I run an individual test in Cypress?

To run an individual test in Cypress, you can use the undermentioned dictation in your terminal:npx cypress run & # 8211; spec & lt; path & gt;

Replace & lt; itinerary & gt; with the itinerary to the specific test file you want to run.

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides