web端无码化开发流程设计与实现

web端无码化开发流程设计与实现

以接口测试为例

前言

           在不实现完整的语法的前提下， 通过无码化配置的方式，无法完全替代业务逻辑代码的编写，此文档暂时仅适用于大量有共性特点的代码生成，例如：测试用例、通信设备检修项等

目标：

1、提高测试用例的开发效率

2、提高脚本准确性

3、语言兼容、测试平台兼容，支持跨平台、跨语言执行

流程分析

 

 

 

 

页面配置简单示例

 

 

 

 

 

前端技术选型

原则上来讲，只要支持组件化开发、动态响应的库或框架都可以实现，例如：AngularJs、React、Vue，上述示例使用的是angularJs做的简单开发

使用到的特性：

1、  双向绑定

2、  自定义指令，组件作用域隔离及父子嵌套

3、  事件广播、接收

组件举例

 .directive('useChoice', function () {//条件组件，上图中“如果。。。”组件
        return {
            scope: {},//隔离作用域，存储当前组件属性
            link: function (scope, element, attrs) {
                scope.parentParams = getParentParams(scope);//初始化可选参数，向上逐层作用域查询所有可用参数
                scope.$on("refreshParam", function (event) {//响应参数刷新事件，当上级作用域修改参数时，下级同时刷新
                    scope.parentParams = getParentParams(scope);
                });

            },
            templateUrl: 'directive/useChoice.html'
        };
    })