Integrate Cypress with Your IDE: Comprehensive Setup Guide

In this tutorial, you will learn how to integrate your IDE with Cypress, we will also show you how to configure our development environment.

File Opener Preference

We will start off with how you can select a file opener preference, when you click on a file path from the Test Runner in the command or an error, Cypress attempts to open the file on your system by default. In the case where the editor supports inline highlighting of the file, the file opens with the cursor located on the line and column of interest.

Cypress will ask you to select the location you prefer to open the file when you click a file path for the first time.

Here are the options available to you:

• File system (e.g. Finder for MacOS, File Explorer for Windows)
• An IDE located on your system
• A specified application path

Cypress will attempt to find the file editors that are available on our system and display them as options. If the editor you prefer is not on the list, you can specify the full path to the editor by selecting Other. But by default, Cypress will make every effort to open the file.

After you set your file opener preference, files automatically open in our selected application without Cypress asking you to choose. If you want to change the selection you made, you can do that in the Settings tab of the Cypress Test Runner by clicking under File Opener Preference.

Extensions & Plugins

There are many third-party IDE extensions and plugin to help you integrate your IDE with Cypress, we will be looking at some of them.

Visual Studio Code

• Cypress Fixture-IntelliSense: This plugin supports your cy.fixture() and cy.route(..., fixture:) commands by providing intellisense for existing fixtures.
• Cypress Helper: Cypress helpers are various helpers and commands for integration with Cypress.
• Cypress Snippets: These are useful Cypress code snippets.
• Open Cypress: Enables you to open Cypress specs and single it() blocks directly from VS Code.
• Test Utils: Easily add or remove .only and .skip modifiers using keyboard shortcuts or the command palette.

IntelliJ Platform

Cypress is compatible with IntelliJ IDEA, AppCode, CLion, GoLand, PhpStorm, PyCharm, Rider, RubyMine, and WebStorm.

• Cypress Support: This plugin integrates Cypress under the common Intellij test framework.
• Cypress Support Pro: This is an improved version of the Cypress Support plugin with debugging from the IDE, advanced autocomplete, built-in recorder and other features.

Intelligent Code Completion

Writing Tests

Features

IntelliSense offers you intelligent code suggestions directly in your IDE while writing tests. A typical IntelliSense popup will show command definition, a code example and a link to the full documentation page. IntelliSense provides you with:

• Autocomplete feature when you are typing Cypress commands
• Signature help when you are writing and hovering on Cypress commands.
• Autocomplete when you are typing assertion chains, it will include only DOM assertions if you are testing on a DOM element.

Development Environment Setup

This section assumes that you already have Cypress installed. Cypress has TypeScript type declaration included by default. These type declarations can be used by modern browsers to show IntelliSense inside spec files.

Triple slash directives

The simplest way to see IntelliSense when you are typing a Cypress command or assertion is to add a triple-slash directive at the top of your JavaScript or TypeScript testing file. This turns the IntelliSense on a per file basis.

You can paste the commented line below into your spec file.

'''/// <reference types="Cypress" />'''

When you write custom commands and you provide TypeScript definitions for them, you can use the triple slash directives to show IntelliSense, even when your project uses only JavaScript. For instance, if you wrote custom commands in cypress/support/commands.js and you describe them in cypress/support/index.d.ts, you should use:

'''// type definitions for the Cypress object "cy"
/// <reference types="cypress" />

// type definitions for custom commands such as "createDefaultTodos"
/// <reference types="../support" />'''

In the case where the triple slash directive does not work, you will need to refer to your code editor in TypeScript’s Editor Support doc and follow the instructions for your IDE in order to get TypeScript support and intelligent code completion configured in your developer environment first. By default, there is built in TypeScript support for Visual Studio Code, Visual Studio, and WebStorm – any other editor will require extra setup.

Reference type declarations via jsconfig

Rather than adding triple slash directives to each JavaScript spec file, some IDEs (such as VS Code) understand a common jsconfig.json file at the root of the project. You can include the Cypress module and your test folders in this file.

'''{
  "include": [
    "./node_modules/cypress",
    "cypress/**/*.js"
  ]
}'''

The Intelligent Code Completion should now show help for cy commands in your regular JavaScript spec files.

Reference type declarations via tsconfig

Addition of a tsconfig.json file inside your cypress folder with the following configuration should get intelligent code completion working.

'''{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "../node_modules",
    "types": [
      "cypress"
    ]
  },
  "include": [
    "**/*.*"
  ]
}'''

Configuration

Features:

Whenever you are editing the configuration file, which is the cypress.json file by default, you can use Cypress’s json schema file (https://on.cypress.io/cypress.schema.json) to get intelligent tooltips in your IDE for each configuration property.

Set up in your Dev Environment:

Both Visual Studio and Visual Studio Code supports Intelligent code completion Using JSON schemas. You will need extra configuration or plugins for JSON schema support in other editors.

To set up in Visual Studio Code, you can either open Preferences / Settings / User Settings and add the json.schemas property. Ensure that you replace cypress.json with your configuration file if not the default.

'''{
  "json.schemas": [
    {
      "fileMatch": [
        "cypress.json"
      ],
      "url": "https://on.cypress.io/cypress.schema.json"
    }
  ]
}'''

Or you can add a $schema key to your Cypress configuration file directly, which is an efficient way to share the schema with all collaborators of the project.

'''"$schema": "https://on.cypress.io/cypress.schema.json",'''