mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-03 04:50:32 +08:00
283 lines
16 KiB
HTML
283 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<title>YApi 接口管理平台 使用手册</title>
|
||
|
||
<meta name="keywords" content="api管理,接口管理,接口文档,api文档">
|
||
|
||
|
||
<meta name="description" content="YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。">
|
||
|
||
|
||
<link rel="shortcut icon" href="./images/favicon.ico" />
|
||
<link rel="stylesheet" href="source/main.css" />
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="styles/theme.css" />
|
||
|
||
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
|
||
<meta name="format-detection" content="telephone=no,email=no" />
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
|
||
</head>
|
||
<body>
|
||
<div class="ydoc">
|
||
<header class="ydoc-header">
|
||
<div class="ydoc-header-area">
|
||
|
||
<a href="./index.html" class="navbar-brand"><img src="./images/logo_header@2x.png" /> YAPI</a>
|
||
|
||
<button class="ydocIcon navbar-toggle"></button>
|
||
<nav class="ydoc-nav">
|
||
<ul class="navbar-left">
|
||
|
||
<li class="">
|
||
|
||
<a href="index.html"></a>
|
||
</li>
|
||
|
||
<li class="active">
|
||
|
||
<a href="usage.html">使用手册</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="devops.html">内网部署</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="plugin.html">插件 Wiki</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="qa.html">常见问题</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="releases.html">版本记录</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="http://yapi.demo.qunar.com/" target="_blank">产品演示</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="api.html"></a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- <header style="height:20px"></header> -->
|
||
|
||
<!-- Docs page layout -->
|
||
|
||
<div class="ydoc-banner-bg">
|
||
<div class="ydoc-banner ">
|
||
<div class="ydoc-banner-area">
|
||
<h1 >YApi</h1>
|
||
<p class="desc ">高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="ydoc-container">
|
||
|
||
<div class="ydoc-container-content ">
|
||
|
||
|
||
<div class="content-left staticsidenav" role="complementary">
|
||
<nav class="docs-sidebar hidden-print hidden-xs hidden-sm">
|
||
<ul class="nav docs-sidenav">
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="getfamiliar.html">认识 YApi</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="quickstart.html">创建第一个API</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="manage.html">管理分组与项目</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="project.html">项目操作</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="interface.html">接口操作</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="mock.html">普通 Mock</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="adv_mock.html">高级 Mock</a>
|
||
</li>
|
||
|
||
<!-- <li class="active" class="active" > -->
|
||
<li class="active" >
|
||
|
||
<a href="case.html">使用测试集</a>
|
||
</li>
|
||
|
||
<ul class="nav docs-sidenav-extend" >
|
||
|
||
<li >
|
||
<a href="#介绍">介绍</a>
|
||
</li>
|
||
|
||
<li >
|
||
<a href="#测试列表">测试列表</a>
|
||
</li>
|
||
|
||
<li >
|
||
<a href="#编辑测试用例">编辑测试用例</a>
|
||
</li>
|
||
|
||
<li >
|
||
<a href="#自动化测试">自动化测试</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="data.html">数据导入</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="content-right markdown-body use-sidebar" role="main">
|
||
|
||
<h2 class="subject" id="介绍">介绍 <a class="hashlink" href="#介绍">#</a></h2><p style='text-indent:2em;line-height:1.8em'>Web 应用通常是前后端分离开发的，后端提供调用的接口，前端使用接口返回 json 数据渲染到 UI，接口测试就是保证后端接口的数据正确性。
|
||
|
||
对于很多团队，接口测试就是手动运行接口，肉眼比对接口返回的数据，这样的操作流程效率低下，容易出错。使用 YApi 只需要在可视化 GUI 下，配置下每个接口的入参和对 RESPONSE 断言，即可实现对接口的自动化测试，大大提升了接口测试的效率。<a target="_blank" href="https://blog.ymfe.org/api-autotest/#more">自动化测试实践</a></p>
|
||
|
||
<h2 class="subject" id="测试列表">测试列表 <a class="hashlink" href="#测试列表">#</a></h2><p><img class="doc-img" style="width: 618px;" src="./images/usage/case-list.gif" /></p>
|
||
<p>在测试列表可以看到每个测试用例的 key,还有 开始测试、报告等功能</p>
|
||
<p>点击开始测试会按照 case 定义的参数从上往下一个一个进行测试，如果顺序有问题，可以拖动调整</p>
|
||
<p>测试完成之后，点击报告查看该次请求的结果</p>
|
||
<h2 class="subject" id="编辑测试用例">编辑测试用例 <a class="hashlink" href="#编辑测试用例">#</a></h2><h3 class="subject" id="Mock参数">Mock参数 <a class="hashlink" href="#Mock参数">#</a></h3><p>Mock 参数每次请求都会生成随机字符串</p>
|
||
<p><img class="doc-img" style="width:100%" src="./images/usage/case-edit.jpg" /></p>
|
||
<h4 class="subject" id="变量参数">变量参数 <a class="hashlink" href="#变量参数">#</a></h4><p>YApi 提供了强大的变量参数功能，你可以在测试的时候使用前面接口的 <code>参数</code> 或 <code>返回值</code> 作为 <code>后面接口的参数</code>，即使接口之间存在依赖，也可以轻松 <strong>一键测试~</strong> </p>
|
||
<blockquote>
|
||
<p>Tips: 参数只能是测试过程中排在前面的接口中的变量参数</p>
|
||
</blockquote>
|
||
<p>格式：</p>
|
||
<pre><code>$.<span class="token punctuation">{</span>key<span class="token punctuation">}</span>.<span class="token punctuation">{</span>params|body<span class="token punctuation">}</span>.<span class="token punctuation">{</span>path<span class="token punctuation">}</span>
|
||
</code></pre><p>例如：现有两个接口，分别是“导航标题”和“文章列表”
|
||
<img class="doc-img" style="width: 678px;" src="./images/usage/case_key_list.png" /></p>
|
||
<p>文章列表接口需要传参数: <code>当前标题(id)</code>，而这个 id 需要通过 <code>导航标题</code> 的返回值获取，这时应在 <code>文章列表</code> 的参数输入框中根据前者的 key 找到对应 id。</p>
|
||
<p><code>导航标题</code> 的参数和返回值有如下结构：</p>
|
||
<div style="margin: 16px 0;">
|
||
<span style="display: inline-block; width: 60px;vertical-align: top;">参数：</span>
|
||
<img style="width: 165px;" src="./images/usage/case_key_res_query.png" />
|
||
</div>
|
||
<div style="margin: 16px 0;">
|
||
<span style="display: inline-block; width: 60px;vertical-align: top;">返回值：</span>
|
||
<img style="width: 122px;" src="./images/usage/case_key_res.png" />
|
||
</div>
|
||
|
||
<p>则 <code>文章列表</code> 的参数可以如下配置：
|
||
<img class="doc-img" style="width: 624px;" src="./images/usage/case_key_query.png" /></p>
|
||
<p>其中 <strong>$.</strong> 是使用 <strong>动态变量</strong> 的标志，$.269.<strong>params</strong> 即表示 key 值为 269 用例的请求参数，$.269.<strong>body</strong> 即表示 key 值为 269 用例的返回值。</p>
|
||
<p>如果requestBody是json格式也可以在json中写变量参数，如下图：
|
||
<img class="doc-img" style="width: 624px;" src="./images/usage/case_key_body_json.png" /></p>
|
||
<blockquote>
|
||
<p>Tips: 上下拖动测试集合的列表项可以调整测试的顺序。</p>
|
||
</blockquote>
|
||
<p>目前yapi中的<code>query</code>，<code>body</code>,<code>header</code>和<code>pathParam</code>的输入参数已经支持点击选择功能。无需自己填写表达式，只需在弹窗中选择需要展示的表达式即可。 输入选项包括<code>常量</code>，<code>mock数据</code>，在测试集合中也支持<code>变量</code>选择。
|
||
具体用法：单击编辑按钮打开表达式生成器，点击需要的数据创建表达式，这里也可以实时查看表达式结果。</p>
|
||
<p><img class="doc-img" style="width: 800px;" src="./images/usage/modal-postman.gif" /></p>
|
||
<blockquote>
|
||
<p>Tips: 在测试集合中插入变量参数可以会出现下图的提示信息，这是正常现象。因为该参数只能在各个接口顺序执行的时候才能拉到变量参数中的值</p>
|
||
</blockquote>
|
||
<p><img class="doc-img" style="width: 800px;" src="./images/usage/modal-postman-tips.png" /></p>
|
||
<h2 class="subject" id="自动化测试">自动化测试 <a class="hashlink" href="#自动化测试">#</a></h2><p>可通过 js 脚本写断言，实现精准测试，在接口用例页面点击 Test 编辑。</p>
|
||
<!-- <video style="width:800px" controls="controls" autoplay="autoplay">
|
||
<source src="http://yapi.demo.qunar.com/publicapi/auto-test.mp4" type="video/mp4" />
|
||
Your browser does not support the video tag.
|
||
</video> -->
|
||
<h3 class="subject" id="公共变量">公共变量 <a class="hashlink" href="#公共变量">#</a></h3><h4 class="subject" id="1.assert">1.assert <a class="hashlink" href="#1.assert">#</a></h4><p>断言函数，详细 api 可查看 <a target="_blank" href="https://nodejs.org/dist/latest-v8.x/docs/api/assert.html">document</a></p>
|
||
<h5 class="subject" id="常用_api_">常用 api: <a class="hashlink" href="#常用_api_">#</a></h5><ul>
|
||
<li><p>assert(value) </p>
|
||
<p>判断 value 是否为 truth, 例如 assert(1) 通过， assert(0) 不通过，只要 value 不是 null, 0, false等值验证通过</p>
|
||
</li><li><p>assert.equal(actual, expected) </p>
|
||
<p>判断 actual 是否等于 expected，例如 assert(1, 1)通过</p>
|
||
</li><li><p>assert.notEqual(actual, expected) </p>
|
||
<p>判断 actual 是否不等于 expected</p>
|
||
</li><li><p>assert.deepEqual(actual, expected)</p>
|
||
<p>假设： actual = {a:1} 是一个对象，即便 expected = {a:1}，如果使用 assert.equal 可能也是不相等的，因为在 js 引用的只是对象的一个指针，需要使用 assert.deepEqual 比较两个对象是否相等</p>
|
||
</li><li><p>assert.notDeepEaual(actual, expected)</p>
|
||
<p>深度比较两个对象是否不相等</p>
|
||
</li></ul>
|
||
<h4 class="subject" id="2.status">2.status <a class="hashlink" href="#2.status">#</a></h4><p> http 状态码</p>
|
||
<h4 class="subject" id="3.params">3.params <a class="hashlink" href="#3.params">#</a></h4><p> http request params, 合并了 query 和 body</p>
|
||
<h4 class="subject" id="4.body">4.body <a class="hashlink" href="#4.body">#</a></h4><p> 返回 response body</p>
|
||
<h4 class="subject" id="5.header">5.header <a class="hashlink" href="#5.header">#</a></h4><p> 返回 response header</p>
|
||
<h4 class="subject" id="6.records">6.records <a class="hashlink" href="#6.records">#</a></h4><p> 记录的 http 请求信息，假设需要获取 key 为 555 的接口参数或者响应数据，可通过 records[555].params 或 records[555].body 获取 </p>
|
||
<h4 class="subject" id="7.log">7.log <a class="hashlink" href="#7.log">#</a></h4><p> log（message） 函数,调试时使用，log 信息仅仅在断言失败后打印 </p>
|
||
<h3 class="subject" id="示例">示例 <a class="hashlink" href="#示例">#</a></h3><pre><code>assert.equal(body.errcode<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
|
||
assert.equal(body.data.group_name<span class="token punctuation">,</span> 'testGroup'<span class="token punctuation">)</span>
|
||
assert.equal(status<span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<div class="copyright">
|
||
© 2018 <a href="https://ymfe.org">YMFE</a> Team. Build by <a href="http://ued.qunar.com/ydoc/">ydoc</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
<div class="open-panel"></div>
|
||
<div class="mask"></div>
|
||
|
||
|
||
<script src="source/main.js"></script>
|
||
<script src="source/app.js"></script>
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|