利用javaWeb+jquery+ajax开发测试平台（监控、快捷操作所有的自动化测试项目）

最新推荐文章于 2024-05-23 14:27:10 发布
最新推荐文章于 2024-05-23 14:27:10 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40308101/article/details/103071497
版权
效果：https://v.qq.com/x/page/b3021ygobgd.html（录制的视频）下面是几张截图实现代码：因为后端接口的代码太多，这里只粘前端代码jsp代码：<%-- Created by IntelliJ IDEA. User: mft Date: 2019-10-08 Time: 15:00 To change...
摘要由CSDN通过智能技术生成

效果：

https://v.qq.com/x/page/b3021ygobgd.html （录制的视频）

下面是几张截图

实现代码：

因为后端接口的代码太多，这里只粘前端代码

jsp代码：

<%--
  Created by IntelliJ IDEA.
  User: mft
  Date: 2019-10-08
  Time: 15:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>测试平台</title>
    <meta http-equiv="content" content="text/html;charset=utf-8">
    <%--    css依赖--%>
    <link rel="stylesheet" href="css/jquery/jquery-ui-1.12.1.css">
    <%--    css本地--%>
    <link rel="stylesheet" type="text/css" href="css/test.css">

    <%--    script依赖--%>
    <script src="js/jquery/jquery-3.4.1.js"></script>
    <script src="js/jquery/jquery-ui-1.12.1.js"></script>
    <%--    script本地--%>
    <script type="text/javascript" src="js/test.js"></script>
</head>
<body>

<div class="title"  id="div1">测试平台</div>

<div style="width: 100%" id="div2">
    <span class="titleText" style="float: left;">线上接口</span>

    <button style="float: left;" onclick="buildJenkins('115','InterfaceTest_live')">开始测试</button>
    <button style="float: left;" onclick="stopJenkins('115','InterfaceTest_live')">中止测试</button>

    <a href="http://test.babyfs.cn/re/lastReportList/InterfaceTest_live.html" target="_blank">
        <button style="float: left;">查看报告</button>
    </a>
    <a href="http://10.10.10.115:8082/job/InterfaceTest_live/" target="_blank">
        <button style="float: left;">修改配置</button>
    </a>
    <i id="InterfaceTest_live_resule" style="float: left;">测试结束</i>


    <i id="InterfaceTest_resule" style="float: right;">测试结束</i>
    <a href="http://10.10.10.115:8082/job/InterfaceTest/" target="_blank">
        <button style="float: right;">修改配置</button>
    </a>
    <a href="http://test.babyfs.cn/re/lastReportList/InterfaceTest.html" target="_blank">
        <button style="float: right;">查看报告</button>
    </a>
    <button style="float: right;" onclick="stopJenkins('115','InterfaceTest')">中止测试</button>
    <button style="float: right;" onclick="buildJenkins('115','InterfaceTest')">开始测试</button>
    <span class="titleText" style="float: right;">lpt接口</span>
</div>

<div style="width: 100%" id="div3">
    <span>
        <pre id="InterfaceTest_live_log" class="InterfaceTest_live_style"></pre>
        <pre id="InterfaceTest_log" class="InterfaceTest_style"></pre>
    </span>
</div>


<div style="width: 100%" id="div4">
    <span class="titleText" style="float: left;">服务器性能</span>

    <a href="http://test.babyfs.cn/webtools/index.jsp" target="_blank">
        <button style="float: left;">开始测试</button>
    </a>
    <button style="float: left;" onclick="stopJenkins('115','performanceTest')">中止测试</button>
    <a href="http://test.babyfs.cn/re/performanceTest/result/index.html" target="_blank">
        <button style="float: left;">查看报告</button>
    </a>
    <a href="http://10.10.10.115:8082/job/performanceTest/" target="_blank">
        <button style="float: left;">修改配置</button>
    </a>
    <i id="performanceTest_resule" style="float: left;">测试结束</i>


    <i id="monkey_resule" style="float: right;width: 11%">测试结束</i>
    <a href="http://10.10.10.115:8082/job/monkey/" target="_blank">
        <button style="float: right;">修改配置</button>
    </a>
    <a href="http://10.10.10.115:8080/re/lastReportList/monkey.png" target="_blank">
        <button style="float: right;">查看截图</button>
    </a>
    <a href="http://10.10.10.115:8080/re/lastReportList/monkey.html" target="_blank">
        <button style="float: right;">查看报告</button>
    </a>
    <button style="float: right;" onclick="stopJenkins('115','monkey');buildJenkins('115','monkey_stop')">中止测试
    </button>
    <button style="float: right;" onclick="buildJenkins('115','monkey')">开始测试</button>

    <span class="titleText" style="float: right;">app性能</span>
