一直想做web端UI自动化测试，网上查阅了大量的资料，发现有一个线程的monkey测试工具，地址：https://github.com/marmelab/gremlins.js。但是我对js不是很精通，网上的资料不全，怎么办？只好一步一步学起来。

背景

测试或开发web程序时，总会漏掉一些特殊用户交互场景，往往是这些漏掉的场景会出现问题，我们如果不想办法去发现这些特殊交互的漏洞并修复，那么这些问题早晚会暴露在线上。但如果有这样一个工具，可以随机模拟用户操作发现一些web交互的bug，那么我们应该尽可能在用户使用前发现，避免影响用户体验。gremlins.js的出现就是为了解决这个问题。

gremlins 可以随机单击窗口中的任意位置，在表单中输入随机数据，或者将鼠标移到随机元素上。目地：触发 JavaScript 错误，或使应用程序失败。如果 gremlins 发现不了程序问题，说明web应用足够健壮，那正是我们所期望的。gremlins.js行为我们称之为：monkey测试。

安装

这个模块是通过依赖node的npm分发的，需要作为你项目的依赖去安装，安装命令：

npm i gremlins.js

gremlins.js也可以当一个小书签使用，访问页面，复制页面代码，在浏览器console中回车执行，即可发起monkey

基本用法

gremlins专门对你的应用程序发起攻击的一个小程序，执行下面的方法对你的web程序施压

const horde = gremlins.createHorde();
horde.unleash();
// gremlins将每隔10ms启动一次，执行1000次

gremlins.js 提供了几种 gremlin 类：一些在页面上到处点击，一些在表单输入中输入数据，另一些在每个可能的方向滚动窗口，等等。

在屏幕上（它们留下红色痕迹）和控制台日志中能看到他的操作痕迹，如：

gremlin formFiller input 5 in <input type="number" name="age">
gremlin formFiller input pzdoyzshh0k9@o8cpskdb73nmi.r7r in <input type="email" name="email">
gremlin clicker    click at 1219 301
gremlin scroller   scroll to 100 25
...

集群还包含 mogwais不会对被测系统产生压力。 Mogwais 只监视应用程序的活动并将其记录在记录器上。例如，“fps” mogwai平均每500ms都会监控web页面每秒的帧数：

mogwai  fps  33.21
mogwai  fps  59.45
mogwai  fps  12.67
...

gremlins.js压崩被测系统时mogwais也会发送报告。比如，每秒少于10帧，那 “fps” mogwai就会抛错误信息。

mogwai  fps  12.67
mogwai  fps  23.56
err > mogwai  fps  7.54 < err
mogwai  fps  15.76
...

报错超过10次之后， Gizmo服务就会终止测试，因为如果报错超过10次，我们就知道怎么重现问题。但如果Gizmo没终止测试，默认的horde就会在1分钟后自动停止。我需要增加gremlins操作数要去延长测试时间，增加的代码：

const horde = gremlins.createHorde({strategies: [gremlins.strategies.allTogether({ nb: 10000 })],
});
horde.unleash();
// gremlins将每隔10ms测试一次，执行1000次

Gremlins 和 mogwais 一样，都是简单的 JavaScript 函数。如果 gremlins.js 不提供可以破坏您的应用程序的 gremlin，那么开发它非常容易，代码示例如下：

// Create a new custom gremlin to blur an input randomly selected
function customGremlin({ logger, randomizer, window }) {// Code executed once at initializationlogger.log('Input blur gremlin initialized');// Return a function that will be executed at each attackreturn function attack() {var inputs = document.querySelectorAll('input');var element = randomizer.pick(element);element.blur();window.alert('attack done');};
}// Add it to your horde
const horde = gremlins.createHorde({species: [customGremlin],
});

gremlins.js中的所有方法都可配置，扩展性强并且非常适合测试。

高级用法

设置Gremlins和Mogwais 用于测试

所有的Gremlins和Mogwaisorn类默认都添加到horde中了，你也可以只选中你想要得gremlins类，配置如下：

gremlins.createHorde({species: [gremlins.species.formFiller(),gremlins.species.clicker({clickTypes: ['click'],}),gremlins.species.toucher(),],}).unleash();

如果你想自定义gremlins替换默认的，可以用allSpecies常量

gremlins.createHorde({species: [...gremlins.allSpecies, customGremlin],}).unleash();

要仅添加您想要的 mogwais，请以相同的方式使用 mogwai 配置和 allMogwais() 常量。

gremlins.js 目前提供了一些 gremlins 和 mogwais类：

clickerGremlin 单击任意位置
toucherGremlin 触摸任意位置
formFillerGremlin 通过输入数据、选择选项、单击复选框等来填充表单
scrollerGremlin 滚动视口
typerGremlin 在键盘上键入
alertMogwai 防止调用 alert() 阻止测试
fpsMogwai 记录浏览器的每秒帧数 (FPS)
gizmoMogwai暂停gremlins当他们移动的太远时

配置gremlins

gremlins.js提供的所有gremlins和mogwais都可配置，比如你可以通过注入自定义配置来改变它们的工作方式。

例如，clicker gremlin 是一个将对象作为自定义配置的函数：

