Cypress: Intelligent Code Completion to show Custom Commands

[kapalkat]

Current behavior:

Intelligent Code Completion feature doesn't show results for Custom Commands.
When you create a lot of them it is really hard to find the name in the file. When you work in cooperation with many team members and few of them are adding custom commands you don't even know what has been added.

The one more really annoying thing is that you can't jump to custom command declaration from your test file like for any other imported function or class.
This one together with the above problem makes Custom Commands almost impossible to maintain!

Desired behavior:

Intelligent Code Completion should work with custom commands.

Versions

Cypress 3.0.3

[jennifer-shehane]

Our intelligent code completion works by using our typescript definitions. I'm not sure how familiar you are with TypeScript, but you can extend those definitions within your custom commands to define the expectations you need like is done in @d3lm project: https://github.com/d3lm/ngx-drag-to-select/blob/master/cypress/support/commands.ts#L105-L114

[kapalkat]

Hey, thanks for the response.
I am not really familiar with ts...yet.
So it means I would need to convert all my .js custom commands to .ts then include webpack package (or similar tool) into the project to convert it back to .js right?

---

From: Jennifer Shehane [e-mail]
Sent: Wednesday, August 8, 2018 20:00
To: cypress-io/cypress
Cc: kapalkat; Author
Subject: Re: [cypress-io/cypress] Intelligent Code Completion to show Custom Commands (#2293)

Our intelligent code completion works by using our typescript definitions. I'm not sure how familiar you are with TypeScript, but you can extend those definitions within your custom commands to define the expectations you need like is done in @d3lmhttps://github.com/d3lm project: https://github.com/d3lm/ngx-drag-to-select/blob/master/cypress/support/commands.ts#L105-L114

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/cypress-io/cypress/issues/2293#issuecomment-411497274, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AZfK0oMJGSyHbny6g7UTxQLDkq8sRpWOks5uOycwgaJpZM4VxyoT.

[d3lm]

Yep, you would then write your tests with TS instead of JavaScript. An easy solution is to use https://github.com/bahmutov/add-typescript-to-cypress. All you have to do is to install this via npm or yarn and create a tsconfig.json inside your cypress folder. For reference check out this config https://github.com/d3lm/ngx-drag-to-select/blob/master/cypress/tsconfig.json. You also need to install typescript via npm or yarn.

Also make sure to check the documentation https://docs.cypress.io/guides/tooling/typescript-support.html

[kapalkat]

OK, thanks for the information.
That's too much hassle for me as I already have over 200 test specs in javascript.
It would be faster for me to change it to standalone pure javascript functions and put it to some other utility.js file.
Thanks anyway!
BTW: You could provide this information in your docs in the future to avoid this kind of surprises:)

---

From: Dominic E. [e-mail]
Sent: Friday, August 10, 2018 11:48
To: cypress-io/cypress
Cc: kapalkat; Author
Subject: Re: [cypress-io/cypress] Intelligent Code Completion to show Custom Commands (#2293)

Yep, you would then write your tests with TS instead of JavaScript. An easy solution is to use https://github.com/bahmutov/add-typescript-to-cypress. All you have to do is to install this via npm or yarn and create a tsconfig.json inside your cypress folder. For reference check out this config https://github.com/d3lm/ngx-drag-to-select/blob/master/cypress/tsconfig.json. You also need to install typescript via npm or yarn.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/cypress-io/cypress/issues/2293#issuecomment-412034813, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AZfK0oOuQwHXl5Jr_aOmG24Jnc5mbqtiks5uPVb0gaJpZM4VxyoT.

[jennifer-shehane]

I created a new issue in our docs to document adding custom command support to intelligent code completion here: https://github.com/cypress-io/cypress-documentation/issues/1354. Our documentation is open source and contributions are welcome. 😄

[dwilches]

There is no need to transform your specs to TypeScript, nor installing any 3rd party library. All you need to do is:

1. Create a file index.d.ts in your cypress/support/ folder
2. Use the triple-slash to import this file in your specs, like the second line here:

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

1. In the index.d.ts file, add the types definition of your custom commands, for example:

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

declare namespace Cypress {
    interface Chainable {
        myCustomCommandA(selector: string, option: string): Cypress.Chainable<JQuery>;
        myCustomCommandB(param: string, value: any): Cypress.Chainable<JQuery>;
    }
}

This process is documented in this page of the documentation.

[lsdkjflasjflkdasj]

The typescript definition file seems completely unuseable and unscalable. This file will get massive and it's just a forward declarations/headers file. The last time I had to forward declare my function definitions was in C++.

[lsdkjflasjflkdasj]

I think this ticket should be reopened because the current solution is infeasible.

[jennifer-shehane]

@lsdkjflasjflkdasj Please follow this issue for fully integrated TypeScript support. https://github.com/cypress-io/cypress/issues/1859 This is the solution we have for today.