[Question] How to enable custom commands autocompletion ?

[tianalemesle]

I have multiple Cypress.Commands.add calls from cypress/support/commands.js, how do I enable autocompletion for those ?

The Add type for cypress custom command intention is enabled but I can't find a way to trigger it.

Thanks

[mbolotov]

Hi @tianalemesle!

The most preferred way to get autocompletion is to use TypeScript definitions for the commands.
I think the intention you mentioned is not working for you because by default it try to generate the definitions in the same file where the command itself is placed.
But as you have a 'js' file for you command, it fails to do this. It should be a 'ts' one.
I think the plugin UI should be improved for such a case.
Currently, you have 2 options to set the definition file path.

1. If you run IDEA, you can access this setting in the cypress facet page.
   

2. If you any other IntelliJ IDE (like WebStorm), it probably has no 'module' notion at all and thus no facet either. But you can still define the file path using 'Extract cypress command' action:
   
   
   You have to just select the file name and click 'Cancel' - it will save the default value even if no extract action is performed.

I will probably rework the UI to make it easier to select the definition file.

[tianalemesle]

I see, however, I'm not using TypeScript at all...

[mbolotov]

You probably do not need to add any support for TypeScript into your project.
It's for IDE only, just try to add this single ts file.

[mbolotov]

Hi @tianalemesle!
Have had a chance to try adding the definition file?

BTW, I just realized that the current version of the plugin should suggest autocompletion for a command without a type definition. But this is for code inside a java script file only (not a ts one).
I tried on this project: https://github.com/rightsaidjames/cypress-starter-kit.git
And it worked okay:

[tianalemesle]

If that TypeScript file needs to be located in the project directory, then I won't.

Yes, I realized autocompletion actually works.

However, I still get the Method expression is not of Function type warning.

[mbolotov]

Method expression is not of Function type

I'll look if this could be fixed.
But I doubt as IDE does not really know your command unless it is defined in a TS file.

[tianalemesle]

How can the command be autocompleted but not highlighted ?

[mbolotov]

What do you mean by 'not highlighted'?
IntelliJ API allows to add custom completion contributor, reference resolver and other extensions.
The problem is that there is a default JS code analyzer that has no knowledge about custom commands and thus it warns about 'unexpected' method calls. I'm not sure if the plugin could somehow change this default behavior.

[tianalemesle]

Here I have a route named foo-loaded and a command named any.

Both are autocompleted and both have the Ctrl+B (Go to declaration) shortcut working.
I would think this means the analyzer actually knows the definition of both.
Yet, the route is highlighted while the command is not.

[mbolotov]

Aliases and custom methods are not the same things and are handled differentially.
Alias handling is fully implemented on the plugin side. From the core IDE perspective, it's just a string literal.
On the contrary, a custom command is not a literal and IDE expect it to be a valid JS method call.
This is why it's complaining about a custom method and not about an alias.

[tianalemesle]

But, if I press Ctrl+B on any(), it leads me to the Cypress.Commands.add declaration, how can it do that and yet display as it was unrecognized ?

[mbolotov]

It's just because the plugin adds a reference to the declaration.
But it's not enough for the default JS analyzer. It expects that a method call go to a valid JS declaration. But custom command is just a string literal, not a JS declaration.
I think this issue could probably done in the same way as it is for aliases (by injecting plugin own parser and PSI structure inside the string literal).

That being said, it requires a lot of work and I'm not sure if this feature is in demand enough.

[mbolotov]

BTW, can you explain why it's not possible to add a single TS file inside your project?

[tianalemesle]

Because I'm the only one among my coworkers who uses your plugin and will subscribe.

[mbolotov]

There are should be really a lot of coworkers to fund this feature development.
Anyway, I still don't understand the problem of having a TS file in your project. If you can explain it to me, it could probably change my mind in the terms of demand estimation.

[tianalemesle]

I don't think it will, the reason is, we're collaborating on a project, which uses Cypress for tests, and I can't throw a file on the repo that is useless to everyone but me.

[mbolotov]

This file structures your tests and makes them more robust and clean. So I would say that this file is useful for anyone who look into the tests.

[aronmgv]

None of this worked for me to get syntax highlighting.. neither custom commands recognition. I am evaluating the pro version at the moment.

Support folder looks like this:

Also tried to rename commands.js to commands.ts - didnt help. Did that for index.js also noting..

Tried also installing cypress-intellij-reporter but not sure what it is for..

[mbolotov]

None of this worked for me to get syntax highlighting.. neither custom commands recognition.

There are may be many reasons for that.
Could you provide a sample project to reproduce the problem?
Also, you could try to remove/comment out the login method that is navigated to. And see if IDE will find the correct login one.

[aronmgv]

Okay - seems the problem was with the Cypress being installed globally.. in our project it needs to be done like that due to CD/CI to avoid constantly downloading it every time there is a run..

1. so I did npm install cypress --no-save but it still does not recognize the framework
2. when installed it into dev-dependencies it started finally to work npm install cypress --D

However now I am getting the command suggestion from the commands.js but still am missing then to be highlighted:

So my questions are:

1. is there a way to reference global cypress dependency to avoid having it installed locally?
2. fix the custom commands to be highlighted (not white and underscored like in pic)

Thanks

[mbolotov]

1. IDE does not index the global libraries, see this issue. It seems you created it =). As suggested in this ticket, I tried to create and attach a global variable and found it working.
2. This is a known limitation of the plugin (see the discussion above). So this functionality is in backlog but I've not yet decided when to implement it. You can add typescript definitions for your custom commands to make the IDE aware of them.

[aronmgv]

1. LOL, true.. completely forgot about it and never checked.
2. Okk, thanks.

[rnovosad]

Hi @mbolotov came here from youtube :)
I have a default simple cypress js framework with index.d.ts typings for code completion. But after installing a plugin - code completion works only partially. When I go to definition from spec file, WebStorm leads me to the custom command in the support file and from there to index.d.ts. From there - I can't find usages of the custom command - but GoTo leads only for the custom command.
I have tried to reproduce the issue on this small project - https://github.com/cypress-io/cypress-example-todomvc.git and it has completely the same issue as mine.
Please have a look

[mbolotov]

Hi @rnovosad!
Okay, I've reproduced the problem using the sample project you provided.
I will investigate the problem in details later (it's strange that I can't reproduce it in my own sample project). Meanwhile, you can try to disable the js custom commands resolve option:

I got cypress-example-todomvc working okay when this option is disabled.
Actually, I plan to disable it by default in the next release as it is a kind of outdated one.

[rnovosad]

@mbolotov thanks for looking. can you please explain how can I get to this menu option to disable a tick?

[mbolotov]

Oh, sorry, I just forgot to mention it.
This is the Regsitry tool.
You can call it via Find Action dialog:

[rnovosad]

thanks @mbolotov it worked! still would be great to have it fixed in your implementation with fancy autocomplete options from cypress =)

[mbolotov]

to have it fixed in your implementation

Hmm, seems I didn't get this point. Do you mean some functionality is not working after you disabled the option?

[rnovosad]

So this is how the autocomplete works without custom commands resolution option


And here is with (but with broken typing highlight):

I'd say it's much cooler with your approach just would be great to have types as all other commands have and to fix the issue with type resolution!

[mbolotov]

Well, I'm not sure it's nice to have the same command duplicated in the suggestion list both as a type definition and as an implementation.
Why do you need it?

[rnovosad]

I don't need it duplicated, but nice to have those nifty Cy icon at the method call

[mbolotov]

Okay, I'll take a look at this, but I'm not sure if this is possible.