const customClicker = gremlins.species.clicker({// which mouse event types will be triggeredclickTypes: ['click'],// Click only if parent is has class test-classcanClick: (element) => element.parentElement.className === 'test-class',// by default, the clicker gremlin shows its action by a red circle// overriding showAction() with an empty function makes the gremlin action invisibleshowAction: (x, y) => {},
});
gremlins.createHorde({species: [customClicker],
});

每个特定的 gremlin 或 mogwai 都有自己的自定义方法，你可以查看源码获取详细内容。

插入随机器

如果你想重复测试，那就需要插入一个随机数生成器，比如：

// seed the randomizer
horde.createHorde({randomizer: new gremlins.Chance(1234);
});

测试前或测试后执行代码

测试或对被测系统发起攻击前，你可能想执行通用代码，这段代码可能是用来：启动文件、禁用一些功能、启动应用程序等。那你只需要插入如下代码：

const horde = gremlins.createHorde();console.profile('gremlins');
horde.unleash().then(() => {console.profileEnd();
});

制定策略

gremlin默认每隔10s随机操作对被测系统发起攻击，这种攻击策略成为分布时攻击策略，你可以试用策略自定义对象定义：

const distributionStrategy = gremlins.strategies.distribution({distribution: [0.3, 0.3, 0.3, 0.1], // the first three gremlins have more chances to be executed than the lastdelay: 50, // wait 50 ms between each action
});

这里需要注意：默认gremlins有五类，前面的例子会给最后一个gremlin赋值为0。你可以使用另外一种测了。这个策略只是一个方法，入参只有一个：gremlins数组。另外两种策略是关联的，方便我们更复杂攻击场景制定策略。

停止攻击

使用horde.stop()可以停止攻击

自定义日志

gremlins.js在控制台记录了所有gremin的action（动作）和mogwai。如果你想重写日志方法，以下是编写的格式：

const customLogger = {log: function (msg) {/* .. */},info: function (msg) {/* .. */},warn: function (msg) {/* .. */},error: function (msg) {/* .. */},
};
horde.createHorde({ logger: customLogger });

Cypress

cypress测试用例中使用gremlins时，你需要提供：

import { createHorde } from 'gremlins.js';describe('Run gremlins.js inside a cypress test', () => {let horde;beforeEach(() =>cy.window().then((testedWindow) => {horde = createHorde({ window: testedWindow });}));it('should run gremlins.js', () => {return cy.wrap(horde.unleash()).then(() => {/* ... */});});
});

Playwright

palywright中使用，你可以将如下代码作为一个初始化脚本：

const { test } = require('@playwright/test');test('run gremlins.js', async ({ page }) => {await page.addInitScript({path: './node_modules/gremlins.js/dist/gremlins.min.js',});await page.goto('https://playwright.dev');await page.evaluate(() => gremlins.createHorde().unleash());
});

WEB端Monkey测试gremlins.js相关推荐

iOS端Monkey测试
说起Monkey测试,大家想到的是monkey测试只有安卓有,monkey测试只针对安卓app,今天给大家分享一下Monkey测试在iOS端也能跑!iOS端app也能使用Monkey测试来执行稳定性测 ...
移动端Monkey测试
Monkey测试 Money介绍顾名思义,Monkey就是猴子, Monkey测试,就像一只猴子, 在电脑面前,乱敲键盘在测试. 猴子什么都不懂, 只知道乱敲通过Monkey程序模拟用户触摸屏幕 ...
web端兼容性测试相关知识
web兼容性测试相关知识一.客户端兼容性 1.浏览器的兼容性测试 a.内核角度 Tridnt内核:代表作IE.腾讯.遨游.世界之窗等 Gecko内核:代表作Firefox webkit内核:代表作S ...
Web测试要点做移动端的测试，也做web端的测试，甚至后面桌面端的测试和后台的测试也做了，基本上把我们产品各个端都玩了一轮...
Web测试要点一.功能测试 1.链接测试 (1).测试所有链接是否按指示的那样确实链接到了该链接的页面: (2).测试所链接的页面是否存在: (3).保证Web应用系统上没有孤立的页面(所谓 ...
appscan如何进行web端安全性测试_常用的软件测试工具有哪些？
写在开头:本文推荐的测试工具都是现在市场上比较常用的,并不是所有的软件测试工具都有. 软件测试按照工作岗位可以分为功能测试.性能测试.测试开发,不同的工作岗位会用到不同的软件测试工具: 一. 测试管理 ...
web端安全测试工具
https://www.cnblogs.com/ios9/p/7692373.html 十大web安全扫描工具扫描程序可以在帮助造我们造就安全的Web 站点上助一臂之力,也就是说在黑客"黑 ...
Web端兼容性测试--浏览器/平台/分辨率
兼容性测试主要是针对不同的操作系统平台,浏览器,以及分辨率进行的测试.由于用户浏览器的不同,往往都会使我们的网页发生页面样式错乱,图片无法显示等问题.因此我们就需要对网页进行兼容性测试.对于应用,我们 ...
移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
web端测试和移动端测试的对比
做过的项目有不少涉及web端测试和移动端测试,简单的记录下他们之间的区别: 1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来重点 ...

WEB端Monkey测试gremlins.js

背景

安装