Cypress Helper installs statistics

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…

Description from the VS Code Marketplace listing.