</div>

<div style="width: 100%" id="div5">
    <span>
        <pre id="performanceTest_log" class="performanceTest_style"></pre>
        <pre id="monkey_log" class="monkey_style"></pre>
    </span>
</div>


<div style="width: 100%"  id="div6">
    <span class="titleText" style="float: left;">app功能</span>

    <a href="http://test.babyfs.cn/webtools/app_regressionTest.jsp" target="_blank">
        <button style="float: left;">开始测试</button>
    </a>
    <button style="float: left;
    " onclick="stopJenkins('37','app_regressionTest')">中止测试
    </button>
    <a href="http://10.10.10.115:8080/re/lastReportList/app_regressionTest.html" target="_blank">
        <button style="float: left;">查看报告</button>
    </a>
    <a href="http://10.10.10.115:8082/job/app_regressionTest/" target="_blank">
        <button style="float: left;">修改配置</button>
    </a>
    <i id="app_regressionTest_resule" style="float: left;">测试结束</i>


    <i id="op_resule" style="float: right;width: 11%">测试结束</i>
    <a href="http://10.10.10.115:8082/job/op/" target="_blank">
        <button style="float: right;">修改配置</button>
    </a>
    <a href="http://10.10.10.115:8080/re/lastReportList/monkey.png" target="_blank">
        <button style="float: right;">查看截图</button>
    </a>
    <a href="http://10.10.10.115:8080/re/lastReportList/monkey.html" target="_blank">
        <button style="float: right;">查看报告</button>
    </a>
    <button style="float: right;" onclick="stopJenkins('115','op')">中止测试
    </button>
    <button style="float: right;" onclick="buildJenkins('115','op')">开始测试</button>

    <span class="titleText" style="float: right;">op后台</span>
</div>

<div style="width: 100%"  id="div7">
    <span>
        <pre id="app_regressionTest_log" class="app_regressionTest_style"></pre>
        <pre id="op_log" class="op_style"></pre>
    </span>
</div>

</body>
</html>

 js代码：

let get1;
let get2;
let get3;
let get4;
let get5;
let slideDownTime = 1000;

window.onload = function () {
    $("div").hide().slideDown(slideDownTime);//隐藏、展开所有div元素

    getLog('logCat', '115', 'InterfaceTest_live', 'InterfaceTest_live_log', '');
    getLog('logCat', '115', 'InterfaceTest', 'InterfaceTest_log', '');
    getLog('logCat', '115', 'performanceTest', 'performanceTest_log', '');
    getLog('logCat', '115', 'monkey', 'monkey_log', '');
    getLog('logCat', '115', 'app_regressionTest', 'app_regressionTest_log', '');

    get1 = setInterval("code('BuildResult','115','performanceTest','performanceTest_resule')", 3500);
    get2 = setInterval("code('BuildResult','115','InterfaceTest_live','InterfaceTest_live_resule')", 3500);
    get3 = setInterval("code('BuildResult','115','InterfaceTest','InterfaceTest_resule')", 3500);
    get4 = setInterval("code('BuildResult','115','monkey','monkey_resule')", 3500);
    get5 = setInterval("code('BuildResult','115','app_regressionTest','app_regressionTest_resule')", 3500);
    setInterval("mobility('#InterfaceTest_live_resule')", 3000);
    setInterval("mobility('#InterfaceTest_resule')", 3000);
    setInterval("mobility('#performanceTest_resule')", 3000);
    setInterval("mobility('#monkey_resule')", 3000);
    setInterval("mobility('#app_regressionTest_resule')", 3000);
};

//动效
function mobility(id) {
    let reString = $(id).text();
    if (reString === '正在测试') {
        // 运行特效
        $(id).toggle('pulsate', {times: 2}, 3000);
    } else {
        $(id).show('blind', {direction: 'up'}, 1000);
    }
}

//开始构建
function buildJenkins(jenkinsUrl, jobName) {
    $.ajax({
        type: "post",//请求方式
        url: "./StartTest",//发送请求地址
        data: {
            type: "build",
            jenkinsUrl: jenkinsUrl,
            jobName: jobName
        },
        success: function (data) {
            playAudio('开始测试' + jobName);
            console.log(data);
        },
        error: function () {
            playAudio('开始测试异常' + jobName);
            console.log("开始构建异常,递归调用");
            buildJenkins(jenkinsUrl, jobName);
        }
    });
}

