?一直想做web端UI自動(dòng)化測(cè)試，網(wǎng)上查閱了 大量的資料，發(fā)現(xiàn)有一個(gè)線程的monkey測(cè)試工具，地址：https://github.com/marmelab/gremlins.js。但是我對(duì)js不是很精通，網(wǎng)上的資料不全，怎么辦？只好一步一步學(xué)起來(lái)。

背景

測(cè)試或開(kāi)發(fā)web程序時(shí)，總會(huì)漏掉一些特殊用戶交互場(chǎng)景，往往是這些漏掉的場(chǎng)景會(huì)出現(xiàn)問(wèn)題，我們?nèi)绻幌朕k法去發(fā)現(xiàn)這些特殊交互的漏洞并修復(fù)，那么這些問(wèn)題早晚會(huì)暴露在線上。但如果有這樣一個(gè)工具，可以隨機(jī)模擬用戶操作發(fā)現(xiàn)一些web交互的bug，那么我們應(yīng)該盡可能在用戶使用前發(fā)現(xiàn)，避免影響用戶體驗(yàn)。gremlins.js的出現(xiàn)就是為了解決這個(gè)問(wèn)題。

gremlins 可以隨機(jī)單擊窗口中的任意位置，在表單中輸入隨機(jī)數(shù)據(jù)，或者將鼠標(biāo)移到隨機(jī)元素上。目地：觸發(fā) JavaScript 錯(cuò)誤，或使應(yīng)用程序失敗。如果 gremlins 發(fā)現(xiàn)不了程序問(wèn)題，說(shuō)明web應(yīng)用足夠健壯，那正是我們所期望的。gremlins.js行為我們稱之為：monkey測(cè)試。

安裝

這個(gè)模塊是通過(guò)依賴node的npm分發(fā)的，需要作為你項(xiàng)目的依賴去安裝，安裝命令：

npm i gremlins.js

?gremlins.js也可以當(dāng)一個(gè)小書(shū)簽使用，訪問(wèn)頁(yè)面，復(fù)制頁(yè)面代碼，在瀏覽器console中回車(chē)執(zhí)行，即可發(fā)起monkey

基本用法

gremlins專(zhuān)門(mén)對(duì)你的應(yīng)用程序發(fā)起攻擊的一個(gè)小程序，執(zhí)行下面的方法對(duì)你的web程序施壓

const horde = gremlins.createHorde(); horde.unleash(); // gremlins將每隔10ms啟動(dòng)一次，執(zhí)行1000次

gremlins.js 提供了幾種 gremlin 類(lèi)：一些在頁(yè)面上到處點(diǎn)擊，一些在表單輸入中輸入數(shù)據(jù)，另一些在每個(gè)可能的方向滾動(dòng)窗口，等等。

在屏幕上（它們留下紅色痕跡）和控制臺(tái)日志中能看到他的操作痕跡，如：

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不會(huì)對(duì)被測(cè)系統(tǒng)產(chǎn)生壓力。?Mogwais 只監(jiān)視應(yīng)用程序的活動(dòng)并將其記錄在記錄器上。 例如，“fps” mogwai平均每500ms都會(huì)監(jiān)控web頁(yè)面每秒的幀數(shù)：?

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

gremlins.js壓崩被測(cè)系統(tǒng)時(shí)mogwais也會(huì)發(fā)送報(bào)告。比如，每秒少于10幀，那?“fps” mogwai就會(huì)拋錯(cuò)誤信息。

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

報(bào)錯(cuò)超過(guò)10次之后，?Gizmo服務(wù)就會(huì)終止測(cè)試，因?yàn)槿绻麍?bào)錯(cuò)超過(guò)10次，我們就知道怎么重現(xiàn)問(wèn)題。但如果Gizmo沒(méi)終止測(cè)試，默認(rèn)的horde就會(huì)在1分鐘后自動(dòng)停止。我需要增加gremlins操作數(shù)要去延長(zhǎng)測(cè)試時(shí)間，增加的代碼：

