How to install Cypress for Windows

Related Product

Cypress is a robust examination framework that has a straightforward induction process. The initiation process of Cypress on Windows, ensures you get everything set up to execute end-to-end trial.

In this tutorial, learn in detail about each method to instal Cypress on Windows.

System Requirements for Cypress

You will need to download and run Cypress as a desktop application on your estimator. Here is a rundown of the OSes that are compatible with Cypress.

• macOS 10.9 and above (64-bit only)
• Linux Ubuntu 12.04 and above
• Fedora 21 and Debian 8 (64-bit just)
• Windows 7 and above

If you instal Cypress with npm, Cypress supports Node.js 8 and above

Installing Node.js

Before proceeding with the Cypress installation, you must have Node.js installed. is a JavaScript runtime environment. An IDE (Integrated Development Environment) and a code editor, such as Microsoft & # 8217; s Visual Studio Code, are also required for programming and managing task directories.

Download NodeJS for Windows 

Running the installer

• You can get the Windows installer here. Just run the.msifile to set up Node.js.

• Continue to Next and approve the permit.

Verifying the induction

• The & # 8216;npm package manager& # 8216; is besides installed, as shown below.

This dispatch the implementation of Node.js. Once establish, you can validate the version with the bidnode -version or node -v, as well as the installation of the Node package manager with the command npm -version.

How Install Cypress on Windows

Here are different method employ below to instal Cypress in the Windows desktop.

Installing Cypress via npm

You can use npm to install Cypress; to do so, cd into your project directory and run the below command

npm install cypress -save-dev

When you run this, Cypress will be installed for your task as a dev dependence.

1. Make certain your project directory contains a package.json file or a node_modules pamphlet. By doing this, the proper directory for Cypress & # 8217; installation is created.

2. The Cypress documentation counsel using npm to run Cypress because:

• In the same way that you would dog the version of any other addiction, Cypress also has versions.
• Installing npm made it easier to use continuous Integration with Cypress.

Installing Cypress via pnpm

You can install Cypress using pnpm with the following dictation:

pnpm add -- save-dev cypress

When this is run, Cypress will be topically installed as a dev dependency for your project.

Similar to the npm method, you should ensure your project directory contains a package.json file or a node_modules folder to create the proper directory for Cypress ’ installation.

Installing Cypress via recital

To use yarn to install Cypress, cd into your project directory, and so enroll the bidding exhibit below:

yarn add cypress -- dev

Verifying the installation

In addition to downloading Cypress immediately,npm install cypressalso impart an entry to thepackage.jsonfile. When you run-save-dev,the cypress unveiling inpackage.jsonwill be preserve. As a growing dependency, Cypress will be downloaded and install on your labor.

The package.json will still have an unveiling for cypress even after you move the project cypress test to a different place. Therefore, you only demand to run thenpm install cypresscommand, not the fullnpm install cypress -save-devcommand, which merely needs to be run erst.

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Once you open thepackage.jsonin the cypress booklet, you will see an entry for the cypress software that you receive lade.

Unmediated Download

You too receive the option to directly download Cypress from theirofficial website.

• Once you are on the homepage, you can tick on& gt; _npm establish cypress button

• A pop appears with a direct download option, you can tick‘ Download Cypress.zip ’and instal Cypress your OS scheme.

Updating Cypress

Use one of the commands below to launch the Cypress coating.

$ ./node_modules/.bin/cypress unfastened Or $ (npm bin) /cypress open # Using npx, note: npm & gt; v5.2 $ npx cypress exposed

You can see the notice for the updated version (10.8.0), the link for the changelog, and the current version (8.4.1) at the bottom. You can review the changelog for the nearly recent version if you are not find notifications. To see every variation, click Changelog.

To view the change log, click Changelog at the bottom of the runner or go to thislink. You can see the features, performance fixes, and bug hole hither, among other things.

The most recent variant with the release date will be at the nous of the list. You can quickly access the relevant version by clicking on the links on this page & # 8217; s right side under the section.

Update Cypress using NPM

npm install -- save-dev cypress @ 10.8.0

Additionally, you can switch the Cypress edition to the most recent upgraded adaptation in the package.json

How to Open Cypress and Set up Your Inaugural Test

Now that you have Cypress installed, you can run it by

npx cypress exposed

• To start, click the & # 8220; E2E Testing & # 8221; push on the left.
• Next, Cypress will tell you about the different files it will make for you so that everything is set up right for e2e testing. Click on & # 8220; Continue & # 8221;.
• Next, you & # 8217; ll see a screen that state & # 8220; Choose a Browser. & # 8221; Depending on which browsers you have on your computer, you may have different choices.

