VS Code Extension

The RocketQA VS Code Extension transforms your development experience by providing intelligent support for writing, editing, and managing your E2E tests directly within VS Code. Perfect for manual QA engineers, automation engineers, and developers who want to streamline their testing workflow.

Why Use the VS Code Extension?

While you can write RocketQA tests in any text editor, the VS Code extension provides powerful features that dramatically improve your productivity:

🎯 Smart Autocompletion

• Type $ to get instant suggestions for page elements from your locators.yml
• Type { to reference existing scenarios for reusable test steps
• Intelligent suggestions based on your project’s locator definitions

🔍 Real-time Validation

• Catch syntax errors as you type
• Validate locator references before running tests
• Highlight missing or incorrect references

🧭 Go-to-Definition

• Ctrl+Click on {scenario names} to jump to their definitions
• Navigate between feature files and locator definitions seamlessly
• Quick access to referenced scenarios and page elements

📝 Enhanced Syntax Highlighting

• Beautiful, readable .feature files with proper syntax coloring
• Clear visual distinction between Given/When/Then steps
• Highlighted locator references and scenario calls

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for “RocketQA”
4. Click Install on the extension by ENTech Solutions

From Command Line

code --install-extension ENTechSolutions.RocketQA

Quick Install Link

Open VS Code Quick Open (Ctrl+P), paste the following command, and press enter:

ext install ENTechSolutions.RocketQA

Create a .feature file and experience the intelligent autocompletion:

Feature: User Authentication

  Scenario: Successful Login
    When navigate to "/login"
    And type "admin" into $loginPage.username
    And type "password123" into $loginPage.password
    And click $loginPage.submitButton
    Then $dashboard.welcomeMessage is visible

Key Features in Action

Smart Element Suggestions

When you type $ in a feature file, the extension automatically suggests available page elements:

# Type: $login
# Suggestions appear:
# - $loginPage.username
# - $loginPage.password
# - $loginPage.submitButton

Scenario Reuse

Reference existing scenarios by typing {:

shared.feature

Scenario: Login as Admin
  When navigate to "/login"
  And type "admin" into $loginPage.username
  And click $loginPage.submitButton

# blog.feature
Scenario: Create New Blog Post
  When run scenario {Login as Admin}  # ← Smart completion available!
  And click $navbar.blog

Navigation Support

• Ctrl+Click on {Login as Admin} jumps directly to the scenario definition
• Ctrl+Click on $loginPage.username shows you the locator in locators.yml

Advanced Usage

Organized Locator Structure

The extension supports complex nested locator structures:

pages:
  login:
    form:
      username: "#user"
      password: "#pass"
    buttons:
      submit: ".btn-login"
      forgot: ".forgot-link"

components:
  header:
    navigation:
      home: ".nav-home"
      about: ".nav-about"

Access these with: $pages.login.form.username or $components.header.navigation.home

Multi-File Projects

The extension provides intelligent suggestions across multiple feature files:

features/
├── auth/
│   ├── login.feature
│   └── registration.feature
├── blog/
│   ├── create-post.feature
│   └── edit-post.feature
└── shared/
    └── common-actions.feature

Debugging Support

Access debugging information via Command Palette:

• Ctrl+Shift+P → “Show Gherkin Locators Logs”
• View extension logs for troubleshooting
• Validate your locators.yml syntax

Troubleshooting

Autocompletion Not Working?

1. Check locators.yml exists in your project root
2. Validate YAML syntax - invalid YAML breaks suggestions
3. Restart VS Code if suggestions stop appearing
4. Check file associations - ensure .feature files are recognized

Error Highlighting Issues?

• Make sure your feature files follow proper Gherkin syntax
• Verify locator references match exactly what’s in locators.yml
• Check the extension logs via Command Palette

Performance with Large Projects

• The extension is optimized for projects with hundreds of scenarios
• If experiencing slowness, ensure locators.yml isn’t overly complex
• Consider breaking large locator files into logical sections

---

💡 Pro Tip: The VS Code extension is actively developed. Check the VS Code Marketplace for the latest features and updates!