Lost intellisense for cypress in visual studio code

Question

I got a very strange problem.

I created a cypress project very basic and simple one, only examples test cases and did not have any other devDependencies only cypress.

when I first open this project in visual studio code, after mouse hovers to a method I can see a popup with some Signature help and right click the method chose to "go to definition" I able to open that file.

Strange things happened after I write a code "cy.", it supposes to give me intelligent code suggestions, but no any suggestions and mouse hover to any method the Signature help is disappeared and right click the method chose to "go to definition" I got "No definition found for 'XXX'"

I have asked many developers, but no one able to answer, please help, thank you!

Answer 1

Please check if your file has a triple-slash directive at the top of it, like

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

If it's the case, try to add a tsconfig.json inside your cypress folder. From cypress documentation a tsconfig.json with the following configuration should get intelligent code completion working.

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

Answer 2

I had the same behaviour you describe in your comment of Sep 23rd. I realised that it was caused by my custom cypress commands. Before chaining my custom commands I would get code completion, but not after.

To solve it, in cypress/support I added a an index.d.ts file with the following content:

declare namespace Cypress {
  interface Chainable<Subject> {
    /**
     * Log in via UI
     * @example
     * cy.login(username: string, password: string)
     */
    login(): Chainable<any>
    /**
     * Log in via API
     * @example
     * cy.apiLogin()
     */
    apiLogin(): Chainable<any>

    /**
     * Wait for viewer to load
     * @example
     *  cy.waitForFirstLoad()
     */
    waitForFirstLoad(): Chainable<any>

    /**
     * Log out
     * @example
     *  cy.logout()
     */
    logout(): Chainable<any>
  }
}

I also modified cypress/tsconfig.json as follows:

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

Hope it helps

Answer 3

You can override the Cypress config file to make the "Intelligent Code Completion" feature available throughout all the project.

To do it, go to projectName/cypress.json and add the following content:

{
    "$schema": "https://on.cypress.io/cypress.schema.json"
}

Reference: Cypress Documentation

Answer 4

After hours of pain-staking investigation, I've discovered that if you don't want to have to include the triple-slash directive at the top of every file then do this in your index.d.ts file:

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      /**
       * Should login
       * @param user
       * @example cy.login()
       */
      login(user?: string): Chainable<any>;
    }
  }
}

This is what fixed my VS Code IntelliSense so my custom commands would autocomplete and hovering over them would show the JSDocs.

Answer 5

Simply add the below code into your tsconfig.json file.

"types": [
      "cypress"
    ]

Answer 6

you should add the cypress.json file to your project and add these parameters

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

I had the same problem and this solution worked for me when I use windows.