//中止构建
function stopJenkins(jenkinsUrl, jobName) {
    $.ajax({
        type: "post",//请求方式
        url: "./StartTest",//发送请求地址
        data: {
            type: "stopBuild",
            jenkinsUrl: jenkinsUrl,
            jobName: jobName
        },
        success: function (data) {
            playAudio('中止测试' + jobName);
            console.log(data)
        },
        error: function () {
            playAudio('中止测试异常' + jobName);
            console.log("中止构建异常,递归调用");
            stopJenkins(jenkinsUrl, jobName);
        }
    });
}

//请求log，并填充到元素
function getLog(type, jenkinsUrl, jobName, id, grepString) {
    $.ajax({
        type: "post",//请求方式
        url: "./StartTest",//发送请求地址
        data: {
            type: type,
            jenkinsUrl: jenkinsUrl,
            jobName: jobName,
            grepString: grepString
        },
        success: function (data) {
            $("#" + id).html(data);
        },
        error: function () {
            console.log("请求log异常,递归调用:" + id);
            getLog(type, jenkinsUrl, jobName, id, grepString);
        }
    });
    //设置滚动条到最底部
    let objDiv = document.getElementById(id);
    objDiv.scrollTop = objDiv.scrollHeight;

}

//查看构建状态
function code(type, jenkinsUrl, jobName, id) {
    $.ajax({
        type: "post",//请求方式
        url: "./StartTest",//发送请求地址
        data: {
            type: type,
            jenkinsUrl: jenkinsUrl,
            jobName: jobName
        },
        success: function (data) {
            $("#" + id).html(data);
            if (data === '正在测试') {
                switch (jobName) {
                    case "app_regressionTest":
                        getLog('logCat', jenkinsUrl, jobName, 'app_regressionTest_log', '');
                        // 10秒后只执行一次
                        setTimeout("getLog('logCat','115','app_regressionTest','app_regressionTest_log','')", 10000);
                        break;
                    case "monkey":
                        getLog('logCat', jenkinsUrl, jobName, 'monkey_log', '');
                        // 10秒后只执行一次
                        setTimeout("getLog('logCat','115','monkey','monkey_log','')", 10000);
                        break;
                    case "InterfaceTest":
                        getLog('logCat', jenkinsUrl, jobName, 'InterfaceTest_log', '');
                        // 10秒后只执行一次
                        setTimeout("getLog('logCat','115','InterfaceTest','InterfaceTest_log','')", 10000);
                        break;
                    case "InterfaceTest_live":
                        getLog('logCat', jenkinsUrl, jobName, 'InterfaceTest_live_log', '');
                        // 10秒后只执行一次
                        setTimeout("getLog('logCat','115','InterfaceTest_live','InterfaceTest_live_log','')", 10000);
                        break;
                    case "performanceTest":
                        getLog('logCat', jenkinsUrl, jobName, 'performanceTest_log', '');
                        // 10秒后只执行一次
                        setTimeout("getLog('logCat','115','performanceTest','performanceTest_log','')", 10000);
                        break;
                }
            }
        },
        error: function () {
            console.log("查看测试状态异常")
        }
    });
}

//文字转音频
function playAudio(String) {
    let msg = new SpeechSynthesisUtterance();
    msg.text = String;
    msg.lang = 'zh-CN';
    console.log(msg);
    speechSynthesis.speak(msg);
}

css代码： 

body {
    background-color: #515151;
    /*background-image: url("../css/image/body.jpg");*/
    /*background-repeat:no-repeat;*/
    /*background-size:100% 100%;*/
    /*background-attachment: fixed;*/


}

button {
    cursor: pointer;
    width: 6%;
}

i {
    font-size: 15px;
    color: #B8860B;
    width: 17%;
}

.interfaceTest_live_style {
    background-color: black;
    background-attachment: local;
    color: limegreen;

    float: left;
    font-size: 12px;

    width: 49%;
    height: 300px;
    overflow: scroll;
}

.interfaceTest_style {
    background-color: black;
    background-attachment: local;
    color: limegreen;

    float: right;
    font-size: 12px;

    width: 49%;
    height: 300px;
    overflow: scroll;
}

.performanceTest_style {
    background-color: black;
    background-attachment: local;
    color: limegreen;

    float: left;
    font-size: 12px;

    width: 49%;
    height: 300px;
    overflow: scroll;
}

.monkey_style {
    background-color: black;
    background-attachment: local;
    color: limegreen;

    float: right;
    font-size: 12px;

    width: 49%;
    height: 300px;
    overflow: scroll;
}

