A powerful VS Code extension to easily manage, view, and organize Cypress tags right within your editor.
Features
Native Sidebar View & Webview: Manage tags using a lightweight native VS Code Sidebar tree, or pop open the rich, full-page Webview interface.
Hierarchical Tags: The explorer automatically infers tag relationships (if all tests for @smoke also have @e2e, @smoke is seamlessly nested under @e2e).
Tree vs Flat List: Effortlessly toggle between nested tag hierarchies and flat alphabetical lists in both the Sidebar and the Webview.
Advanced Filtering: Use the Webview's powerful filter bar to find tests fast — search by Tags, Filenames, or strings in your test titles (describe > context > it). Tag filtering supports a full boolean expression language with AND, OR, NOT keywords and parentheses for grouping.
AST Parsing: Automatically parses your Cypress files (describe, context, it blocks) to extract tags without executing any code.
Tag Inheritance: Accurately reflects Cypress tag inheritance. Tags applied to a describe block automatically cascade down to its it blocks.
Enum Resolution: Supports both plain string tags (e.g., '@smoke') and Enums (e.g., Priority.HIGH). It intelligently traces imports across your workspace to resolve the underlying string values of enums.
Organized Overview: Displays all discovered tags sorted alphabetically or hierarchically, along with test counts. Tests without tags are clearly grouped under [Untagged].
Click-to-Open: Click on any test in the tree or list to instantly jump to the corresponding line in your editor, making it effortless to add or reassign tags.
Inline Renaming: Rename tags across your entire workspace directly from the UI. The extension safely updates your code using native VS Code WorkspaceEdit features, preserving your formatting.
Usage
Sidebar View: Click the Tag Icon in the VS Code Activity Bar (left sidebar) to view your parsed tags natively.
Webview: Click the "Open Webview" icon in the Sidebar's title menu, or search for and execute the "Cypress Tags Explorer: Open Webview" command from the Command Palette (Cmd+Shift+P / Ctrl+Shift+P).
Tag Filter Syntax
The filter bar in the Webview supports a full boolean expression language when searching by Tags. Filename and test-title filters always use a simple substring match.
Operators
Operator
Keyword
Legacy shorthand
Meaning
AND
AND
+ between tags
Both tags must be present
OR
OR
space between tags
Either tag must be present
NOT
NOT
- prefix on a tag
Tag must not be present
Group
()
—
Evaluate sub-expression first
Operator precedence (high → low): NOT → AND → OR
Examples
# Single tag
@smoke
# OR – either tag (keyword)
@smoke OR @critical
# OR – either tag (legacy: space-separated)
@smoke @critical
# AND – both tags required (keyword)
@smoke AND @critical
# AND – both tags required (legacy: + separated)
@smoke+@critical
# NOT – exclude a tag (keyword)
NOT @slow
# NOT – exclude a tag (legacy: - prefix)
-@slow
# AND + NOT – tagged smoke but not slow (keyword)
@smoke AND NOT @slow
# AND + NOT – tagged smoke but not slow (legacy)
@smoke+-@slow
# Complex grouped expression
(@smoke OR @critical) AND NOT @slow
# Multiple OR-groups, one of which is an AND
@regression (@smoke AND @critical)
Matching is case-insensitive and uses substring comparison, so smoke matches @smoke.
Setup & Configuration
By default, the extension scans the cypress/e2e folder for *.cy.ts and *.cy.js files.
You can customize this behavior in your VS Code settings.json:
