Intelligent Code Completion

Improve this doc

Writing Tests

Features

IntelliSense is available for Cypress. It offers intelligent code suggestions directly in your IDE while writing tests.

Autocomplete while typing Cypress commands

Signature help when writing and hovering on Cypress commands

Autocomplete while typing assertion chains, including only showing DOM assertions if testing on a DOM element.

Set up in your Dev Environment

The TypeScript type declarations are used to generate the data for intellisense and come packaged within Cypress. This document assumes you have installed Cypress.

Please refer to your code editor in TypeScript’s Editor Support doc and follow the instructions for your IDE to get TypeScript support and intelligent code completion configured in your developer environment first. TypeScript support is built in for Visual Studio Code, Visual Studio, and WebStorm - all other editors require extra setup.

Reference type declarations via tsconfig

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

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

Triple slash directives

Adding a triple-slash directive to the head of your JavaScript or TypeScript testing file should get intellisense working on a per file basis.

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

Configuration

Features

When editing the cypress.json file, you can use our json schema file to get intelligent tooltips in your IDE for each configuration property.

Property help when writing and hovering on configuration keys

Properties list with intelligent defaults

Set up in your Dev Environment

Intelligent code completion using JSON schemas is supported by default in Visual Studio Code and Visual Studio. All other editors will require extra configuration or plugins for JSON schema support.

To set up in Visual Studio Code you can open Preferences / Settings / User Settings and add the json.schemas property.

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