在配置完成工作空间以后,灵萌测客户端的界面如下图被分为四个区域。类似于一些代码编辑IDE,灵萌测采用了常用的用户界面:资源管理器列在左方,显示了用户能选择到的所有文件及文件夹;编辑器放在右方,显示用户正在编辑的内容。

下图是一个完整的灵萌测界面,下面会进行详细介绍。

Windows 系统中的灵萌测界面

Mac 系统中的灵萌测界面


1 菜单栏


位于客户端顶部,包括了文件、编辑、视图和帮助四个一级菜单。


1.1 文件


  • 新建 新建测试用例(Ctrl+N)或套件。
  • 打开 打开一个现有的用例。
  • 打开工作空间 打开一个文件夹作为工作空间。
  • 关闭工作空间 关闭当前的工作空间。
  • 重新启动 重启灵萌测客户端。
  • 退出 退出灵萌测客户端。


1.2 编辑


  • 撤销 / 重复 /
  • 剪切 / 复制 / 粘贴 //
  • 删除
  • 全选


1.3 视图


  • 命令面板 在编辑区顶部打开一个命令行。
  • 开发者工具
  • 放大/缩小 /
  • 重置缩放
  • 全屏
  • 切换左边栏 显示或隐藏边栏。
  • 切换调试窗口 打开或关闭调试器面板。


1.4 帮助


  • 了解更多
  • 许可证


2 视图边栏 && 功能边栏


视图边栏位于客户端的最左侧,包含了三个用于转换功能边栏的视图的按键。来帮助用户更有效率地切换工作版块。

2.1 资源管理器


I. 已打开的编辑器

资源管理器用于浏览,打开和管理用户项目中所有的文件及文件夹。

在资源管理器的顶部为 已打开的编辑器 的区域,用于临时显示正在编辑或者待编辑的多个文件。例如,如果用户正在对文件进行以下四种操作,该文件就会被列入到 已打开的编辑器 中。

  • 对一个文件做出改动。
  • 在编辑器顶栏上双击文件名称。
  • 在资源管理器中双击一个文件。
  • 打开一个不属于当前文件夹的文件。

只需在 已打开的编辑器 的区域点击一个文件,该文件立即在灵萌测中被激活。当用户结束当前文件的编辑之后,只需点击文件名之前的 即可在 已打开的编辑器 中移出该文件。


II. 编辑区激活按钮

以下三个按钮,用于激活编辑区的相应区域。

  • 切换case面板

  • 切换suite面板

  • 打开webview


III. 工作空间

用户可以点击 没有设定工作空间 标签下的 按钮来打开一个文件夹作为工作空间。

打开选中的文件夹之后,资源管理器会显示当前文件夹中的文件目录,此时用户可以在这里通过鼠标右键完成以下的操作:

  • 新建、删除、重命名文件或者文件夹。
  • 打开已有的用例或文件夹的本地路径。


2.2 配置面板


目前配置面板只有以下两个功能,后续会添加更多功能。

  • 改变客户端的语言(目前支持中/英文)
  • 打开/关闭控制台
  • 打开/关闭调试输出


2.3 查看报告


测试报告按照时间顺序排列。点击这些报告,用户可以从一个报告弹窗中得到具体的测试信息。 关于测试报告的更多内容在查看测试报告中。



3 编辑区


编辑文件的主要区域。用户可以在这里打开足够多的编辑器,也能在编辑的同时在另一侧打开网页视图。推荐用户采用分离视图,即一边是用例/套件编辑器,一边是网页视图的方式来编辑。

关于编辑区的内容在这里就不再赘述,更多详细的介绍请参考编辑器一节。


4 输出 && 调试面板


用户可以在编辑区下方显示不同的面板,用于输出或调试信息、错误或警告。

  • 顶部的“输出”与“调试”按钮可用于切换这两个不同的面板;
  • 右上角的 则用于关闭当前面板。若想再次启动面板,用户可在菜单栏的“编辑”子菜单中再次将其调出;
  • 点击 ,可清空当前面板的内容。


4.1 输出面板


以视频中的”logout”用例为例,运行完毕之后会在面板中生成以下内容。

 [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

可见输出信息可分为以下几个部分:

  • 测试开始(Testing Start)与执行结束(End of execution 会以蓝色高亮来区隔连续的用例)
  • 系统时间(中括号内部)
  • 执行代码所在的行数
  • 具体的执行用例的内容


4.2 调试面板


用户可在调试面板中尝试使用 Lemoncase2 语言。方法与和再浏览器中使用调试面板一样。