前端UI自动化测试

727 阅读1分钟

介绍

Taiko是一个Node.js库,具有清晰简洁的API,可自动执行基于Chromium的浏览器(Chrome,Microsoft Edge,Opera)和Firefox。用Taiko编写的测试具有很高的可读性和可维护性。

实战

npm install -g taiko

  • 体验一下
$ taiko	// 进入交互模式
> openBrowser()	// 打开浏览器
> goto("google.com/?hl=en")	// 前往谷歌搜索
> write("taiko test automation")	// 在搜索框写入内容
> click("Google Search")	// 点击搜索
> .code	// 查看命令
> .code googlesearch.js	// 把上面命令输出到文件中
> .exit	// 退出
  • 回归测试 假如上面命令就是我们的业务测试命令,很长时间之后,我们想要验证上面这段业务内容是否还正确,就不需要再手写一遍了。

只需执行一行下面代码

taiko googlesearch.js // 无浏览器验证
taiko googlesearch.js --observe	// 打开浏览器验证

API介绍

  1. taiko

进入REPL

  1. .api

查看所有的api

  1. .api openBrowser

查看API的更多详细信息以及示例

选择器介绍

  1. click("Google Search")

Taiko的API将浏览器视为黑匣子。

使用Taiko,我们可以通过查看网页内容来编写脚本,而无需检查其源代码。

例如,在google.com上,使用上面命令

  1. write("something")

Taiko的API模仿了用户与浏览器的交互

在当前焦点的输入框内写入内容,使用上面命令

  1. 特定的文本
> write("something", into(textBox({placeholder: "Username"})))
  1. click(checkBox(near("Username")))

Taiko的接近度选择器直观地定位元素

将单击与文本“用户名”最接近任何元素的复选框

  1. XPath和CSS选择器
> click($("#button_id")) // Using CSS selector
> click($("//input[@name='button_name']")) // XPath selector	

处理XHR和动态内容

Taiko的API会监听触发XHR请求或获取动态内容的操作,并在执行下一个操作之前自动等待它们完成。 Taiko在执行命令之前隐式等待元素加载到页面上。

与Gauge整合

我们建议将Taiko与Gauge一起使用。

Gauge是用于编写可读和可重复使用的验收测试的框架。

借助markdown规范,数据驱动的执行,并行执行和报告仪表等功能,使测试维护变得容易。

Gauge易于安装,并且与Taiko集成良好。

借助Gauge和Taiko,我们可以编写可靠的验收测试。

Gauge初始化项目

$ npm install @getgauge/cli
$ gauge init jsx