.app_regressionTest_style {
    background-color: black;
    background-attachment: local;
    color: limegreen;

    float: left;
    font-size: 12px;

    width: 49%;
    height: 300px;
    overflow: scroll;
}

.op_style {
    background-color: black;
    background-attachment: local;
    color: limegreen;

    float: right;
    font-size: 12px;

    width: 49%;
    height: 300px;
    overflow: scroll;
}

.titleText {
    /*background-color: black;*/
    color: #FFE14A;
    height: 20px;
    width: 8%;
}

.title {
    color: #FFE14A;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    width: 100px;
    font-size: 20px;

}

 

萌翻天
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Java：最好的9个开源测试自动化框架Java
主要分享测试的学习资源，帮助快速了解测试行业，帮助想转行、进阶、小白成长为高级测试工程师。
04-23 490
当今市场上有几种开源测试自动化框架 Java，此外，这些设备为你的项目提供速度和组合，这些测试自动化框架有助于简单的脚本开发和性能，帮助现有的方法，并开始减少重复。在这篇文章中，我们提到了最好的开源测试自动化框架
流马测试平台--API和web自动化测试
seanyang_的博客
08-24 1436
流马测试平台支持API和web测试，平台技术栈：前端VUE+ElementUI，后台Java+SpringBoot，测试引擎Python。
Java测试开发进阶路线
测试萌萌
04-14 914
理解Java的面向对象特性，如封装、继承、多态等 熟悉Java的基本数据类型、运算符、流程控制语句等基础语法 熟悉Java中的异常处理机制 理解Java中的类加载机制和反射机制 熟悉Java中的集合框架，如List、Set、Map等 熟悉Java中的IO操作和多线程编程 熟悉Java中的Lambda表达式和函数式接口 理解Java中的注解机制和泛型机制 熟悉Java中的网络编程和Socket编程 熟悉Java中的JDBC编程和数据库操作
七款优秀的Java测试框架，你最适合哪一个？
最新发布
weixin_71807218的博客
05-23 864
Java是当今最流行的编程语言之一，常年位居最受欢迎前三。一个优秀的员，在研发时离不开对测试框架的了解，从而开发出更安全和更高效的代码。使用这些测试框架的其中一个最重要的原因是减少出错的可能性，提高开发效率，并降低研发成本。在本文中，我们将介绍用于 Java测试的最常见的测试框架。
第一章，测试平台开发简介
weixin_30426879的博客
03-07 680
1.1，测试平台简介 平台就是一种用来实现某种功能的体系。平台包括各种不同的元素，架构，流程，标准，机制和工具等等。 以测试为例： - 架构：测试体系中有关的各种Roles以及对应的Responsibilities。 - 流程：测试相关的各种流程，比如测试项目流程，测试管理流程，配置管理流程…… - 标准：在测试相关的各种流程中应该遵循的各种标准。 - 机制：各种相关的机制，如沟通机制...
测试开发【Mock平台】02基础：Java Spring Boot框架知识
测试开发转型之旅上的小学生
03-18 562
测试平台开发系列教程第二节，掌握Springboot 搭建后端服务的基础内容
Javaweb在线考试系统 毕业设计 论文+源码+sql脚本 完整源码
01-18
本毕业设计项目——“基于JavaWeb的在线考试系统”，旨在为学生提供一个方便、高效的自我评估和学习平台。下面将对该项目的核心功能、技术选型、数据库设计以及实现过程进行详细的阐述。 一、系统功能介绍 1. 用户...
javaweb项目相亲网站.zip
05-07
【JavaWeb项目相亲网站】是一个基于JavaWeb技术开发的现代婚恋交友平台，旨在为当代年轻人提供便捷的恋爱相亲服务。这个项目具有完整的功能模块，不仅适用于个人学习和提升JavaWeb开发技能，也是毕业设计的理想选择...
2024Javaweb仓库管理系统项目源码.zip
03-21
【JavaWeb仓库管理系统项目源码】是一个典型的软件开发实例，主要使用JavaWeb技术来实现对仓库的高效管理和监控。在本项目中，开发者利用了Java语言的强大功能和Web技术的便捷性，构建了一个完整的系统，涵盖了仓库...
javaweb课程设计项目：基于ssm框架实现的教师科研信息管理系统.zip
12-16
Maven通过POM.xml文件管理项目依赖，自动化构建过程，包括编译、测试、打包和部署。 6. **前端技术**： 项目的前端可能使用HTML、CSS和JavaScript，以及jQuery、Bootstrap等库进行页面布局和交互设计。此外，还...
基于javaweb写的网上商城
05-06
7. **JavaScript/jQuery/AJAX**：前端交互技术，提升用户体验，如异步加载、表单验证等。 8. **CSS/HTML**：构建用户界面，实现页面布局和样式设计。 9. **Bootstrap**：流行的前端框架，快速构建响应式网页。 10. *...
个人开发的JAVA开发平台（测试版）
11-28
采用JAVA技术开发的JAVA ide开发平台，支持eclipse工程、dorado工程 或者普通java文件夹，支持代码的编译、语法高亮显示 对于web应用可以直接运行并测试打开页面 对于java应用也可以在Ide中运行 主要优势： 1）轻量级：速冻快 2）便于工程的打开调试，工程存放的物理位置不受限制 3）同时支持运行含源码的工程，也可以是不含源码的部署jar包，而不需要 再部署到具体额外的应用服务器中，平台已经集成了tomcat应用服务器
java自动化测试框架
09-20
java自动化测试框架
自动化测试示例TestDemo完善最新版本
04-06
自动化测试示例TestDemo完善最新版本。 支持JUnit, HttpUnit, JMock, JUnitEE ,TestNG 上次上传的版本不支持TestNG，需要的用户请更新到此版本。
在线ajax测试,在线测试 - SosoApi,简单强大的api接口文档管理平台
weixin_39548832的博客
08-06 866
背景：在实际项目开发协同过程中，特别是前后端由不同开发人员开发时，前端接口联调必须要等后端接口开发完成后才可以。这种方式使得前端极大的依赖于后端，使得原本可以并行的工作被阻塞了，特别是流程性质的功能。mock服务就是一种可以提供给前端联调测试并返回约定结构而不依赖于服务端的服务。在服务端未开发完，可以先使用mock功能，等后端开发完后只需切换请求基地址即可调用到真实的后端服务。示例说明：真实的后端...
java实时监控数据变化_大屏监控系统实战
weixin_39782394的博客
11-27 1481
这个项目的起源非常的偶然，源于今年我有幸入选2019年CSDN博客之星年度总评选，并且排名一直还不错，在前20的行列中，而排名第一的天元浪子大大，用python分析了一波投票情况，我本人对自己也非常感兴趣，但因为我不会用python，而且python画出来的统计图不是动态图，于是我就想用Java做后端，前端用图表组件做个靓靓的大屏监控出来。大概花了两天时间，初见成效。现在简单介绍如下：一...
java web 菜单_JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果
weixin_30513765的博客
02-12 231
写在前面，在笔者完成这个demo的时候，笔者发现现在大家已经不用Ajax来完成联级菜单了，实际上笔者这个demo也并不是为了完成这个，笔者主要的学习方向是JavaWeb后台的业务逻辑开发。但是做后台呢还是需要对前端有所了解，尤其是像Ajax这种异步提交数据的技术需要了解并掌握。所以这里笔者这里用了一个联级菜单来练习Ajax异步提交，当然后续还会写几个异步提交表单的demo。笔者的后台是用的spri...
用java开发微信公众号：测试公众号与本地测试环境搭建（一）
weixin_33862041的博客
12-07 443
本文为原创，原始地址为：http://www.cnblogs.com/fengzheng/p/5023678.html 俗话说，工欲善其事，必先利其器。要做微信公众号开发，两样东西不可少，那就是要有一个用来测试的公众号，还有一个用来调式代码的开发环境。 测试公众号 微信公众号有订阅号、服务号、企业号，在注册的时候看到这样的信息，只有订阅号可以个人申请，服务号和企业号要有企业资质才可以。这里...
gsoap:启用http compression(gzip)进行数据压缩传输
10km的专栏
09-06 3023
什么是http compress?HTTP compression即网页压缩,简单说就是web服务器和浏览器客户端传送数据时,将网页数据/客户端响应数据在发送给对方前先进行压缩再传输的一种方式。 使用网页压缩可以减少数据传输大小，减少数据在网上络上传递的时间消耗，提高web服务器和客户端之间的响应速度，改善客户体验。 HTTP compression是由web服务器和浏览器之间共同遵守的协议，也
软件开发与测试技术实训：Android+JavaWeb项目实战
该资源是一份综合性的学习资料，涵盖了软件测试、Android项目开发和Java Web工程实践。其中包含了三个部分：软件开发与测试技术实训报告、Android项目的具体实现细节以及Java Web工程的实例和相关测试用例。文档旨在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌翻天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值