{"id":19884222,"url":"https://github.com/90poe/vscode-cy-helper","last_synced_at":"2025-05-02T15:30:52.221Z","repository":{"id":36567751,"uuid":"203626323","full_name":"90poe/vscode-cy-helper","owner":"90poe","description":"VS Code IDE Extension for Cypress.io","archived":false,"fork":false,"pushed_at":"2022-02-12T14:32:29.000Z","size":65952,"stargazers_count":18,"open_issues_count":13,"forks_count":8,"subscribers_count":73,"default_branch":"master","last_synced_at":"2025-04-07T03:02:48.336Z","etag":null,"topics":["cucumberjs","cypress","vscode-extension","vscode-plugin"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=Shelex.vscode-cy-helper","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/90poe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-21T16:46:46.000Z","updated_at":"2024-09-17T14:33:59.000Z","dependencies_parsed_at":"2022-08-08T16:00:10.090Z","dependency_job_id":null,"html_url":"https://github.com/90poe/vscode-cy-helper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/90poe%2Fvscode-cy-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/90poe%2Fvscode-cy-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/90poe%2Fvscode-cy-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/90poe%2Fvscode-cy-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/90poe","download_url":"https://codeload.github.com/90poe/vscode-cy-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252062709,"owners_count":21688587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cucumberjs","cypress","vscode-extension","vscode-plugin"],"created_at":"2024-11-12T17:25:49.634Z","updated_at":"2025-05-02T15:30:47.204Z","avatar_url":"https://github.com/90poe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vscode-cy-helper\nCypress extension for vs code  \n\n[![Gitter](https://badges.gitter.im/vscode-cy-helper/community.svg)](https://gitter.im/vscode-cy-helper/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge) [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) ![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/Shelex.vscode-cy-helper?label=Installs)\n\n## Available functionality\n### Custom commands\n* [Go to definition](#1-open-cypress-custom-command-definition)\n* [References](#2-find-cypress-custom-commands-references)\n* [Find unused commands](#3-find-not-used-cypress-custom-commands)\n* [Generate type definitions file for custom commands](#4-generate-type-definitions-for-cypress-custom-commands)\n### Step definitions (cucumber)\n* [References](#5-find-cucumber-step-definition-references)\n* [Find unused steps](#6-find-not-used-cucumber-step-definitions)\n### Other\n* [Open cypress window](#7-open-cypress-window)\n* [Fixture path autocompletion](#8-fixtures-autocompletion)\n* [Fixture path go to definition](#9-fixtures-definition)\n* [Alias autocompletion](#10-alias-autocompletion)\n* [Alias go to definition](#11-alias-definition)\n* [Cucumber tags autocompletion](#12-cucumber-tag-autocompletion)\n* [Create default tsconfig file](#13-create-default-tsconfig-file)\n* [Keypress events snippets inside cy.type autocompletion](#14-keypress-events-snippets-inside-cy.type-autocompletion)\n* [jQuery locators autocompletion](#15-jquery-locators-autocompletion)\n\n\n## Configuration\n\n| setting                              | description                           | default           |    \n|:--------------------------------------|:---------------------------------------|:-------------------|        \n| `cypressHelper.commandForOpen`       | command used for opening cypress      | `npx cypress open`    |    \n| `cypressHelper.commandForRun`       | command used for running cypress      | `npx cypress run`    |    \n| `cypressHelper.customCommandsFolder` | path to folder with custom commands   | `cypress/support` |    \n| `cypressHelper.typeDefinitionFile` | file to save generated custom commands   | `cypress/support/customCommands.d.ts`|    \n| `cypressHelper.typeDefinitionExcludePatterns` | array of glob patterns that should be excluded from types generation  | [`**/*.ts`] |\n| `cypressHelper.includeAnnotationForCommands` | include comments before custom command to type definition file | false |    \n| `cypressHelper.typeDefinitionOnSave` | generate type definitions file for custom commands on save | false |    \n| `cypressHelper.menuItems` | display menu items or lenses for commands |  `{ `\u003cbr/\u003e`\"OpenCypress\": true,`\u003cbr/\u003e`\"RunCypress\": false,`\u003cbr/\u003e`\"GenerateCustomCommandTypes\": true,`\u003cbr/\u003e`\"GoToCustomCommand\": true,`\u003cbr/\u003e `\"FindCustomCommandReferences\": true,`\u003cbr/\u003e`\"FindStepDefinitionReferences\": true`\u003cbr/\u003e`}` |    \n| `cypressHelper.jqueryLocators` | configuration for jquery locators autocomplete |  `{ `\u003cbr/\u003e`\"enabled\": true,`\u003cbr/\u003e`\"commandsForAutocompletion\": [\"get\", \"find\", \"filter\"],`\u003cbr/\u003e`\"includePatterns\": [],`\u003cbr/\u003e`\"excludePatterns\": [],`\u003cbr/\u003e `\"customAttributes\": [],`\u003cbr/\u003e`}` |    \n| `cypressHelper.fixtureAutocompletionCommands` | cypress commands that accept fixture path as argument to add fixture path autocompletion | `[\"fixture\"]` |   \n| `cypressHelper.cucumberFixtureAutocompleteOnQuotes` | If you want fixture autocompletion in cucumber scenarios (using fixtures as parameters) you can enable it by setting `true` | false |   \n| `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 |   \n| `cypressHelper.cucumberTagsAutocomplete` | Set `enable: true` for cucumber feature autocomplete on `@`. Array of tags could be specified. Option to add [cypress-allure-plugin](https://www.npmjs.com/package/@shelex/cypress-allure-plugin) tags.  | `{`\u003cbr/\u003e`\"enable\": false,`\u003cbr/\u003e`\"tags\": [\"focus\"],`\u003cbr/\u003e`\"allurePlugin\": false`\u003cbr/\u003e`}` |   \n| `cypressHelper.reuseTerminalInstance` | By default executes `commandForOpen` in same terminal instance. To spawn new instance for each cypress opening set it to `false` | true | \n\n\n## Usage\n### 1. Open cypress custom command definition\nIn 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`  \nYou can use native `Go to Definition` and `Peek Definition` - but usually it offers several results, so you should pick one by yourself.  \nIf 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`  \nHow it works:  \n- Text from current line with cursor is taken, trying to find closest command call in line;\n- Checking files in `cypressHelper.customCommandsFolder` (`cypress/support` by default).\n- In case file with `Cypress.Commands.add(%%detected_command%%)` is found - redirect.\n\n![](./assets/goToCommand.gif)\n\n### 2. Find Cypress custom commands references\nFrom 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.  \nYou can disable editor `Cypress: Get custom command references` item with configuration `cypressHelper.menuItems` and `\"FindCustomCommandReferences\": false`.  \nIn 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`.  \n\n![](./assets/customCommandReference.gif)\n\n### 3. Find unused Cypress custom commands\nFrom command palette (⌘P) select `Cypress: Find not used custom commands`  \n\n![](./assets/findUnusedCustomCommands.gif)\n\n### 4. Generate type definitions for Cypress custom commands\nContext menu item `Cypress: Generate custom command types` or can also be configured to generate types on save, with `cypressHelper.typeDefinitionOnSave`  \nHow it works:\n- checks configuration `customCommandsFolder`, `typeDefinitionFile`, `typeDefinitionExcludePatterns`, `includeAnnotationForCommands`  \n- get files from `customCommandsFolder`, excepting `typeDefinitionExcludePatterns`  \n- in case custom command definitions found - trying to parse argument types, setting `any` by default  \n- get `typeDefinitionFile` content to check how much commands changed to display message\n- check for command names duplication (2 commands with same name will cause inappropriate behaviour)\n- 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](https://code.visualstudio.com/docs/languages/javascript#_jsdoc-support) format (`/**`), in other case only last comment is added.    \n- in case workspace has no `tsconfig.json` file, prompt to create it will be shown.\n- show message about duplicates, added and deleted commands.\n\n![](./assets/generateTypes.gif)\n\n### 5. Find Cucumber step definition references\nFrom 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.  \n\n![](./assets/stepDefinitionReference.gif)\n\n### 6. Find unused Cucumber step definitions\nFrom command palette select command `Cypress: Find not used Cucumber step definitions`  \n\n![](./assets/findUnusedStepDefinitions.gif)\n\n### 7. Open Cypress window\n* For opening Cypress with current file - click CodeLens \"Open Cypress\" (button above test). \nPlease note that it will execute command from `cypressHelper.commandForOpen` configuration.\n* 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.  \n* In case this functionality is not needed for your case, it could be disabled by setting configuration `cypressHelper.menuItems.OpenCypress` to `false`  \n#### How it works:   \n- get `cypressHelper.commandForOpen`;\n- open terminal with name `CypressOpen`;\n- send command `%%commandForOpen%% --config testFiles=%%spec%%` to terminal, where `%%spec%%` is opened test file path;  \n- after terminal `CypressOpen` is closed - deletes from opened test file all `@focus` or `.only` tags;  \n\n![](./assets/openCypress.gif)\n\n### 8. Fixtures autocompletion\nTyping `cy.fixture(` opens VS Code Completion interface with possible files and subfolders to select needed fixture file  \nTo add your own commands that require fixture autocomplete for arguments - check configuration `cypressHelper.fixtureAutocompletionCommands`  \nIf you are using cucumber and fixtures as parameters in your scenarios, you can enable autocomplete by setting `cypressHelper.cucumberFixtureAutocompleteOnQuotes: true`  \nThanks to [Josef Biehler](https://github.com/gabbersepp/cypress-fixture-intellisense) for original fixture autocomplete idea  \n  \n![](./assets/fixtureCompletion.gif)\n\n### 9. Fixtures definition\nGo to definition and Peek definition options for feature files.  \nWorks in cucumber feature files in scenario or examples table also.  \nCurrently default fixtures path `cypress/fixtures` supported only.  \n\n![](./assets/fixtureDefinition.gif)\n\n### 10. Alias autocompletion\n\nAutocompletion for aliases. Aliases will be selected from files in current folder.\n\n![](./assets/aliasCompletion.gif)\n\n### 11. Alias definition\n\nGo to definition and Peek definition options available for aliases.  \nAliases created in same folder files are supported only.  \n\n![](./assets/aliasDefinition.gif)\n\n### 12 Cucumber tags autocompletion\nTyping `@` in `.feature` file shows autocompletion with tags from configuration `cypressHelper.cucumberTagsAutocomplete.tags` - with `focus` by default. In case you have [cypress-allure-plugin](https://www.npmjs.com/package/@shelex/cypress-allure-plugin) just set `cypressHelper.cucumberTagsAutocomplete.allurePlugin` and list of allure tags will be available.\n\n![](./assets/cucumberCompletion.gif)\n\n\n### 13. Create default tsconfig file\nFrom command palette select command `Cypress: Create default tsconfig.json file`  \n\ntsconfig could also be created when `Cypress: Generate custom command types` is used. \n\n### 14. Keypress events snippets inside cy.type autocompletion\nInside cy.type string or template literal argument just type `{` which will trigger autocomplete for [keypress event sequences](https://docs.cypress.io/api/commands/type.html#Arguments)\n  \n![](./assets/cyTypeAutocomplete.gif)\n\n### 15. jQuery locators autocompletion\n - Configuration\n    * enabled - boolean, turn on\\off autocompletion, default `true`.\n    * commandsForAutocompletion - array[string], cypress commands that should have autocompletion inside string\\template literal arguments, default `[\"get\", \"find\", \"filter\"]`\n    * 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 `[]`\n    * 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 `[]`\n    * customAttributes - array[string], used to add your attributes to list of autocompletions, example:`[\"data-cy\", \"test-data\"]`  ,default `[]`\n\n - Usage\n    * type `[` - list with attributes\n    * type `:` - list of jquery pseudo locators\n    * type `=` - list of matching strategies for attribute values\n    * type space - list of relative strategies to query elements (children, direct children, siblings, adjacent)  \n  \n![](./assets/jqueryLocators.gif)\n## License\n\nCopyright 2019 90poe.  This project is licensed under the Apache 2.0 License.  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F90poe%2Fvscode-cy-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F90poe%2Fvscode-cy-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F90poe%2Fvscode-cy-helper/lists"}