Skip to main content

VS Code Extension

The Cycle Testing extension for Visual Studio Code is an alternative editor to the Cycle Desktop IDE. It enables testers to edit Cycle projects in Visual Studio Code (or "VS Code" for short), one of the most popular editors for programming. It targets Cycle users who seek a more developer-oriented editing environment.

The Cycle Testing extension provides standard editing features like syntax highlighting, step assistance, and automatic completions. It also includes a few advanced features like scenario navigation and basic code snippets that are not available in the Cycle Desktop IDE. However, as of Cycle 2.19, the extension only supports editing. It doees not include features for test execution and debugging.

Installing the Extension​

Prerequisites​

You must have the latest version of Cycle installed on your machine for the Cycle Testing extension to fully work. All features except basic syntax highlighting rely upon Cycle's tooling. Newer features may not work with older versions of Cycle as well.

You must also have the latest version of VS Code installed on your machine. You can download and install VS Code from the VS Code Download page.

Procedure​

The Cycle Testing extension is installed directly through VS Code. To install it, open VS Code, click the "Manage" icon at the bottom of the left sidebar, and select "Extensions".

Manage -> Extensions

The Extensions pane will appear on the left. Enter the name "Cycle Testing" in the search bar. The Cycle Testing extension should appear in the search results. Open it to see the information page. The extension should have the Cycle Labs logo, and the publisher's name should be "Cycle Labs".

Cycle Testing Extension

Install the extension by clicking the "Install" button. VS Code may need to be restarted after installing the extension.

Opening a Cycle Project​

To open a Cycle project from VS Code, go to the menu, select "File", and then select "Open Folder..."

File -> Open Folder

In the file selection popup, select the root folder of the Cycle project to open. Do not select the .cycproj file or any other individual files. VS Code opens a project based on the folder containing the project.

Viewing Feature Files​

Finding Files​

The Explorer pane on the left side of the editor shows all the files and folders in the project. It displays the Cycle logo for feature files.

Explorer Showing Feature Files

Opening Files​

Double-click on any file to open it. Open feature files have color-coded syntax highlighting similar to the scheme used by the Cycle Desktop IDE.

Feature File Syntax Highlighting

Viewing Outlines​

Once a file is open, the Explorer pane's "Outline" section shows an outline of the feature file. This outline makes it easier to see all the scenarios a feature file contains at a glance.

Explorer Outline

Editing Feature Files​

Viewing Step Assistant​

Every CycleScript step has helpful information about it through Step Assistant. Hover over the step to trigger a modal with the Step Assistant information.

Step Assistant

Automatically Completing Steps​

As you type steps, the editor will provide suggestions for how to complete the step's text. Select the desired option from the suggestions to use it in the feature file.

Step Automatic Completion

Identifying Syntax Errors​

The editor marks any syntax errors for incorrect CycleScript syntax or step texts with red underlines.

Syntax Error Identification

Toggling Comments​

Lines for CycleScript comment start with the # character. It is common to temporarily "comment out" steps or even whole scenarios while editing and debugging feature files. Rather than type the # character for every single line, you can highlight multiple lines and then type Ctrl+/ to add or remove the # character from them at once.

Togging Comments On

Using CycleScript Snippets​

Snippets are templatized blocks of code that you can insert into a file. They help you use proper syntax and structure. The Cycle Testing extension provides the following snippets:

  • if: for If statements
  • while: for While loops

To use a snippet, type the name of the snippet on a new line. Snippet options should then pop up in a modal. Select the desired snippet.

Selecting the snippet for "if" statements

The editor will insert the snippet's code directly into the feature file. Replace the highlighted sections with appropriate CycleScript code and steps.

The snippet template code for "if" statements

Please note that snippet names are case-sensitive. For example, you must select if and not If for the If statement's snippet.

In CycleScript, a scenario can call another scenario by using the I execute scenario "..." step, where "..." is the name of the scenario to call. To see the called scenario's code, hover over the step, and press and hold the Ctrl key. The scenario name will turn into a blue hyperlink. Click the name while holding the Ctrl key. VS Code will open the feature file containing the called scenario and navigate to the scenario's definition within it.