接口测试页面

最新推荐文章于 2024-02-11 21:45:00 发布
最新推荐文章于 2024-02-11 21:45:00 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： js jquery html 文章标签： js 接口测试 接口检查
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37649018/article/details/80925168
版权
js 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
jquery
4 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏

1：在项目中新建html页面，将代码粘贴到html文档中

页面全部代码如下：

<html>
    <head>
        <meta charset="utf-8" />
        <title>接口测试</title>
        <style>
            *{padding: 0;margin: 0;}
            html{background-color: #f8f8f8;font-family:"微软雅黑";font-size: 16px;color: #333333;}
            ul,li{list-style: none;}
            
            .container{position: relative;width: 1200px; margin: 0 auto;}
            .title{padding: 50px 0;text-align: center;}
            .mr30{margin-right: 30px;}
            .test-list{}
            .test-list .list-item{border: 1px solid #ccc; padding: 20px;margin: 15px auto; border-radius: 4px;background-color: #fff;cursor:pointer;line-height:40px;}
            .test-list .list-item:hover{background-color: #e8e8e8;}
            .success,.failed,.error{font-size: 18px;}
            .success{color: green;}
            .failed{color: #FF8A5B ;}
            .error{color: red;}
            .info-code{display: inline-block;vertical-align: middle;margin-right: 30px;margin-bottom: 30px;}
            .btn{position: fixed;z-index:10;display:block;left:50%;top:130px;margin-left: 448px;padding:20px 40px;font-size:18px;border:none;background-color:#e3393c;border-radius:4px;color:#fff;cursor:pointer;}
        </style>
    </head>
    <body>
        
        <div class="container">
            <h1 class="title">接口测试</h1>
            <div>
                <p class="info-code">成功接口：<span id="success-count" class="success">0</span></p>
                <p class="info-code">失败接口：<span id="failed-count" class="failed">0</span></p>
                <p class="info-code">错误接口：<span id="error-count" class="error">0</span></p>
            </div>
            <div>
                <ul id="test-list" class="test-list"></ul>
            </div>
            <button id="btn" class="btn" type="button">开始检测</button>
        </div>
        
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script>
        
             // 用户在此处设置测试接口内容
            var checks = [
            	{
            		title: "敏感词检查",
            		url: "/lemmas/sensitive",
            		type: "post",
            		data:{
            			k: "义无反顾啊啊啊",
            			sesitiveWord: []
            		}
            	},{
                    title: "敏感词检查",
                    url: "/lemmas/sensitive1",
                    type: "post",
                    data:{
                        k: "义无反顾啊啊啊",
                        sesitiveWord: []
                    }
                },{
                    title: "敏感词检查",
                    url: "/lemmas/sensitive2",
                    type: "post",
                    data:{
                        k: "义无反顾啊啊啊",
                        sesitiveWord: []
                    }
                },{
                    title: "敏感词检查",
                    url: "/lemmas/sensitive",
                    type: "post",
                    data:{
                        k: "义无反顾啊啊啊",
                        sesitiveWord: []
                    }
                },{
                    title: "敏感词检查",
                    url: "/lemmas/sensitive",
                    type: "post",
                    data:{
                        k: null,
                        sesitiveWord: []
                    }
                },
            ];
            //接口根路径
            var root = '';
            
            
            
            
            
            
            var sCount = 0, //成功数
                fCount = 0, //失败数
                eCount = 0; //错误数
            //方法对象
            var util = {
                /** 
                 *接口测试方法
                 * @param title {string} 接口名称 （必填）
                 * @param url {string} 接口url （必填）
                 * @param data {object} 接口参数 （必填）
                 * @param type {string} 接口类型 （必填）
                 * @param successFun {function} 接口成功后回调 （可选）
                 * @param errorFun {function} 接口失败后回调（可选）
                 */
                request: function(title, url, type, data, successFun, errorFun){
                	var $dom = $('#test-list');
                    //成功
                    var success = successFun || function(data){
                        var ItemHtml = '';
                        if(data.state == "100"){
                        	ItemHtml = '<li class="list-item"><h3 class="success">成功</h3><p>接口名称：'+ title +'</p><p>接口url：'+ url +'</p></li>';
                        	sCount++;
                        	$('#success-count').text(sCount);
                        }else{
                            ItemHtml = '<li class="list-item"><h3 class="failed">失败</h3><p>接口名称：'+ title +'</p><p>接口url：'+ url +'</p></li>';
                            fCount++;
                            $('#failed-count').text(fCount);
                        }
                        $dom.append(ItemHtml);
                        
                    };
                    //出错
                    var error = errorFun || function(data){
                        var ItemHtml = '';
                        ItemHtml = '<li class="list-item"><h3 class="error">出错</h3><p>接口名称：'+ title +'</p><p>接口url：'+ url +'</p></li>';
                        eCount++;
                        $('#error-count').text(eCount);
                        $dom.append(ItemHtml);
                    };
                    //调取接口
                    $.ajax({
                        url: root + url,
                        data: data,
                        type: type,
                        dataType: 'json',
                        contentType : "application/json;charset=utf-8",
                        cache : false,
                        success: success,
                        error: error
                    });
                },
                /** 
                 * post方法
                 * @param title {string} 接口名称 （必填）
                 * @param url {string} 接口url （必填）
                 * @param data {object} 接口参数 （必填）
                 * @param successFun {function} 接口成功后回调 （可选）
                 * @param errorFun {function} 接口失败后回调（可选）
                 */
                post: function(title, url, data, successFun, errorFun){
                    util.request(title, url, 'post', JSON.stringify(data), successFun, errorFun);
                },
                /**
                 * get方法
                 * @param title {string} 接口名称 （必填）
                 * @param url {string} 接口url （必填）
                 * @param data {object} 接口参数 （必填）
                 * @param successFun {function} 接口成功后回调 （可选）
                 * @param errorFun {function} 接口失败后回调（可选）
                 */
                get: function(title, url, data, successFun, errorFun){
                    util.request(title, url, 'get', JSON.stringify(data), successFun, errorFun);
                }
            };
            
            /* 接口检测方法 */
            var startCheck = function(){
            	$('#test-list').empty();
            	$.each(checks, function(index, item){
                	 if(item.type=="post"){
                		 util.post(item.title, item.url, item.data);
                	 }else{
                		 util.get(item.title, item.url, item.data);
                	 }
                 });
            };

            //检查按钮绑定点击事件
            $('#btn').on('click',function(){
            	//初始化接口检测结果数值
            	sCount = 0; //成功数
                fCount = 0; //失败数
                eCount = 0; //错误数
                
                //执行检查方法
                startCheck();
            	
            })

        </script>
    </body>
</html>

2：在项目中运行该html页面，（不在项目中运行，会有跨域问题）

3：修改代码中checks变量内容，就可以批量测试接口了


师夷长技以制夷
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
免费可用的接口网站
Frank_colo的博客
06-27 1111
请注意，在使用这些免费接口时，要遵守相关的使用条款和限制。某些接口可能对请求频率、响应数据的使用等方面有限制。）：提供模拟的 RESTful API，包含了常见的 CRUD 操作的示例数据。）：类似 JSONPlaceholder，提供了一系列的示例 API，可以用于测试和开发前端应用。）：提供关于世界上各个国家的信息，包括名称、首都、人口、语言等。）：生成随机用户信息的 API，可以获取随机生成的用户数据，例如姓名、头像、地址等。）：提供天气数据的接口，可以获取全球各地的实时天气情况、预报等信息。
几个好用的测试HTTP请求的网站
Arthur Guo 的专栏
10-01 7265
几个好用的测试HTTP请求的网站
测试进阶必备，这5款http接口自动化测试工具真的很香
最新发布
shanmao001的博客
02-11 2194
综合上面的描述，我们用下面的表格来做个小的总结，请看：​最后结合上面的表格来选择适合自己需要的接口自动化测试工具吧。
推荐几个免费的HTTP接口Mock网站和工具
01-05 3494
JSONPlaceholder是一个提供免费的在线RESTAPI的网站，我们在开发时可以使用它提供的url地址测试下网络请求以及请求参数。当我们程序需要获取一些假数据、假图片或者mock数据接口时可以使用它。其返回的数据为JSON格式，且同时支持HTTP和HTTPS这两种请求类型，支持跨域，如 CORS 和 JSONP，支持GET、POST、PUT、PATCH、DELETE几个请求方法。
推荐一个可以调试接口 比较好用的网站
z060701的博客
08-09 1309
作为一个天天与代码相伴的前端程序员，接口是我们每天都在接触的东西。这是我们前端与后端交汇的地方，使我们可以通过后端传来的数据去编写各式各样的页面。正所谓好记性不如烂笔头，在我们这道理也是一样的，通过接口文档可能不是那么好理解，但是我们可以去调试接口来更快速的达到我们的需求。根据文档看看有没有必须的参数 如果有我们需要先在参数值那里添加 我这个接口是json的。通过这个网址 我们可以跳过繁琐的下载安装 只需要注册一个账户 便可以在里面调试接口。然后我们点击发送就可以得到请求的数据。
软件测试——网页接口性能测试
m0_62489881的博客
05-02 516
软件测试——网页接口性能测试
平台服务器测试3—接口测试工具实现
03-23
平台服务器的接口测试用例及测试数据准备完毕后，接下来的工作就是如何去进行接口功能测试了，如果使用客户端来进行平台服务器的接口测试，不但某些测试用例无法进行覆盖(例如上传不合法的版本号)，而且有的输入值...
接口测试面试题.docx
03-28
接口测试是测试系统组件间接口的一种测试。 接口测试的重点是检查数据的交换，传递的正确性，以及接口间逻辑依赖...提交接口测试的重要意义：实现开发期并行测试，减少页面层测试的深度，缩短整个项目的测试周期。
关于手机打开页面接口测试
12-09
这是关于手机登陆的接口测试，请慎用！，用起来的感觉还是不错的、
求职有道-接口测试面试题
04-01
3XX： 表示重定向 当前请求的页面再得到响应之后，不在当前页面停留，直接跳转到其他重定向的页面 4XX： 客户端错误 400 入参语法错误 401 身份验证未授权，鉴权问题 403 服务器已经接收到了请求，但是...
HTTP接口测试工具
11-02
http接口测试工具，可用于压力测试。
接口测试网站.zip
09-19
一个可供大家进行接口测试练习的一个网站，接口自动化也可以
史上最详细的接口测试，一篇即可学会
apex_eixl的博客
03-10 1370
接口泛指实体把自己提供给外界的一种抽象化物（可以为另一实体），用以由内部操作分离出外部沟通方法，使其能被内部修改而不影响外界其他实体与其交互的方式。人类与电脑等信息机器或人类与程序之间的接口称为用户界面。电脑等信息机器硬件组件间的接口叫硬件接口。电脑等信息机器软件组件间的接口叫软件接口。在计算机中，接口是计算机系统中两个独立的部件进行信息交换的共享边界。这种交换可以发生在计算机软、硬件，外部设备或进行操作的人之间，也可以是它们的结合。
postman接口测试（详解）
cs888zsy的博客
09-02 605
New: 新建，可以新建Request请求，Collection请求集，环境等等Import: 导入，可以导入别人导出的请求集Runner: 运行一个请求集（批量执行）Invite: 邀请（需要注册，邀请进行协作）同步图标：（需要注册，同步你的项目到云端）抓包图标：抓包/捕获请求，用于开启Postman代理， 手动设置代理（或手机代理）后可抓包/录制请求设置图标：Postman设置功能消息图标：官方及协助消息云端图标：用户云端数据（需要注册）
最简单的接口测试
林家小猪
09-24 756
今天利用unittest+requests来分享一个简单的接口测试，下面开始吧！ import unittest import requests class Test_api(unittest.TestCase): def setUp(self): print('接口测试开始') def test_one(self): print('这是第一个接...
接口测试系列之 —— 前端交互测试和后端逻辑测试
myh919的博客
08-04 953
在交互过程中，针对一个接口也会有多个场景，前端会根据不同的入参来调 用不同的场景，根据不同响应结果， 进行响应数据的改写，来获得不同响应，验证不同响应下前端的展示效果。接口测试相对容易实现自动化，且相对 UI 自动化也比较稳定，可以减少人 工回归测试人力成本与时间，缩短测试周期，是支持后端快速发版需求，达到低 成本高收益的根源。6、web,app，接口自动化 ，7、性能测试 ，8、编程基础，9、hr面试题 ，10、开放性测试题，11、安全测试，12、计算机基础。被百万人刷爆的软件测试题库！
[全网最细]接口测试一般怎么测？接口测试的流程和详细步骤
测试猿课堂-分享软件测试技术知识和专业的软件测试职业进阶转行指导！
04-19 7991
接口测试就是通过接口的不同情况下的输入和与之对用的输出之间的关系，看看是否满足接口规范所规定的**功能性**、**安全性**以及**性能方面**的要求。 简单的说：“接口测试是就是在没有前端页面或者前端还没完成的情况下，代替前端页面或者第三方使用者，来验证后端的接口实现是否符合接口规范。”
浏览器跨域方案，适用于本地调试接口（超简单）
欧阳的技术博客
07-29 9556
浏览器本地跨域方案，适用于本地调试接口
接口测试postman
08-21
与功能测试不同，接口测试不需要页面，而是通过接口规范文档上的调用地址和请求参数来构建请求报文，并发送请求后检查返回结果。因此，相对于功能测试，接口测试相对简单一些。<span class="em">1</span><span class...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值