Photo on kobiton.com

---

前言

小弟在上週藉由之前所介绍的 Appium 内容统整 完成了简单的 APP 自动化测试
但是上週的内容介绍完 总觉得有点空虚
左思右想了一下 小弟发现好像缺少了 report
俗话说的好 人类是视觉化动物
没有直观的 report 对小弟来说总是缺少了些什么东西

而为了达成这件事情，可以透过程式语言的框架来产生 report
像是小弟是使用 JavaScript 撰写 就可以使用 Jest, Mocha... 来达成
但是因为之前已经介绍过 Jest 所以小弟这次就以 Mocha 为主
如果想要看 Jest 文章的大哥大姐 可以再自行参考
鼠年全马铁人挑战 WEEK 18：Jest (上)
鼠年全马铁人挑战 WEEK 19：Jest (下)

---

介绍 Mocha

Photo on kobiton.com by GauravShukla

Mocha 是一个功能丰富的 JavaScript 测试框架
可以在 Node.js 和浏览器中运行

---

安装 Mocha

因为 Mocha 使用 Node.js 和 npm 作为执行环境
因此在使用时 须先安装 Node.js 与 npm

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"    # 安装 homebrew$ brew install node    # 安装 node

在 Appium 的测试专案底下 安装 mocha
$ npm install mocha

修改测试

因为 Mocha 会执行 test 资料夹底下的测试
因此在开始前 需要先建立一份 test 的资料夹
$ mkdir test

并将上次的测试档案拉近该 test 资料夹底下

// javascriptconst wdio = require("webdriverio");const assert = require("assert");const opts = {    path: '/wd/hub',    port: 4723,    capabilities: {        platformName: "Android",        platformVersion: "10",        deviceName: "R58N12607JM",        appPackage: "com.sec.android.app.popupcalculator",        appActivity: "com.sec.android.app.popupcalculator.Calculator",        automationName: "UiAutomator2"    }};async function main() {    const client = await wdio.remote(opts);    const one = await client.$('//android.widget.Button[@content-desc="1"]');    const plus = await client.$('//android.widget.Button[@content-desc="加号"]');    const result = await client.$('android.widget.TextView')    await one.click();    await plus.click();    await one.click();    const value = await result.getText();    assert.equal(value, '2');    await client.deleteSession();}main();

接下来就要进行程式改造
而需要改的部分只有测试主体 function
改完后整体的样子大概是下面的样子

// javascriptconst wdio = require("webdriverio");const assert = require("assert");const opts = {    path: '/wd/hub',    port: 4723,    capabilities: {        platformName: "Android",        platformVersion: "10",        deviceName: "R58N12607JM",        appPackage: "com.sec.android.app.popupcalculator",        appActivity: "com.sec.android.app.popupcalculator.Calculator",        automationName: "UiAutomator2"    }};describe('Create Android session', function() {    let client;    before(async function() {        client = await wdio.remote(opts);    });    after(async function() {        await client.deleteSession();    })    it('Check arithmetic result should correct', async function() {        const one = await client.$('//android.widget.Button[@content-desc="1"]');        const plus = await client.$('//android.widget.Button[@content-desc="加号"]');        const result = await client.$('android.widget.TextView')        await one.click();        await plus.click();        await one.click();        const value = await result.getText();        assert.equal(value, '2');    });});

在改造后虽然执行方式都一样
但是多了一些东西 小弟就稍微说明一下

describe: 称为测试套件 (test suite)
简单来说就有点像是群组的概念，将相同的测试案例归类
以此向上方的举例，如果要将 describe 拿掉也是没有问题的
而 describe 是一个函数，该函数有两个参数要带
第一个参数是 test suite 的名称
第二个参数是实际要执行的函数it: 称为测试案例 (test case)
简单来说就有点像是群组里的成员，将相关的案例归类在同一个 describe
而 it 也是一个函数，，该函数也有两个参数要带
第一个参数是 test case 的名称
第二个参数是实际要执行的函数before
这个功能已经是非常常见的了
也就是整个测试开始前所执行的指令
小弟将开启 Appium Server 的操作搬进 brfore 中after
这个功能也是非常常见的
刚好跟 before 相反，是整个测试结束后执行的指令
小弟将关闭 Appium Server 的操作搬进 after 中

安装 Report

report 的样式有很多种
搜寻关键字：mocha html report
小弟这边选择用 mochawesome 来做示範
$ npm install mochawesome

执行测试

接着就跟上週说的步骤差不多了
开启 “APP 自动化测试 - 第二集” 中所介绍的 "安装 appium desktop"
确认该输入的设定值已完成输入 即可点击 Start Server 进入 Log 页面

最后在 package.json 文件中的 script 加上
"mocha": "mocha --reporter mochawesome --timeout 10000"

mocha: 所使用的 JavaScript 框架reporter: 所指定的 report 工具timeout: 设定超时的时间，预设为2000
因为启动 Appium Server 需要一点时间
所以在这边设定要拉长超时的时间

接着执行 $ npm run appium

查看 Report

测试执行完可以在 mochawesome-report 资料夹底下找到 report
预设的档案名称为 mochawesome.html

---

结尾

以上是小弟这週的分享内容
主要是透过框架间接呈现可视化的 report

如果有疑问或是有错误，还请各位大哥大姐提点。
小弟将继续往下週迈进。 ─=≡Σ((( つ•̀ω•́)つ

---

参考文件：

参考网站

Mocha - the fun, simple, flexible JavaScript test frameworkmochawesome - npm

相关文章

鼠年全马铁人挑战 WEEK 21：APP 自动化测试 - 第二集
测试框架 Mocha 实例教程