• As you don & # 8217; t yet receive any examination files make, Cypress will so launch and prompt you to create your 1st spec.
• Select & # 8220; Create a new empty spec & # 8221;: which could behome.cy.ts.

Creating a new project

In VSCode, open the filecypress/e2e/home.cy.ts.

Prior to update it so that tests can be performed against your course application, you must analyze the code in this file.

describe (`` empty spec '', () = & gt; {it (`` walk '', () = & gt; {cy.visit (`` https: //example.cypress.io '')})})

It()is a singular test every clip you see it in a specification file. The arguments are a string and a recall mapping, incisively the same as the & # 8220;describe ()& # 8221; role & # 8217; s arguments. The line needs to be updated to the pursual.

describe (`` home page '', () = & gt; {it (`` the h1 check the correct text '', () = & gt; {cy.visit (`` https: //example.cypress.io '')})})

Writing your initiative test

You will write a test that asserts that the h1 on the home page includes the correct text for your first test.

The command visit instructs Cypress where to run your test. Update the address incy.visit ()since you & # 8217; ll be operating your covering topically atlocalhost:3000.

describe (`` home page '', () = & gt; {it (`` the h1 contains the correct text '', () = & gt; {cy.visit (`` http: //localhost:3000 '') cy.get (`` h1 '') .contains (`` Testing Angular Applications with Cypress '')})})

Running the test

Run your test.

npx cypress open

You must always have your covering & # 8217; s local development server go when performing Cypress exam.

npm run dev

Troubleshooting common issues

Cypress itself can occasionally exhibit planetary or otherwise surprising behavior. There is a strong recommendation that you verifythisimmediately.

• Cypress is not recognise as a bidding

If you installed Cypress topically in your project, you must execute commands fromnode_modules/.bin, for example,./node_modules/.bin/cypressrun if you need to carry out Cypress run, or just run npx cypress run, which accomplishes the like thing.

Or

npm install cypress -- save-dev

Then, when it is relaunched, it will work again.

• Cypress neglect to commence

There appears to be a library or habituation lose; simply execute npm install to add all miss libraries anddependenciesto your project.

• Browser not launching

Cypress will try to detect which variant of Chrome is already loaded on the machine you are using. However, errors can occur when exploring browser in assorted environments. There are workarounds if Cypress can not & # 8220; see & # 8221; a browser yet though you are certain it is present on your reckoner.

1. Using the ` & # 8211; browser `command line argument
2. In Cypress, pawl on the Settings tab to view the complete list of ascertained browsers along with their properties within the resolved shape.
3. Another method for log what Cypress find is to start Cypress with the DEBUG surround variable set to cypress: catapult. This will output to the terminal details about the discovered browsers and their holding.

Why use BrowserStack Automate to Run your Cypress Tests

BrowserStack Automate lets you run Cypress examination efficiently across multiple device-OS-browser combination. Here are a few reasons why you should choose BrowserStack:

• : One of the limit of Cypress is that it runs on circumscribed browsers, mainly Chrome-based I. BrowserStack expand your Cypress test to many former browsers, such as Safari, Edge, IE, and more.
• Video Recording: You can record videos of test execution.
• Cloud Infrastructure: Automate does not require setting up or maintaining browser or physical devices locally.
• Parallel Testing: With, you can run multiple Cypress tryout simulatenously, and accelerate test execution and the freeing cycles.
• Real-device testing: BrowserStack offers you a immense, allow you run Cypress tests on 3500+ real device, browser, and OS combinations, thus allow you to test under.
• Integrations: Seamlesswith several like, Travis CI,, Bamboo and more.
• Scalability: BrowserStack offers real-device and parallel testing on a cloud-based infrastructure, letting you run hundreds of tests across different environments.

Talk to an Expert

Conclusion

Cypress has many advantages including Real-Time Reloads, Debuggability, Automatic waiting, a unique dashboard and a GUI tool to execute/view your test view. An entirely new method of testing that has never be viable before is made potential by having complete control over your covering, the mesh traffic, and native access to every horde object. With Cypress, you can well change any constituent of your covering & # 8217; s functionality rather than being & # 8220; lock out & # 8221; and ineffectual to do so.

Cypress is an efficient automation tool, but testing the app on an will yield more accurate termination. Bottlenecks in the can be fix in good time before release if they are discover and examine under realistic user scenarios. Using BrowserStack Automate, can be fulfill rapidly and expeditiously by using its robust cloud infrastructure.

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides