Skip to main content

​
Prerequisites

Before installing the framework, ensure you have the following installed:

Node.js

Version 14.x or higher (LTS recommended)

npm

Comes with Node.js installation

Git

For cloning the repository

Code Editor

VS Code recommended for TypeScript support

​
Installation Steps

1

Clone the Repository

Clone the project to your local machine:
git clone https://github.com/iZ3B4Z/CypressAutomation.git
cd CypressAutomation
2

Install Dependencies

Install all required npm packages:
npm install
This will install:
  • cypress (^14.5.4) - The core testing framework
  • typescript (^5.9.3) - TypeScript compiler and type definitions
  • cypress-xpath (^2.0.1) - XPath selector support
3

Verify Installation

Verify that Cypress is installed correctly:
npx cypress verify
You should see output similar to:
✔ Verified Cypress! /Users/username/Library/Caches/Cypress/14.5.4/Cypress.app
4

Open Cypress

Test the installation by opening Cypress:
npx cypress open
This will launch the Cypress Test Runner interface.

​
Project Dependencies

Here’s what gets installed with npm install:
package.json
{
  "dependencies": {
    "cypress": "^14.5.4",
    "cypress-xpath": "^2.0.1",
    "typescript": "^5.9.3"
  }
}

​
Dependency Details

  • cypress: The main testing framework that provides the test runner, assertion library, and browser automation capabilities.
  • typescript: Adds static typing to your tests, improving code quality and developer experience.
  • cypress-xpath: Extends Cypress with XPath selector support, useful for legacy applications or complex DOM traversal.

​
Browser Setup

Cypress supports multiple browsers out of the box:
By default, Cypress uses Electron (a Chromium-based browser). You can also run tests in Chrome, Edge, or Firefox.

​
Running with Different Browsers

# Run with Chrome
npx cypress run --browser chrome

# Run with Firefox
npx cypress run --browser firefox

# Run with Edge
npx cypress run --browser edge

​
Visual Studio Code

For the best development experience with TypeScript:
  1. Install the following VS Code extensions:
    • Cypress Snippets - Code snippets for Cypress commands
    • ESLint - Linting support
    • TypeScript and JavaScript Language Features (built-in)
  2. VS Code will automatically detect TypeScript and provide IntelliSense for Cypress commands.

​
Troubleshooting

If npx cypress verify fails, try:
# Clear Cypress cache
npx cypress cache clear

# Reinstall Cypress
npm install cypress --force
npx cypress install
Ensure your IDE is using the workspace TypeScript version:In VS Code: Cmd/Ctrl + Shift + P → “TypeScript: Select TypeScript Version” → “Use Workspace Version”
If you encounter permission errors, avoid using sudo. Instead:
# Fix npm permissions
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH

​
Verify Your Setup

After installation, verify everything is working: 
# Check Node.js version
node --version

# Check npm version
npm --version

# Check Cypress installation
npx cypress version
You should see Cypress version 14.5.4 or higher, Node.js 14.x or higher, and npm 6.x or higher.

​
Next Steps

Quickstart Guide

Run your first test and see the framework in action

Project Structure

Learn how the project is organized

Build docs developers (and LLMs) love

Get started for freeTalk to us