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

背景

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

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

安裝

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

npm i gremlins.js

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

基本用法

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

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

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

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

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

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

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

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

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

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

Gremlins 和 mogwais 一樣，都是簡單的 JavaScript 函數(shù)。 如果 gremlins.js 不提供可以破壞您的應(yīng)用程序的 gremlin，那么開發(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)并且非常適合測試。

高級用法

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

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

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，請以相同的方式使用 mogwai 配置和 allMogwais() 常量。

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

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

配置gremlins

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

例如，clicker gremlin 是一個將對象作為自定義配置的函數(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], });

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

插入隨機(jī)器

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

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

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

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

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

制定策略

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

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有五類，前面的例子會給最后一個gremlin賦值為0。你可以使用另外一種測了。這個策略只是一個方法，入?yún)⒅挥幸粋€：gremlins數(shù)組。另外兩種策略是關(guān)聯(lián)的，方便我們更復(fù)雜攻擊場景制定策略。

停止攻擊

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

自定義日志

gremlins.js在控制臺記錄了所有g(shù)remin的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()); });

總結(jié)

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

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