const horde = gremlins.createHorde({strategies: [gremlins.strategies.allTogether({ nb: 10000 })], }); horde.unleash(); // gremlins將每隔10ms測(cè)試一次，執(zhí)行1000次

Gremlins 和 mogwais 一樣，都是簡(jiǎn)單的 JavaScript 函數(shù)。 如果 gremlins.js 不提供可以破壞您的應(yīng)用程序的 gremlin，那么開(kāi)發(fā)它非常容易，代碼示例如下：

// 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中的所有方法都可配置，擴(kuò)展性強(qiáng)并且非常適合測(cè)試。

高級(jí)用法

設(shè)置Gremlins和Mogwais 用于測(cè)試

所有的Gremlins和Mogwaisorn類(lèi)默認(rèn)都添加到horde中了，你也可以只選中你想要得gremlins類(lèi)，配置如下：

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

如果你想自定義gremlins替換默認(rèn)的，可以用allSpecies常量

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

?要僅添加您想要的 mogwais，請(qǐng)以相同的方式使用 mogwai 配置和 allMogwais() 常量。

?gremlins.js 目前提供了一些 gremlins 和 mogwais類(lèi)：

• clickerGremlin 單擊任意位置
• toucherGremlin 觸摸任意位置
• formFillerGremlin 通過(guò)輸入數(shù)據(jù)、選擇選項(xiàng)、單擊復(fù)選框等來(lái)填充表單
• scrollerGremlin 滾動(dòng)視口
• typerGremlin 在鍵盤(pán)上鍵入
• alertMogwai 防止調(diào)用 alert() 阻止測(cè)試
• fpsMogwai 記錄瀏覽器的每秒幀數(shù) (FPS)
• gizmoMogwai暫停gremlins當(dāng)他們移動(dòng)的太遠(yuǎn)時(shí)

配置gremlins

gremlins.js提供的所有g(shù)remlins和mogwais都可配置，比如你可以通過(guò)注入自定義配置來(lái)改變它們的工作方式。

例如，clicker gremlin 是一個(gè)將對(duì)象作為自定義配置的函數(shù)：

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], });

每個(gè)特定的 gremlin 或 mogwai 都有自己的自定義方法，你可以查看源碼獲取詳細(xì)內(nèi)容。

插入隨機(jī)器

如果你想重復(fù)測(cè)試，那就需要插入一個(gè)隨機(jī)數(shù)生成器，比如：

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

測(cè)試前或測(cè)試后執(zhí)行代碼

測(cè)試或?qū)Ρ粶y(cè)系統(tǒng)發(fā)起攻擊前，你可能想執(zhí)行通用代碼，這段代碼可能是用來(lái)：啟動(dòng)文件、禁用一些功能、啟動(dòng)應(yīng)用程序等。那你只需要插入如下代碼：

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

制定策略

gremlin默認(rèn)每隔10s隨機(jī)操作對(duì)被測(cè)系統(tǒng)發(fā)起攻擊，這種攻擊策略成為分布時(shí)攻擊策略，你可以試用策略自定義對(duì)象定義：

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 });

這里需要注意：默認(rèn)gremlins有五類(lèi)，前面的例子會(huì)給最后一個(gè)gremlin賦值為0。你可以使用另外一種測(cè)了。這個(gè)策略只是一個(gè)方法，入?yún)⒅挥幸粋€(gè)：gremlins數(shù)組。另外兩種策略是關(guān)聯(lián)的，方便我們更復(fù)雜攻擊場(chǎng)景制定策略。

停止攻擊

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

自定義日志

gremlins.js在控制臺(tái)記錄了所有g(shù)remin的action（動(dòng)作）和mogwai。如果你想重寫(xiě)日志方法，以下是編寫(xiě)的格式：

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

Cypress

cypress測(cè)試用例中使用gremlins時(shí)，你需要提供：

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中使用，你可以將如下代碼作為一個(gè)初始化腳本：

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()); });

總結(jié)

以上是生活随笔為你收集整理的WEB端Monkey测试gremlins.js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。