Ako mnohí weboví vývojári, aj ja trávim veľa času testovaním používateľské rozhranie stránky, na ktorých pracujem.
Automatizované testovanie je, samozrejme, v tomto procese dobrou pomôckou, ale „bodky bolesti“ v rozhraní sa často nedajú identifikovať iným spôsobom ako pomocou stránky. Znova a znova. Tento proces môže byť veľmi rýchlo nudný. Najmä vypĺňanie formulárov.
Sám som sa do tejto situácie dostal pred pár mesiacmi, keď sme pri výpočte vo Wufoo pridávali k podporovaným menám britskú libru.
Pre overenie bolo potrebné vyplniť veľa polí s menami, adresami, číslami kreditných kariet a všetkým ostatným, čo je zahrnuté v procese výpočtu. Samozrejme, významná časť týchto údajov by sa nemala opakovať:
Na záver som si vyrobil bookmarklet na rýchle vypĺňanie formulárov s testovacími údajmi. (Bookmarklet je JavaScriptový program vytvorený ako záložka v prehliadači, hybrid anglických slov "bookmark" - záložka a "applet" - malá aplikácia. - Približne. preklad.)
Formulár bookmarkletu som si vybral, pretože:
- je ľahké ho preniesť na používateľa;
- je ľahké aktualizovať bez zásahu používateľa;
- beží na akejkoľvek platforme bez úprav.
Záložku si môžete jednoducho vytvoriť vytvorením nového pera na CodePen a vložením niečoho takého do HTML:
Používateľovi stačí pretiahnuť výsledný odkaz do oblasti záložiek svojho prehliadača. Kliknutím na záložku sa kód spustí na aktuálnej stránke.
Pri tomto projekte som sa spoliehal na jQuery, aby bol kód čo najčitateľnejší a najpriaznivejší pre rôzne prehliadače. Ak by niekto chcel čisto JavaScriptovú verziu, napíšte mi komentár a ja sa pokúsim niečo vymyslieť.
Na vytvorenie náhodných údajov som použil úžasnú knižnicu Faker. Jeho implementáciu JavaScriptu nájdete tu.
Základ bookmarkletu
Celý kód môžeme vložiť priamo do odkazu. Ale takáto možnosť bude nepohodlná na čítanie a údržbu. Tiež som chcel mať možnosť vykonávať opravy kódu bez toho, aby som nútil používateľov aktualizovať záložku. Preto je lepšie nechať odkaz na externý súbor v bookmarklete.
Samotný bookmarklet vyzerá takto:
Môj bookmarklet
V ňom načítame skript do tela stránky a pridáme odkaz na externé súbor JavaScript. Treba poznamenať, že ak sa bookmarklet použije na testovanie stránky načítanej cez https , potom musí byť externý súbor JS doručený cez https , inak prehliadač vygeneruje bezpečnostnú chybu.
Je možné, že pri vývoji bookmarkletu budete chcieť použiť lokálny server. V tomto prípade nezabudnite pri distribúcii skriptu nahradiť adresu v odkaze adresou skutočného servera.
Vyplnenie polí
Teraz, keď sme skončili s kartou, ktorá načítava náš skript, môžeme prejsť k samotnému skriptu.
Bude pre nás mimoriadne dôležité, aby sme neporušili nič na stránke, na ktorej bude náš skript fungovať.
Takže to zabalíme samovykonávacia anonymná funkcia. Tým sa zodpovedajúcim spôsobom obmedzí rozsah našich funkcií a premenných:
Veľmi sa mi páči funkcia generátora pseudonáhodných čísel, ktorú v tomto článku poskytuje Chris Coiler. Využime to podľa potreby:
var _rand = function(min, max) ( return Math.floor(Math.random() * (max - min + 1)) + min; )
Teraz načítajme FakerJS. Keďže náš skript závisí od jQuery , môžeme použiť jeho mechanizmus pomalého načítania s funkciou $.getScript:
Teraz, keď nám bol prisľúbený prístup k Fakeru, môžeme použiť jeho metódy na generovanie rôznych hodnoverných mien, miest, adries a iných testovacích údajov.
Opätovné použitie vygenerovaných údajov nám poskytne nasledujúci konštruktor:
var FormData = function(faker) ( this.faker = faker; this.randomWord = faker.Internet.domainWord(); this.username = "fake_" + this.randomWord; this.username += _rand(100,9999); // nastavte túto hodnotu podľa špecifikácií hesla this.password = "pass1234"; this.name = faker.Name.findName(); this.address1 = faker.Address.streetAddress(); this.city = faker.Address.city (); this.state = faker.random.br_state_abbr(); this.zip = faker.Address.zipCode(); // Chris" skutočné číslo kreditnej karty this.cc = "4242 4242 4242 4242"; this.exp1 = _rand(1,12);this.exp2 = _rand(14,22);this.cvv = _rand(100,999); );
Bolo by pekné otestovať začiarkavacie políčka a prepínače aj na našej stránke a vybrať ich náhodné poradie. Aby sme to dosiahli, budeme musieť mierne rozšíriť funkčnosť nášho konštruktora:
// Náhodne vyberte rozbaľovaciu ponuku FormData.prototype.randomizeSelect = function(el) ( var $el = $(el), len = $el.find("option").length - 1; $el.children("option") .prop("vybrané", nepravda) .eq(_rand(1,len + 1)) .prop("vybrané", pravda); ); // Náhodne vyberte prepínač FormData.prototype.randomizeRadio = function(radios) ( radios.not(""); var len = radios.length; radios .prop("checked", false) .eq(_rand(0, len - 1)) .prop("kontrolované", pravdivé); ); // Pridajte nejaký text lorem pre textové oblasti FormData.prototype.randomizeParagraph = function(el) ( $(el).val(this.faker.Lorem.sentence(5)); ); // Randomizácia všetkých polí začiarkavacieho políčka FormData.prototype.randomizeCheckbox = function(el) ( var $el = $(el); $el.prop("checked", false); if (_rand(0,1) === 0 ) ( $el.prop("kontrolované", true); ) ); FormData.prototype.randomizeEmail = function(el) ( // ak chceme rôzne emaily pre všetky emailové polia, môžeme upraviť toto $(el).val("chriscoyier+" + this.randomWord + "@gmail.com"); );
Nakoniec musíme namapovať vygenerované údaje do rôznych polí na formulároch, ktoré testujeme. Extrahujeme všetky polia formulára z našej stránky a vyplníme ich údajmi podľa ich typu a triedy CS S.
V tejto podobe náš skript dokonale implementuje oddelenie medzi mechanizmom na generovanie údajov a mechanizmom ich použitia:
var fillForm = function() ( data = new FormData(window.Faker); $("#name").val(data.name); $("#username").val(data.username); $(" #cc").val(data.cc); $("#exp-1").val(data.exp1); $("#exp-2").val(data.exp2); $("# cvv").val(data.cvv); $("#address").val(data.address1); $("#city").val(data.city); $("#state").val (data.state); $("#zip").val(data.zip); $("#pw").val(data.password); $("#pw-repeat").val(data. heslo); data.randomizeRadio($("")); // Randomizácia všetkých políčok na výber $("select").each(function() ( data.randomizeSelect(this); )); // Náhodná voľba všetkých políčok $( "input) found = true; ) if (!found) ok = false; ) return ok; ) function test(input) ( if (!check(input, "1", "2", "3", "4" , "5", "6", "7", "8", "9", "0", "/", "-", " ")) ( upozornenie ("Vstup nie je v poriadku."); ) inak ( alert("Input ok!"); ) ) // -->