-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
43 lines (42 loc) · 11.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>前端自动化测试 | 前端自动化测试</title>
<meta name="description" content="Analysis vue.js deeply">
<link rel="icon" href="/Fe-Auto-Testing/logo.png">
<link rel="manifest" href="/Fe-Auto-Testing/manifest.json">
<meta name="theme-color" content="#3eaf7c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/Fe-Auto-Testing/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/Fe-Auto-Testing/icons/safari-pinned-tab.svg" color="#3eaf7c">
<meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">
<link rel="preload" href="/Fe-Auto-Testing/assets/css/0.styles.3ae066cf.css" as="style"><link rel="preload" href="/Fe-Auto-Testing/assets/js/app.092a0afe.js" as="script"><link rel="preload" href="/Fe-Auto-Testing/assets/js/4.09b9b62a.js" as="script"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/10.2106dc5c.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/11.c60ed52a.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/12.9068df64.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/13.02765de5.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/14.526ade17.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/15.9f362ddf.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/16.cd7414cf.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/17.7bed77b4.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/18.458df518.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/19.39a58d89.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/2.3a8ead68.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/20.70a7fc52.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/21.473e6975.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/3.b3f65018.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/5.e11b96bb.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/6.19a7a933.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/7.9dc0e2dd.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/8.2689fee4.js"><link rel="prefetch" href="/Fe-Auto-Testing/assets/js/9.ec96d22d.js">
<link rel="stylesheet" href="/Fe-Auto-Testing/assets/css/0.styles.3ae066cf.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/Fe-Auto-Testing/" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">前端自动化测试</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://github.com/Jecyu/Fe-Auto-Testing/tree/master" target="_blank" rel="noopener noreferrer" class="nav-link external">
配套例子
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/Jecyu/Fe-Auto-Testing" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://github.com/Jecyu/Fe-Auto-Testing/tree/master" target="_blank" rel="noopener noreferrer" class="nav-link external">
配套例子
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/Jecyu/Fe-Auto-Testing" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>测试相关概念</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/Fe-Auto-Testing/concepts/" class="sidebar-link">Introduction</a></li><li><a href="/Fe-Auto-Testing/concepts/reason.html" class="sidebar-link">为什么要测试</a></li><li><a href="/Fe-Auto-Testing/concepts/type.html" class="sidebar-link">测试类型</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>测试实战</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/Fe-Auto-Testing/practice/" class="sidebar-link">Introduction</a></li><li><a href="/Fe-Auto-Testing/practice/solution.html" class="sidebar-link">已有的解决方案</a></li><li><a href="/Fe-Auto-Testing/practice/mocha.html" class="sidebar-link">Mocha</a></li><li><a href="/Fe-Auto-Testing/practice/jest.html" class="sidebar-link">Jest</a></li><li><a href="/Fe-Auto-Testing/practice/vue.html" class="sidebar-link">测试 Vue.js 组件</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>持续集成自动化测试</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/Fe-Auto-Testing/auto/" class="sidebar-link">Introduction</a></li><li><a href="/Fe-Auto-Testing/auto/travis-ci.html" class="sidebar-link">Travis CI</a></li><li><a href="/Fe-Auto-Testing/auto/jenkins.html" class="sidebar-link">Jenkins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>扩展</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/Fe-Auto-Testing/popularize/" class="sidebar-link">Introduction</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Troubleshooting</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/Fe-Auto-Testing/tip/" class="sidebar-link">Introduction</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>参考资料</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/Fe-Auto-Testing/refs/" class="sidebar-link">Introduction</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="前端自动化测试"><a href="#前端自动化测试" aria-hidden="true" class="header-anchor">#</a> 前端自动化测试</h1> <p>对代码进行测试，对我来说，一直很陌生，很复杂，一直想回避的话题。机缘之下，有机会作一场关于前端自动测试主题的分享，于是我通过 Google 搜索测试相关的主题，找到了非常多优秀的文章，非常幸运能够学习到他们优秀的测试经验，但是不够系统全面。因此我决定把自己学习的过程所得记录下来，希望能够为没有接触过的测试的同学节省一点时间。</p> <p>这本电子书的目标是让前端开发者知道测试的概念、为什么要测试、如何写测试用例等，使他能够快速建立起对测试的框架认知，从理论到应用实践的过程。本书内容分享围绕着三部分：前端，自动化，测试。
在此之前，相信有一部分小伙伴有这样的疑问🤔️，
前端真的有必要测试吗？
前端如何做到自动化测试？</p> <ul><li>Given
一个完全没有UT基础的新人🚶</li> <li>When
当他🚶看完并练习本电子书后</li> <li>Then
他能够把<code>Given/When/Then</code>的套路学会
他能够学会<code>Jest</code>的基本用法，包括测试suite和断言等语法
他能够学会<code>Jest</code>中测试异步的几种方式
他能够系统地理解前端自动化测试</li></ul> <h2 id="章节目录"><a href="#章节目录" aria-hidden="true" class="header-anchor">#</a> 章节目录</h2> <p>为了让新手更好地驾驭测试，从理论到实战，分为概念、实战、持续集成、扩展四个章节，如下图：</p> <p><img src="/Fe-Auto-Testing/assets/img/test-mind.5515567a.png" alt></p> <p><strong>第一章：测试相关概念</strong></p> <p>讲解了测试相关概念，什么是测试、为什么要测试以及测试的分类。</p> <p><strong>第二章：测试实战</strong></p> <p>描述了下当前的测试解决方案、测试框架
测试环境搭建、以及如何应用到 Vue 中。</p> <p><strong>第三章：自动化测试，持续集成中重要的一环</strong></p> <p>详细讲解了自动化测试的应用场景、两大主流的自动化测试工具 jenkins 和 travis ci。</p> <p><strong>第四章：扩展</strong></p> <p>主要讲解了测试驱动开发、测试如何落地以及测试用例的一些问题。</p> <blockquote><p>本书的内容会借鉴和参考社区优秀的文章，如有侵犯你的权益，请联系我删除，谢谢。</p></blockquote></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/Jecyu/Fe-Auto-Testing/edit/master/docs/README.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <div class="last-updated"><span class="prefix">上次更新: </span> <span class="time">7/4/2020, 10:53:18 PM</span></div></div> <!----> </div> <!----></div></div>
<script src="/Fe-Auto-Testing/assets/js/app.092a0afe.js" defer></script><script src="/Fe-Auto-Testing/assets/js/4.09b9b62a.js" defer></script>
</body>
</html>