How to Install Cypress for Windows: The Ultimate Guide

Cypress is a popular open-source front-end testing tool that allows you to write faster, easier and more reliable UI tests for anything that runs in a browser. With its easy-to-use interface, automatic waiting, and debuggability, Cypress makes setting up, writing, running and debugging tests simple and straightforward.

In this comprehensive guide, we’ll walk through everything you need to know to get Cypress up and running on Windows, from installing prerequisites like Node.js to writing your first real test. By the end, you’ll have the knowledge to start testing any web application with Cypress.

Prerequisites

Before installing Cypress, there are a couple of prerequisites we need to set up first:

Node.js

Cypress is built on top of Node.js, so you’ll need to have a current version installed.

Head to nodejs.org and download the LTS (long term support) version installer for Windows. This is the recommended version for most users.

Run the installer, which will set up Node.js and the node package manager (npm).

To verify, open a command prompt/PowerShell and type:

node -v
npm -v

This should print out the installed versions. Make sure node is at least v8.3.0 and npm is at least 5.2.0.

A Code Editor

You’ll need a code editor to write and edit Cypress tests. Popular free choices like Visual Studio Code or Atom will work perfectly.

Git (optional)

While not required, having Git installed allows you to clone example projects and seamlessly use Cypress with CI/CD pipelines.

Download the latest Git for Windows installer and run it. Leave the default options checked.

Installing Cypress

With the prerequisites set up, we’re now ready to install Cypress.

There are a few different ways to install Cypress in a project:

1. Globally via npm

To make the Cypress executable globally available from anywhere, install it globally with npm:

npm install cypress --global

Now you can open Cypress from any project folder with the command cypress open.

2. Locally via npm

For most projects, you’ll want to install Cypress locally as a dev dependency.

Navigate into your project folder in the terminal then run:

npm install cypress --save-dev

This will install Cypress and save it as a dev dependency in your package.json file.

To open Cypress now run:

./node_modules/.bin/cypress open 

Or with npx:

npx cypress open

3. Locally via yarn

If using yarn over npm, you’d install Cypress by navigating into your project and typing:

yarn add cypress --dev

Then open it with:

yarn run cypress open

Running Cypress for the First Time

Once Cypress finishes installing, you’re ready to run it for the first time.

To open the Test Runner where you‘ll write, run and debug tests, simply execute one of the below commands from your project root (depending on your install method):

Global install:

cypress open

Local install:

./node_modules/.bin/cypress open
npx cypress open 

The Cypress App will launch, along with a test runner window like below:

Since no specs or tests have been created yet, Cypress will prompt you to create a sample spec file to start with. Press the suggested Create Spec File button or choose Create new empty spec.

This generates an example_spec.js file in the ./cypress/integration folder, containing a sample test that visits the Cypress example website and asserts the title:

describe(‘My First Test‘, () => {
  it(‘Visits the Kitchen Sink‘, () => {
    cy.visit(‘https://example.cypress.io‘)

    cy.contains(‘type‘).click()

    // Should be on a new URL which includes ‘/commands/actions‘
    cy.url().should(‘include‘, ‘/commands/actions‘)

    // Get an input, type into it and verify that the value has been updated
    cy.get(‘.action-email‘)
      .type(‘[email protected]‘)
      .should(‘have.value‘, ‘[email protected]‘)
  })
})

Back in the test runner, you should see the newly created spec file listed under INTEGRATION TESTS. Click to open it.

By default Cypress will run all tests in the spec on open. You should now see Cypress navigating to the example website URL, clicking elements, entering text into inputs, asserting values and URLs – all automatically with no need to click a “run tests” button.

And just like that – you’ve successfully run your first Cypress test!

Writing Your First Real Test

Let’s get out of the Cypress example site now and start testing a real application you’re building or working with.

1. Replace the .visit() URL with your web app‘s URL in development, often http://localhost:3000.

2. Delete the rest of the commands, leaving just:

describe(‘My Test‘, () => {
  it(‘visits app‘, () => {
    cy.visit(‘http://localhost:3000‘) 
  })
})

3. Make sure your local dev server is running for the app.

4. Save the spec file. The test runner will detect the file has updated and automatically re-run loading your app‘s URL.

You’ve just loaded and tested your actual app!

Now let’s add some real tests:

5. Query for elements and assert text values:

   cy.contains(‘h1‘, ‘My App‘) // Assert h1 text

6. Interact with elements:

   cy.get(‘button‘).click() // Click a button

7. Fill inputs and assert values:

  cy.get(‘#email‘).type(‘[email protected]‘) 
    .should(‘have.value‘, ‘[email protected]‘) 

I encourage you to check out the Cypress API docs for the full range of commands available.

The Cypress Real World App (RWA) is also a perfect starting place for examples testing a realistic application with data, logins, API mocks etc.

Recipes & Examples

Here are some additional recipes and examples to explore:

General

• Testing tooltips & popovers
• Tab handling and links
• The .focused() command
• The Cypress .invoke() command
• Conditional testing

Authentication

• Log in recipes
• Log out testing

Animations

• Testing animations

List Testing

• Effective list testing

UI Testing

• UI testing workshop
• Real World App (RWA)

API Testing

• API testing workshop
• Mocking API calls
• Stubbing API calls

CI/CD

• CircleCI example
• Github Actions example

Debugging Tests

One of the best features of Cypress is debugging directly from the application via the interactive Test Runner GUI.

As tests run, you can hover over commands to see previews, pause on failures, step through execution, or add, edit and re-run commands live without needing to re-run the full suite each time.


For debugging tests in your preferred IDE instead, check out the Cypress Debugging Guide.

Some additional tips:

• Use .debug() to pause tests where needed
• Print values with .then(() => console.log ...)
• AccessDOM properties with .invoke(‘attr‘, ‘name‘)

CI/CD Integration

While writing and debugging Cypress tests in the interactive runner is fast – you‘ll eventually want to run all tests headlessly (without the GUI) as part of Continuous Integration (CI) test pipelines.

Popular CI services will install Cypress, cache node modules and artifacts like screenshots and videos, parallelize test runs across machines and pass information between jobs.

Here are guides to help you set this up:

• CircleCI Orb
• GitHub Actions
• GitLab CI

If using a different provider, check out the full list of CI examples here.

Cypress Dashboard

The Cypress Dashboard provides additional capabilities when running Cypress tests in CI including:

• Parallelization across machines
• Load balancing
• Retries of failed tests
• History and insights
• Artifact storage
  -Notifications

And more – learn about Cypress Dashboard features here.

Best Practices

Here are some additional best practices to follow as you write and structure more tests:

• Place tests alongside source code they test
• Separate API and Unit tests from Integration tests
• Stick to the Testing Pyramid with mostly Unit + Integration tests
• Watch test flakiness and prevent brittle tests
• Component test when possible as they localize failures
• Leverage data-test ids for selectors
• Follow the ethos of ‘Quality over quantity’

And check out more recommended best practices here.

Advanced Configuration

While Cypress works out of the box with zero config – you can tweak its configuration depending on needs:

Configuration Values

Set values like default test timeout, video recording on/off, test retries and more via cypress.config.{js,ts} or the Cypress UI. Full configuration here.

Environment Variables

Use environment variables for things like API keys, test accounts credentials, base URLs etc. Manage them via cypress.env.json or the UI. Learn more.

Plugins and Extensibility

Tap into events like file pre-processing, test runs, task execution etc via cypress/plugins to extend functionality. Plugin docs.

Custom Commands

Write reusable custom commands in cypress/support and import into your tests. Custom commands guide.

Fixtures and Test Data

Load seed data, mock responses or files in cypress/fixtures. Access via cy.fixture() in tests. Fixture guide here.

Cypress Module API

You can also programmatically control Cypress outside of the Test Runner. Module API Docs.

Additional Resources

For more help, usage guides and references:

• Cypress Documentation – Installation guides, API reference etc
• Cypress FAQ – Most common questions answered
• Cypress GitHub Repo – Report issues, contribute
• Gitter Community Chat – Chat with users and devs
• Stack Overflow – Ask questions

Or explore over 1500+ tutorial posts right here:

https://on.cypress.io

I hope this guide serves you well installing Cypress and writing your first UI automation tests! Let me know if you have any other questions.

Happy testing!