How to install Cypress for Windows

Cypress is a JavaScript-based end-to-end testing framework with a number of built-in capabilities. Any useful automation application must have these features. You don’t have to install ten different things in order to build up your test suite when using Cypress. The majority of testing tools function externally from the browser and carry out network-based remote commands. The complete antithesis is Cypress. The same run loop as your application is used to launch Cypress.

System Requirements for Cypress Windows

You will need to download and run Cypress as a desktop application on your computer. 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 only)
• Windows 7 and above

If you install 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. Node.js is a JavaScript runtime environment. An IDE (Integrated Development Environment) and a code editor, such as Microsoft’s Visual Studio Code, are also required for programming and managing project directories.

Download NodeJS for Windows 

Running the installer

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

• Continue to Next and approve the license.

Verifying the installation

• The ‘npm package manager‘ is also installed, as shown below.

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

Installing Cypress

Here are two different methods used below to install 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 project as a dev dependency.

• Make sure your project directory contains a package.json file or a node_modules folder. By doing this, the proper directory for Cypress’ installation is created.
• The Cypress documentation advises using npm to run Cypress because:
  • In the same way that you would track the version of any other dependency, Cypress also has versions.
  • Installing npm made it easier to use continuous Integration with Cypress.

Installing Cypress via yarn

To use yarn to install Cypress, cd into your project directory, and then enter the command shown below:

yarn add cypress --dev

Verifying the installation

In addition to downloading Cypress immediately, npm install cypress also adds an entry to the package.json file. When you run -save-dev, the cypress entry in package.json will be saved. As a development dependency, Cypress will be downloaded and installed on your project.

The package.json will still have an entry for cypress even after you move the project cypress test to a different place. Therefore, you only need to run the npm install cypress command, not the full npm install cypress -save-dev command, which only needs to be run once.

Once you open the package.json in the cypress folder, you will see an entry for the cypress software that you have loaded.

Updating Cypress

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

$ ./node_modules/.bin/cypress open

Or

$(npm bin)/cypress open

#Using npx, note: npm > v5.2

$npx cypress open

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 most recent version if you are not receiving notifications. To see every version, click Changelog.

To view the change logs, click Changelog at the bottom of the runner or go to this link. You can see the features, performance fixes, and bug fixes here, among other things.

The most recent version with the release date will be at the head of the list. You can quickly access the relevant version by clicking on the links on this page’s right side under the section.

 Update Cypress using NPM

npm install --save-dev cypress@10.8.0

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

Setting up your first Cypress test

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

npx cypress open

• To start, click the “E2E Testing” button 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 “Continue”.
• Next, you’ll see a screen that says “Choose a Browser.” Depending on which browsers you have on your computer, you may have different choices.

• As you don’t yet have any test files created, Cypress will then launch and prompt you to create your first specification.
• Select “Create a new empty spec”: which could be home.cy.ts.

Creating a new project

In VSCode, open the file cypress/e2e/home.cy.ts. 

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

describe("empty spec", () => {
it("passes", () => {
cy.visit("https://example.cypress.io")
})
})

It() is a singular test every time you see it in a specification file. The arguments are a string and a callback function, exactly the same as the “describe()” function’s arguments. The line needs to be updated to the following.

describe("home page", () => {
it("the h1 contains the correct text", () => {
cy.visit("https://example.cypress.io")
})
})

Writing your first 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 tests. Update the address in cy.visit() since you’ll be operating your application locally at localhost:3000.

describe("home page", () => {

it("the h1 contains the correct text", () => {
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 application’s local development server running when performing Cypress tests.

npm run dev

Troubleshooting common issues

Cypress itself can occasionally exhibit erratic or otherwise surprising behavior. There is a strong recommendation that you verify this immediately.

• Cypress is not recognized as a command

If you installed Cypress locally in your project, you must execute commands from node_modules/.bin, for example, ./node_modules/.bin/cypress run if you want to carry out Cypress run, or just run npx cypress run, which accomplishes the same thing.

Or

npm install cypress --save-dev

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

• Cypress fails to start

There appears to be a library or dependency missing; simply execute npm install to add all missing libraries and dependencies to your project.

• Browser not launching

Cypress will try to detect which version of Chrome is already loaded on the machine you are using. However, errors can occur when exploring browsers in various environments. There are workarounds if Cypress cannot “see” a browser even though you are certain it is present on your computer.

1. Using the `–browser` command line argument
2. In Cypress, click on the Settings tab to view the complete list of discovered browsers along with their properties within the resolved configuration.
3. Another method for logging what Cypress discovers is to start Cypress with the DEBUG environment variable set to cypress: launcher. This will output to the terminal details about the discovered browsers and their properties.

Conclusion

Cypress has many advantages including Real-Time Reloads, Debuggability, Automatic waiting, a unique dashboard and a GUI tool to execute/view your tests view. An entirely new method of testing that has never been feasible before is made possible by having complete control over your application, the network traffic, and native access to every host object. With Cypress, you can easily change any element of your application’s functionality rather than being “locked out” and unable to do so. 

Cypress is an effective automation tool, but testing the app on an real device cloud will yield more accurate results. Bottlenecks in the real user experience can be fixed in good time before release if they are discovered and tested under realistic user scenarios. Using BrowserStack Automate, Cypress tests can be executed rapidly and efficiently by using its robust cloud infrastructure.

Run Cypress Tests on Real Devices