初识Taiko

先来了解一下什么是Taiko:“Taiko是一个免费开源浏览器自动化工具,由ThoughtWorks开发。它是一个node的库,Taiko使用Chrome Devtools API,它是为测试现代web应用程序而构建的。”

所以对于Taiko来说: 1、它是为测试Web应用而生 2、它基于Chrome浏览器

关于Taiko简介中所提到的ThoughtWorks,如果有不了解的同学可以跳转至此进行了解开发团队可能也将成为您框架选型评估的决策项)。

环境安装

在安装Taiko之前,请确保您已经安装了NodeJs环境。如果您还没有安装nodejs,请跳转至Node官网 进行安装。

对于开发工具,这里强烈推荐您使用 VS Code超强开发工具之一,不做解释)。若您还未安装VS Code,请跳转至VS Code官网进行下载安装。

在确保安装完成前两项基本支持环境之后,我们就需要来安装Taiko了。

可以在桌面新建一个文件夹,比如“Taiko Demo”。打开 VS Code,点击左上角的“文件”,选择“打开文件夹”,并且选择刚才创建的文件。

在VS Code中打开“终端”。终端是VS Code 对命令控制台的集成,比如CMD,Powershell等,可以让您不离开IDE就完成一系列操作。 选择VS Code上方的 “终端”,选择“新建终端”,当然您也可以使用快捷键(ctrl + shift + `)。

新建完成后,您将看到这样的窗口。(后续的操作将频繁用到此操作,请进行熟悉)。

接下来,在终端输入该命令:

npm install -g taiko

该内容为向全局环境安装taiko Node包。安装时间可能会有点久,因为taiko里面内置了一个100MB+的Chromium浏览器。

尝试Taiko

在终端输入 taiko ,就可以进入taiko的命令控制台。

如果您在VS Code终端得到错误提示:"因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。" 请使用该方法进行处理:《Powershell 无法运行脚本的处理方法》

进入taiko后您将得到这样的显示:

Version: 1.0.4 (Chromium:81.0.3994.0)

Type .api for help and .exit to quit

>

接下来输入 openBrowser(),您将看到taiko会开启一个浏览器。 然后执行 goto("baidu.com"),浏览器将跳转到百度首页。然后再次执行 write("博客园 句幽"),浏览器将在输入框内填充对于的内容。最后执行click("百度一下"),将模拟操作点击一下搜索。

接下来输入 .code ,您将看到刚才操作步骤的代码。 这是taiko为您自动生成的。

在VS Code中新建文件“first-case.js”。然后将刚才taiko为我们生成的代码拷贝下来,复制到文件中。

此时该文件中的内容就相当于完成了我们第一个Case: “打开浏览器,输入内容,点击搜索”。

taiko 执行过程

那么现在您可能会问,taiko是怎么执行的呢? 如果我要扩展一个用例该如何扩展呢?

先来看看我们最开始输入的几个命令: openBrowsergotowriteclick。 这些都是taiko为我们提供的内置命令。

也就是说 taiko 其实就是为咱们提供了这些基于浏览器的基础操作指令,而我们就可以用这些各种命令进行排列组合,完成对应的操作。比如 “点击”、“按压”、“输入”、“选择元素”等等操作,而这些所有的操作命令都在 taiko 官网 为我们标注出来了。我们只需要选取需要的命令进行操作就可以了。

比如咱们更改一下操作:

await openBrowser();

await goto("baidu.com");

await write("句幽 博客园");

await link('句幽- 博客园').exists();

await click(link('句幽- 博客园'));

这样将会在百度搜索句幽的博客园,然后在点击跳转到句幽的博客园。

而这每一个步骤都将会有一个验证,比如await link('句幽- 博客园').exists();,如果该页面没有获取到名称为"句幽- 博客园"的元素,将会验证失败。

而将这些步骤都转换为js代码,放置在咱们的first-demo.js 文件中,然后在终端运行:

taiko first-demo.js

您将看到这样的结果:

[PASS] Browser opened

[PASS] Navigated to URL http://baidu.com

[PASS] Wrote taiko test automation into the focused element.

[PASS] Clicked element matching text "百度一下" 1 times

[PASS] Browser closed

成功和失败都可以直观的显示。 这些用例步骤放置到对应的文件中,最后再运行就可以得到测试结果啦。

结合Gauge编写用例

现在咱们已经了解到了 taiko 是怎么使用的,它提供了各类操作浏览器的命令,供我们排列组合完成模拟操作,最终得到自动化测试结果。

那么您觉得它够简单吗?如果要和团队一同维护和编辑用例,它很方便吗? 显然不太好用。

所以此刻我们将介绍另外的一个工具:Gauge。 它将以 taiko 提供的命令操作为基础,用更自然的操作方式来完成对应的操作。

在vs code的终端中输入这样的命令:

npm install -g @getgauge/cli

运行完成之后就完成了Gauge的安装。当然在Gauge的官网,它还提供了一个安装包。 以何种方式安装取决于你,不过此处我强烈建议您使用 npm的安装方式。

Gauge还提供了vs code的扩展支持,您可以在VS Code的扩展中(最左侧按钮)进行安装。

接着,在桌面新建一个文件夹gauge-demo,然后在vscode中打开。

在终端中输入:

gauge init js

运行完成后,将会得到Gauge的初始化项目。(vs code的扩展也提供了创建的命令,不过由于兼容问题经常会出现延迟,所以我建议您使用命令来初始化项目)。

初始化之后的项目如图。

使用Gauge

在使用之前,先为大家说明一下,Gauge它充当着一个什么样的角色: 首先要明白,taiko为我们操作浏览器提供了便捷的指令,它使用js来编写。但是这就为咱们测试团队建立了一个障碍,首先全员都得熟悉JS的写法,比如await等关键字等等,这无形提高了技术操作门槛。还有一点,我们所有的案例都将已大量js片段代码来维护,无疑增大了维护成本。

那么gauge干了一个什么操作呢? 它建立于taiko之上,允许测试人员将某某关键词与某段JS相对应,比如("跳转" 对应 taiko 的Goto)。 这样有什么好处呢? 团队并不需要全员掌握JS了。频繁的操作用例可以统一为共同的指令,增加可维护性。

所以现在来看看Gauge提供的初始化项目,您很快就能明白:

查看test文件夹下面的step_implementation.js 文件。这里查看它的部分代码:

step("Goto getgauge github page", async () => {
await goto('https://github.com/getgauge');
});

也就是说'Goto getgauge github page' 对应着 taiko 的操作 await goto('https://github.com/getgauge');

然后再看看specs文件夹下面的example.spec。对应部分为:

* Goto getgauge github page

这样,用例编写人员只需要写出这样的语句就可以完成操作了。而测试团队中的某一小部分人员,负责js对应关系的编写,功能测试人员负责用例的编写,就能很快的完成测试工作。

接下来我们来尝试使用它,在test文件夹下面的step_implementation.js 文件中增加语句:

step("跳转到句幽博客", async () => {
await goto("baidu.com");
await write("句幽 博客园");
await link('句幽- 博客园').exists();
await click(link('句幽- 博客园'));
});

这部分代码熟悉吗? 这是咱们刚开始使用taiko所写的代码。现在我们将它包裹起来,对应到了跳转到句幽博客 这一指令。然后再到specs文件夹下面的example.spec添加对应操作:

## 跳转测试

* 跳转到句幽博客

文本指令 Gauge 采用了MarkDown的写法。我们现在无需过去去了解markdown,只需要知道在spec文件中: # 代表的测试项目名,比如您可以命名(# 考勤分析测试),而## 代表了测试用例,比如您可以命名(## 添加考勤人员)。 * 代表了步骤,步骤的名称来源于您从js文件里的关键词对应。

最后在终端中执行:

gauge run [你的spec的文件名]

就可以进行测试,最终生成测试报告。

如果您安装了VS Code的Gauge插件,那么在进入'.spec'文件后,您可以看到每一个用例上都有一个运行的按钮。点击就可以执行用例。

总结

本文以一个小案例来为大家介绍了什么是Taiko和Gauge,以及如何使用它。那么和传统的自动化测试相比,它有什么优势呢?以及在自动化测试框架百花齐放的今天,它和其它的框架相比有什么优劣势呢?(比如和Robot Framework相比)。以BDD(行为驱动开发)为核心理念的Taiko,是如何践行BDD的呢? 如何编写出更复杂的用例以及如何建立好的分区方式便团队成员维护等问题 都会在后期文章中为大家进行介绍。

使用Taiko + Gauge进行自动化测试(一)的更多相关文章

  1. ThoughtWorks、Teambition、Trello、Slack、DevCloud 主流敏捷软件开发工具平台比较

    在大公司做了6年程序员,2年项目经理的小王,正在创业公司迎来他焦虑的而立之年. 但是对于3个月前加入创业公司的决定,他现在有些烦躁和怀疑人生.在他过往的经验看来,公司新接的小项目,在过去的大公司里1个 ...

  2. 初识gauge自动化测试框架(二)

    看到一些同学对该工具有点一兴趣,那么我将继续介绍Gauge自动化测试工具. Gauge本质上一个BDD(Behavior Driven Development)测试框架.所以,首先你要了解BDD的操作 ...

  3. 初识gauge自动化测试框架

    segmentfault阅读 官方网站:https://docs.gauge.org/latest/index.html 介绍: Gauge是一个轻量级的跨平台测试自动化工具,可以使用不同的语言中编写 ...

  4. gauge自动化测试框架(二)

    Gauge通过Markdown来描述行为,所以我还需先学习学习Markdown语法,看了一下,还好,十来分钟应该就可以搞定.具体学习见另一篇文章

  5. Gauge自动化测试框架的安装和入门

  6. UI自动化测试框架Gauge 碰到无法识别Undefined Steps 红色波纹标记

    如果碰到无法识别的情况,例如下面的红色波纹,可以试一下: 第一步: 第二步: 不勾选'offline work' 第三部:刷新之后可以重新编译.

  7. 【补充说明】Gauge框架在JS中的简单应用

    这里做一个总结 由于公司架构要用node来替代Java的部分服务,所以就研究了这个自动化测试框架:它可以很方便的测试我们的接口,而且还能使用断言[assert]来判断是否是我们预期的结果. 但是呢,由 ...

  8. 《Python自动化测试九章经》

    Python是当前非常流行的一门编程语言,它除了在人工智能.数据处理.Web开发.网络爬虫等领域得到广泛使用之外,他也非常适合软件测试人员使用,但是,对于刚入行的测试小白来说,并不知道学习Python ...

  9. Gauge框架在JS中的简单应用

    gauge框架简介 Gauge是一个轻量级的跨平台测试自动化工具. gauge安装[Win10 64位下测试] [百度网盘链接]https://pan.baidu.com/s/1bidE34gLLrS ...

随机推荐

  1. crf多表与基表系列化-自定义序列化深度表查询-断关联表关系-多表反序列化

    学习表关系的序列化和反序列表查询之前,新建项目的准备工作及环境搭建的配置. 配置:settings.py INSTALLED_APPS = [ # ... 'rest_framework', ] DA ...

  2. [SDOI2019]染色(DP)

    好神的题啊! 看了这题只会第一个subtask,又参考了HN-CJ鸽王zsy的题解,实在太菜了. 暴力转移是O(nc2),很显然没有分.考虑子任务1,2,只需要转移包含已染色格子的列,然后状态数只有O ...

  3. 【转】nginx如何设置防盗链

    转自博客园作者:howhy,文章地址:nginx如何设置防盗链.大佬写的甚好,在此备份一下 关于nginx防盗链的方法网上有很多教程,都可以用,但是我发现很多教程并不完整,所做的防盗链并不是真正的彻底 ...

  4. G - KiKi's K-Number(树状数组求区间第k大)

    For the k-th number, we all should be very familiar with it. Of course,to kiki it is also simple. No ...

  5. day20-双下new方法,单例模式

    # 1. __new__:构造方法,它创造对象,程序员口头语:new一个对象.先执行__new__方法再执行___init__方法. class Goods: def __init__(self):# ...

  6. day02-文件操作

    文件操作. 1,文件路径:d:\python一定要学好.txt 2,编码方式:utf-8 gbk .... 3,操作模式:只读,只写,追加,读写,写读..... 不论哪种方式都只能执行一次.例如r模式 ...

  7. smarty模板配置代码详细说明及如何注册自己的smarty函数

    下面为smarty模板的配置文件,smarty配置的详细说明以及如何注册自己所需要的smarty函数 config.inc.php <?php /** * Smarty 调用 * www.daf ...

  8. Nuxt.js 踩坑笔记 - 缓存向

    零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant.   一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚 ...

  9. python的IO

    格式化输出 格式化输出是指通过print()等函数向指定的地方(比如屏幕)输出指定格式的内容 格式: age = 18 name = "xiaohua" print("我 ...

  10. LG_2869_[USACO07DEC]美食的食草动物Gourmet Grazers

    题目描述 Like so many others, the cows have developed very haughty tastes and will no longer graze on ju ...