vscode-cy-helper

Cypress extension for vs code

Available functionality

Custom commands

• Go to definition
• References
• Find unused commands
• Generate type definitions file for custom commands

Step definitions (cucumber)

• References
• Find unused steps

Other

• Open cypress window
• Fixture path autocompletion
• Fixture path go to definition
• Alias autocompletion
• Alias go to definition
• Cucumber tags autocompletion
• Create default tsconfig file
• Keypress events snippets inside cy.type autocompletion
• jQuery locators autocompletion

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.

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.

3. Find unused Cypress custom commands

From command palette (⌘P) select Cypress: Find not used custom commands

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.

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.

6. Find unused Cucumber step definitions

From command palette select command Cypress: Find not used Cucumber step definitions

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;

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

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.

10. Alias autocompletion

Autocompletion for aliases. Aliases will be selected from files in current folder.

11. Alias definition

Go to definition and Peek definition options available for aliases.
Aliases created in same folder files are supported only.

12 Cucumber tags autocompletion

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.

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

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)

License

Copyright 2019 90poe. This project is licensed under the Apache 2.0 License.