搭建自己的前端自动化测试脚手架（一）

luffyZh 发布于2019-05-29 16:57 / 2326人阅读

摘要：还可以自动完成单元测试的配置，工具选型为准备出发有了以上的初步了解，我们就可以准备着手搭建我们自己的测试环境了，让我们短暂休息一下，下一章见下一篇搭建自己的前端自动化测试脚手架二

搭建自己的前端自动化测试脚手架（一）

LancerComet at 17:55, 2016.07.17.
欢迎转载，转载时还请保留作者署名。

随着前端项目规模的日益膨胀，自动化测试越来越受到广大前端与测试朋友关注，不过可惜的是目前中文社区关于自动化测试的内容还不是很多，这对自动化测试的推广而言带来了一定阻力。在下希望通过简短的文章，给更多的朋友一个简单的入门，能够接触到自动化测试的世界。

前端的测试可以简单地看成 单元测试 与 端到端测试 ，在此我们讨论的是后者。

目的

释放双手，缓解压力，让浏览器在那儿自嗨，我们盯着屏幕喝点水看测试是不是全通过就好，哈。
图片略大，请耐心等待……

工具选择

可能有朋友以前听过或使用过 Phantom.js 进行测试，用起来是不是很（酸）爽的感觉啊？

在下觉得 Phantom.js 目前作为测试工具的不足之处：

就是测界面的，没界面，心虚啊；

API 有时还不能满足测试需求；

不能使用 ES2015 编写测试代码；

不能良好和现有项目代码结合，不能随心所欲引入外部组件；

evaluate 函数内不能引用外部变量；

调试不方便；

有测试朋友表示这货需要专职前端维护；

……

有没有什么方案能够做到：

我能一遍喝着茶一边看着它跑；

API 功能足够，且扩展性强；

能够使用 ES2015；

能够和现有项目结合，引入项目配置与外部模块；

调试方便，比如能使用 Webstorm 或 VS Code 的控制台；

能够调取 IE、Firefox、Chrome 这种外部浏览器；

使用 BDD 与 TDD 编写测试案例；

……

回答是，有！

为了满足以上需求，我们将使用 Selenium 与 Nightwatch 搭建我们的测试脚手架。前者是一款 Web 的自动化测试环境，它将帮我们搭建好测试环境，调取系统安装的浏览器，在浏览器里执行一切自动化行为；后者是一款 Test Runner，可以简单理解为前者的控制软件，它将提供一系列接口供我们编写测试案例，同时也是与现有前端项目结合的桥梁。

我们将使用 selenium-standalone 安装和管理 Selenium 而不是手工设置原版程序。selenium-standalone 是一款基于 Node.JS 的 Selenium 管理工具包，对于前端而言更加友好。

另外，Selenium 与 Nightwatch 也是 Vue-cli 生成的 Vue Webpack 项目的标配组件，所以如果您在使用 Vue + Webpack 构建项目，本文对您也会有所帮助，同时您可以使用 Vue-cli 帮您自动配置好测试环境，非常方便。

Vue-cli 还可以自动完成 单元测试 的配置，工具选型为 Karma + Mocha + Chai.

准备出发

有了以上的初步了解，我们就可以准备着手搭建我们自己的测试环境了，让我们短暂休息一下，下一章见！

下一篇：搭建自己的前端自动化测试脚手架（二）

GPU云服务器云服务器 web前端自动化测试搭建自己的私有云搭建自己的域名邮箱搭建自己的博客网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/8723.html

搭建自己的前端自动化测试脚手架（二）

摘要：建立的配置信息。在此我们安装的以便使用进行测试。如果您在搭建过程中遇到困难，您可以从获取在下已经搭建好的接下来接下来就是专心写测试用例了，距离成功越来越近了不过今天就到这里结束，我们下一章见下一篇搭建自己的前端自动化测试脚手架三上一篇：搭建自己的前端自动化测试脚手架（一）By LancerComet at 18:38, 2016.07.17. 欢迎转载，转载时还请保留作者署名。嗨，...

villainhr 2019-05-29 16:57 评论0 收藏0
搭建自己的前端自动化测试脚手架（三）

摘要：如果您在进行模拟鼠标的测试，您的鼠标指针可能会干扰您的测试，因此建议运行测试后将您的指针移动至屏幕外部，以避免干扰到浏览器测试。上一篇：搭建自己的前端自动化测试脚手架（二）By LancerComet at 23:47, 2016.07.22. 欢迎转载，转载时还请保留作者署名。这是最后一章了！(･∀･)之前我们配置好了我们的脚手架工具，现在可以编写测试用例了！开始编写测试用例 ...

seanlook 2019-05-29 16:57 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

aristark 2019-08-29 17:24 评论0 收藏0