Cypress Intelligent Code Completion using IntelliSense

IntelliSense is a code completion technique that provides suggestions directly in your IDE while writing Cypress tests. It includes several features:

1. Autocomplete Commands
2. Autocomplete Assertions
3. Signature help (give information about command on hovering)

There are several ways you can enable IntelliSense feature for your Cypress test:

Method 1: Triple slash directives

This is the simplest way where you just need to add the below line at top of your javascript or typescript spec file:

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

If your custom commands cypress/support/commands.js and you describe them in cypress/support/index.d.ts use:

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

// type definitions for custom commands like "createDefaultTodos"
/// <reference types="../support" />

Method 2: Reference type declarations via jsconfig

With this technique, you don't have to type the above lines in each spec file. Instead, you can add the below code to the jsconfig.json file in the project root directory:

{

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

}

Here we have specified the cypress module and path to test folders.

Method 3: Reference type declarations via tsconfig

The tsconfig. json file allows you to specify the root level files and the compiler options that require compiling a TypeScript project. You add your tsconfig file to Cypress or root folder and add the below code.

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