Robot Framework Snippets for VS Code

3 min readMay 23, 2019

This is my first Visual Studio Code extension to unfold the snippet of Robot Framework keywords.

Mainly inspired the concept from vscode-angular-snippets to unfold keyword snippets which make developer life easier and implementing the clean code.

Your First Extension teaches the fundamental concepts of building extensions for Visual Studio Code

Robot Framework is a generic test automation framework for acceptance testing and acceptance test-driven development. It is a keyword-driven testing framework that uses tabular test data syntax.

I took the use case of SeleniumLibrary keywords to add it to the Visual Studio Code extension. Around ~130 keywords are there in SeleniumLibrary. SeleniumLibrary is a web testing library for Robot Framework uses the Selenium WebDriver modules internally to control a web browser.

Keyword
  Click Button
Arguments
  locator, modifier=False
Documentation
  Clicks button identified by locator.

Robot Framework Test case

** Settings ***
Documentation
Library        Selenium2Library
*** Variables ***
*** Keywords ***
Submit Credentials
    Click Button    login_button

The above test case contains sections like documentation, library, variables, keywords — I just thought why don’t we unfold this complete steps by single snippet and press “enter”

The next thought about adding the keywords to snippets to unfolds on typing part of a snippet, press enter.

This is the point I had started learning about the Visual Studio Code Extension and API supports.

The snippets are stored in a JSON file

"Add Cookie": {
  "prefix": "Add Cookie",
  "description": "Adds a cookie to your current session.",
  "body": ["Add Cookie  ${1:name}  ${2:value}"]  
},

When the user types the keyword, it will search automatically the relevant keywords matches “prefix” and display it with tooltip “description”. User can press “enter” so it will unfold the (“body”)complete keyword syntax.

Add Cookie name value

The above name and value will be highlighted by default so that the user can fill their inputs based on requirements or remove the unwanted words.

// this method is called when your extension is activated
// your extension is activated the very first time the command is executedexport  async function activate(context: vscode.ExtensionContext): Promise<void> {  
       context.subscriptions.push(  vscode.commands.registerCommand('robot.configureExpressServer', configure) );
}

package.json Extension Manifest

"activationEvents": [  "onCommand:robot.configureExpressServer" "contributes": {  
"commands": [ {
         "command": "robot.configureExpressServer",
         "title": "Add Node.js express file to workspace",                                                          "description": "Add Node.js express file",
         "category": "Express"   
}  ],  
"jsonValidation": [{ 
        "fileMatch": "manifest.json",
        "url": "http://json.schemastore.org/web-manifest" 
}  ],  
"snippets": [{ 
       "language": "robot",
        "path": "./snippets/keywords.json"   }  ] 
},

This activation event is emitted and interested extensions will be activated whenever a command is being invoked.

Commands trigger actions in Visual Studio Code. Commands are also used by extensions to expose functionality to users, bind to actions in VS Code’s UI, and implement internal logic.

robotframework-snippets

Robot Framework Snippets for VS Code

Written by Selvakumar Subramanian