Lemonce Interface

After the configuration, you will see the UI of Lemonce is divided into four areas a as below. Like code editors, Lemonce adopts a common user interface and layout of an explorer on the left, showing all of the files and folders you have access to, and an editor on the right, showing the content of the files you have opened.

Lemonce on Windows

Lemonce on Mac


1 Menu bar

Located on the top including File,Edit,View and Help.

1.1 File

  • New Create a new case or suite.
  • Open Open a existed case.
  • Open Workspace/Folder Open a folder as workspace.
  • Close Workspace Close the current workspace.
  • Restart Restart Lemonce.
  • Exit Exit Lemonce.

1.2 Edit

  • Undo / Redo /
  • Cut / Copy / Paste //
  • Delete
  • Select All

1.3 View

  • Command Palette Open a command palette at the top of editor area.
  • Toggle Dev Tool
  • Zoom in/out /
  • Reset Zoom
  • Toggle Fullscreen
  • Toggle Side Bar Show or hide side bar.
  • Debug Console Open/Close the Panel.

1.4 Help

  • Learn More
  • License About the license.


2 View bar && Side bar

View bar is located on the far left-hand side including three buttons to switch the view of Side bar, which can assist you while working on your project.

2.1 Explore

The Explorer is used to browse, open, and manage all of the files and folders in your project.

I. OPEN EDITORS

At the top of the Explorer is a section labeled OPEN EDITORS . This is a list of active files or previews. These are files you previously opened in Lemonce that you’re working on. For example, a file will be listed in the OPEN EDITORS section if you:

  • Make a change to a file.
  • Double-click a file’s header.
  • Double-click a file in the Explorer.
  • Open a file that is not part of the current folder.

Just click an item in the OPEN EDITORS section, and it becomes active in Lemonce.

Once you are done with your task, you can remove but not delete files seperately from the OPEN EDITORS section by click .

II. Buttons of editor groups

There are three buttons to active different corresponding areas of editor groups, you can find more detailed information below.

  • Toggle Case Panel

  • Toggle Suite Panel

  • Open Webview

III. WORKSPACE

You can click the button under the label NO WORKSPCACE to open a folder as workspace at the first time.

After opening a folder in Lemonce, the contents of the folder are shown in the Explorer. You can do many things by right-click from here:

  • Create, delete, and rename files and folders.
  • Open the existed cases/folders in file explorer.
  • Move files and folders with drag and drop.
  • Use the context menu to explore all options.


2.2 Config Panel

There are just two functions below in side bar now,more functions are coming soon.

  • Change the language to English/Chinese
  • Open/Close Cmd(command pallete)
  • Open/Close Output


2.3 View Reports

Reports are listed in side bar chronologically.Click one of them you will see more details in popup of reports.


3 Editor Groups

The main area to edit your files. You can open as many as editors you want and you can also open Webview at one side while editing. More details are offered in Code Editor.


4 Output && Console panel

You can display different panels below the editor region for output or debug information or errors and warnings.

  • Two buttons on the top are used for switching between “Output” and “Console” panels
  • Click on the right to close current panel.You can reopen the panel from “Edit” submenu in menu bar.
  • Click to clear the current panel.


4.1 Output panel

Take “logout” case as an example in the video, the following contents will be generated in the output panel.

 [18:57:32.488] Testing Start.
 [18:57:32.551] Line:4 Jump to 'https://www.npmjs.com/~lemoncase'.
 [18:57:32.561] Line:5 Wait 2333 ms.
 [18:57:35.585] Line:7 click '#user-info-drop-down-menu-toggle > svg:nth-child(4) > path:nth-child(1)'.
 [18:57:36.234] Line:9 click '#user-info-menu > div:nth-child(1) > ul:nth-child(1) > li:nth-child(5) > form:nth-child(1) > button:nth-child(2)'.
 [18:57:36.242] Line:11 Wait 2000 ms.
 [18:57:38.235] End of execution

Output information can be divided into the following sections:

  • Testing Start && End of execution (hightlighted blue to interval test cases)
  • System time (show in the brackets)
  • The line number of the executing codes
  • Details of the running test cases


4.2 Console panel

You can try to use Lemoncase2 to finish some commands here.