vscode-cy-helper
Cypress extension for vs code
![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/Shelex.vscode-cy-helper?label=Installs)
Available functionality
Custom commands
Step definitions (cucumber)
Other
Configuration
setting |
description |
default |
cypressHelper.commandForOpen |
command used for opening cypress |
npx cypress open |
cypressHelper.commandForRun |
command used for running cypress |
npx cypress run |
cypressHelper.customCommandsFolder |
path to folder with custom commands |
cypress/support |
cypressHelper.typeDefinitionFile |
file to save generated custom commands |
cypress/support/customCommands.d.ts |
cypressHelper.typeDefinitionExcludePatterns |
array of glob patterns that should be excluded from types generation |
[**/*.ts ] |
cypressHelper.includeAnnotationForCommands |
include comments before custom command to type definition file |
false |
cypressHelper.typeDefinitionOnSave |
generate type definitions file for custom commands on save |
false |
cypressHelper.menuItems |
display menu items or lenses for commands |
{
"OpenCypress": true,
"RunCypress": false,
"GenerateCustomCommandTypes": true,
"GoToCustomCommand": true, "FindCustomCommandReferences": true,
"FindStepDefinitionReferences": true
} |
cypressHelper.jqueryLocators |
configuration for jquery locators autocomplete |
{
"enabled": true,
"commandsForAutocompletion": ["get", "find", "filter"],
"includePatterns": [],
"excludePatterns": [], "customAttributes": [],
} |
cypressHelper.fixtureAutocompletionCommands |
cypress commands that accept fixture path as argument to add fixture path autocompletion |
["fixture"] |
cypressHelper.cucumberFixtureAutocompleteOnQuotes |
If you want fixture autocompletion in cucumber scenarios (using fixtures as parameters) you can enable it by setting true |
false |
cypressHelper.enableCommandReferenceProvider |
In case you have type definitions, native Find all References will return duplicates for commands. To avoid it set this parameter to false |
true |
cypressHelper.cucumberTagsAutocomplete |
Set enable: true for cucumber feature autocomplete on @ . Array of tags could be specified. Option to add cypress-allure-plugin tags. |
{
"enable": false,
"tags": ["focus"],
"allurePlugin": false
} |
cypressHelper.reuseTerminalInstance |
By default executes commandForOpen in same terminal instance. To spawn new instance for each cypress opening set it to false |
true |
Usage
1. Open cypress custom command definition
In case you want to be instantly redirected to definition file - click on custom command, and from editor menu select Cypress: Go to custom command definition
You can use native Go to Definition
and Peek Definition
- but usually it offers several results, so you should pick one by yourself.
If you are using just native editor menu items - you can disable Cypress: Go to custom command definition
in configuration cypressHelper.menuItems
by setting "GoToCustomCommand": false
How it works:
- Text from current line with cursor is taken, trying to find closest command call in line;
- Checking files in
cypressHelper.customCommandsFolder
(cypress/support
by default).
- In case file with
Cypress.Commands.add(%%detected_command%%)
is found - redirect.
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/goToCommand.gif)
2. Find Cypress custom commands references
From editor menu select Cypress: Get custom command references
to choose from quick-pick menu or you can use native Find All References
and Peek References
to use left-panel tab.
You can disable editor Cypress: Get custom command references
item with configuration cypressHelper.menuItems
and "FindCustomCommandReferences": false
.
In case you have custom command .ts
definition file in your workspace - native methods will return duplicated results, so you can turn off extension references provider with configuration cypressHelper.enableCommandReferenceProvider: false
.
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/customCommandReference.gif)
3. Find unused Cypress custom commands
From command palette (⌘P) select Cypress: Find not used custom commands
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/findUnusedCustomCommands.gif)
4. Generate type definitions for Cypress custom commands
Context menu item Cypress: Generate custom command types
or can also be configured to generate types on save, with cypressHelper.typeDefinitionOnSave
How it works:
- checks configuration
customCommandsFolder
, typeDefinitionFile
, typeDefinitionExcludePatterns
, includeAnnotationForCommands
- get files from
customCommandsFolder
, excepting typeDefinitionExcludePatterns
- in case custom command definitions found - trying to parse argument types, setting
any
by default
- get
typeDefinitionFile
content to check how much commands changed to display message
- check for command names duplication (2 commands with same name will cause inappropriate behaviour)
- write file with type definitions for commands to
typeDefinitionFile
, in case includeAnnotationForCommands: true
also includes comment above commands. Please note that comment should be in JSDoc format (/**
), in other case only last comment is added.
- in case workspace has no
tsconfig.json
file, prompt to create it will be shown.
- show message about duplicates, added and deleted commands.
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/generateTypes.gif)
5. Find Cucumber step definition references
From menu select Cypress: Get step definition references
to choose from quick-pick menu or you can use native Find All References
and Peek References
to use left-panel tab.
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/stepDefinitionReference.gif)
6. Find unused Cucumber step definitions
From command palette select command Cypress: Find not used Cucumber step definitions
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/findUnusedStepDefinitions.gif)
7. Open Cypress window
- For opening Cypress with current file - click CodeLens "Open Cypress" (button above test).
Please note that it will execute command from
cypressHelper.commandForOpen
configuration.
- For marking some tests with
only
/@focus
tag, or removing - click corresponding CodeLens. Also, you can just close terminal CypressOpen
to remove all only
tags from your file.
- In case this functionality is not needed for your case, it could be disabled by setting configuration
cypressHelper.menuItems.OpenCypress
to false
How it works:
- get
cypressHelper.commandForOpen
;
- open terminal with name
CypressOpen
;
- send command
%%commandForOpen%% --config testFiles=%%spec%%
to terminal, where %%spec%%
is opened test file path;
- after terminal
CypressOpen
is closed - deletes from opened test file all @focus
or .only
tags;
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/openCypress.gif)
8. Fixtures autocompletion
Typing cy.fixture(
opens VS Code Completion interface with possible files and subfolders to select needed fixture file
To add your own commands that require fixture autocomplete for arguments - check configuration cypressHelper.fixtureAutocompletionCommands
If you are using cucumber and fixtures as parameters in your scenarios, you can enable autocomplete by setting cypressHelper.cucumberFixtureAutocompleteOnQuotes: true
Thanks to Josef Biehler for original fixture autocomplete idea
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/fixtureCompletion.gif)
9. Fixtures definition
Go to definition and Peek definition options for feature files.
Works in cucumber feature files in scenario or examples table also.
Currently default fixtures path cypress/fixtures
supported only.
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/fixtureDefinition.gif)
10. Alias autocompletion
Autocompletion for aliases. Aliases will be selected from files in current folder.
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/aliasCompletion.gif)
11. Alias definition
Go to definition and Peek definition options available for aliases.
Aliases created in same folder files are supported only.
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/aliasDefinition.gif)
Typing @
in .feature
file shows autocompletion with tags from configuration cypressHelper.cucumberTagsAutocomplete.tags
- with focus
by default. In case you have cypress-allure-plugin just set cypressHelper.cucumberTagsAutocomplete.allurePlugin
and list of allure tags will be available.
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/cucumberCompletion.gif)
13. Create default tsconfig file
From command palette select command Cypress: Create default tsconfig.json file
tsconfig could also be created when Cypress: Generate custom command types
is used.
14. Keypress events snippets inside cy.type autocompletion
Inside cy.type string or template literal argument just type {
which will trigger autocomplete for keypress event sequences
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/cyTypeAutocomplete.gif)
15. jQuery locators autocompletion
Configuration
- enabled - boolean, turn on\off autocompletion, default
true
.
- commandsForAutocompletion - array[string], cypress commands that should have autocompletion inside string\template literal arguments, default
["get", "find", "filter"]
- includePatterns - array[string], glob patterns for folders where files should have autocompletion inside string\template literal, could be used inside page objects \ locator objects \ file with locator constants, example:
["**/support/locators/**"]
,default []
- excludePatterns - array[string], glob patterns for folders that should be excluded from having autocompletion inside string\template literal, could be used to narrow down or specify folder matching criteris , example:
["**/support/locators/handler/**"]
,default []
- customAttributes - array[string], used to add your attributes to list of autocompletions, example:
["data-cy", "test-data"]
,default []
Usage
- type
[
- list with attributes
- type
:
- list of jquery pseudo locators
- type
=
- list of matching strategies for attribute values
- type space - list of relative strategies to query elements (children, direct children, siblings, adjacent)
![](https://github.com/90poe/vscode-cy-helper/raw/master/./assets/jqueryLocators.gif)
License
Copyright 2019 90poe. This project is licensed under the Apache 2.0 License.