Cypress Setup Tutorial for Windows

Prerequisites

  1. Windows 10 or later
  2. Node.js (version 12 or above)
  3. npm (usually comes with Node.js)
  4. A code editor (e.g., Visual Studio Code)

Step-by-Step Guide

  1. Install Node.js:
    • - Visit the official Node.js website: https://nodejs.org
    • - Download the LTS (Long Term Support) version for Windows
    • - Run the installer and follow the installation wizard
    • - Verify installation by opening Command Prompt and typing:
      node --version
      npm --version
  2. Create a new project directory:
    • - Open Command Prompt
    • - Navigate to where you want to create your project:
      cd C:\Users\YourUsername\Documents
    • - Create a new directory and navigate into it:
      mkdir cypress-project
      cd cypress-project
  3. Initialize a new Node.js project:
    • npm init -y
  4. Install Cypress:
    • npm install cypress --save-dev
  5. Open Cypress:
    • - Add a script to your package.json file:
      "scripts": {
        "cypress:open": "cypress open"
      }
    • - Run Cypress for the first time:
      npm run cypress:open
  6. Configure Cypress (optional):
    • - Open the cypress.json file in your project root
    • - Add configuration options as needed, for example:
      {
        "baseUrl": "http://localhost:3000",
        "viewportWidth": 1280,
        "viewportHeight": 720
      }
  7. Write your first test:
    • - Navigate to the cypress/integration folder
    • - Create a new file, e.g., first_test.spec.js
    • - Add a simple test:
      describe('My First Test', () => {
        it('Visits the Kitchen Sink', () => {
          cy.visit('https://example.cypress.io')
          cy.contains('type').click()
          cy.url().should('include', '/commands/actions')
        })
      })
  8. Run your test:
    • - In the Cypress Test Runner, click on your test file
    • - Watch Cypress run your test in a browser window

Troubleshooting

  1. If you encounter any issues with file paths, make sure to use forward slashes (/) or escaped backslashes (\\) in your Cypress tests
  2. If Cypress fails to install, try running the command prompt as an administrator
  3. Make sure your firewall isn't blocking Cypress from accessing the internet or running tests

Congratulations! You've now set up Cypress on your Windows machine and run your first test. You're ready to start exploring the Cypress Testing Playground and tackling the tasks we've prepared for you.