Úvod do testování předního financování

Feb 9, 2026

jak

Strana 1 z 2:

Různé typy frontendových testů (a kdy je používat)

Různé typy frontendových testů (a kdy je používat)
Všeobjímající a prosazování testovací kultury

Testování frontend kód je stále matoucí praxí mnoha vývojářům. Ale s vývojem Frontend se stává složitějším a s vývojáři zodpovědnými za stabilitu a konzistenci, jako je nikdy předtím, musí být testování frontend přijato jako stejný občan v rámci CodeBase. Rozdělujeme své různé testovací možnosti a vysvětlíme, jakou situace jsou nejlépe používány.

Provedení testování je dekiskový termín, který pokrývá různé automatizované zkušební strategie. Některé z nich, jako testování jednotky a integrace, byly přijaté osvědčené postupy v rámci společenství pro rozvoj backend po celá léta. Ostatní strategie jsou novější a vyplývají ze změn v jaké backendové a frontend vývoj se používá nyní.

Na konci tohoto článku byste se měli cítit pohodlně posuzování, které testovací strategie nejlépe hodí s vaším týmem a kódovod. Následující příklady kódu budou psány pomocí Jasmine Framework, ale pravidla a procesy jsou podobné nejvíce testovacích rámců.

Nejlepší kusy uživatelského testování softwaru

01. Testování jednotek

Testování jednotek, jeden z testovacích veteránů, je na nejnižší úrovni všech typů testování. Jeho účelem je zajistit nejmenší bity kódu (tzv. Jednotky) fungovat nezávisle podle očekávání.

Představte si, že máte Lego Set pro dům. Než začnete budovat, chcete se ujistit, že každý jednotlivý kus je účtován (pět červených čtverců, tři žluté obdélníky). Testování jednotek se ujistí, že jednotlivé sady kódu - věcí, jako jsou validace a výpočty vstupu a výpočty - pracují před stavbou většího prvku.

Pomáhá přemýšlet o jednotkových testech v tandemu s "dělat jednu věc dobře" mantra. Máte-li kus kódu s jedinou odpovědností, budete pravděpodobně chtít napsat jednotkový test pro něj.

Podívejme se na následující úryvek kódu, ve kterém píšeme jednotkovou zkoušku pro jednoduchou kalkulačku:

 Popište ("Kalkulačka operace", funkce () {
  To ("by mělo přidat dvě čísla", funkce () {
    Kalkulačka.init ();
    var výsledku = kalkulačka.Addnumbers (7,3);
    očekávat (výsledek) .tobe (10);
  });
});

V našem Kalkulačka Aplikace, chceme zajistit, aby výpočty vždy fungovaly samostatně tak, jak očekáváme. V příkladu chceme se ujistit, že můžeme vždy přesně přidat dvě čísla společně.

První věc, kterou děláme, je popisovat sérii testů, které budeme běžet pomocí Jasmine popsat . To vytváří testovací sady - seskupení testů souvisejících s určitou oblastí aplikace. Pro naši kalkulačku budeme seskupit každý test výpočtu ve vlastním apartmá.

Apartmá jsou skvělou nejen pro organizaci kódu, ale proto vám umožní provozovat apartmá. Pokud pracujete na nové funkce pro aplikaci, nechcete spustit každý test během aktivního vývoje, protože by to bylo velmi časově náročné. Testování apartmá individuálně vám umožní rychleji vyvíjet.

Dále napíšeme naše skutečné testy. Za použití to Funkce, píšeme funkci nebo funkčnost, kterou testujeme. Náš příklad testuje adiční funkci, takže provozujeme scénáře, které potvrzují, že to funguje správně.

Pak napíšeme naše testovací tvrzení, což je místo, kde testujeme, pokud naše kódové funkce, jak očekáváme. Inicializujeme naši kalkulačku a provozujeme naše addnumbers. Funkce se dvěma čísly, které si přejeme přidat. Číslo skladujeme jako výsledek, a pak tvrdit, že se jedná o číslo, které očekáváme (v našem případě, 10).

Li addnumbers. Nepodaří se vrátit správné obrázky, náš test selže. Budeme psát podobné testy pro naše další výpočty - odčítání, násobení a tak dále.

02. Přijetí testy

Pokud jsou testy jednotky jako kontrola každého papíru, přijímací testy kontrolují, zda může být dokončena každá fáze budovy. Jen proto, že všechny kusy jsou účtovány, neznamená, že pokyny jsou řádně spustitelné a umožní vám vytvořit konečný model.

Přijímací testy Procházejí spuštěnou aplikací a zajišťují určené akce, uživatelské vstupy a uživatelské toky jsou dokončeny a fungující.

Jen proto, že naše aplikace addnumbers. Funkce vrátí správné číslo, neznamená, že rozhraní kalkulačky bude určitě fungovat tak, jak se očekává, že poskytne správný výsledek. Co když jsou naše tlačítka zakázána nebo výsledek výpočtu se nezobrazí? Přijímací testy nám pomáhají odpovědět na tyto otázky.

 Popište ("Zaregistrovat se stav selhání", funkce () {
  To ("nemělo umožnit registraci s neplatnými informacemi", funkce () {
    var stránka = návštěva ("/ home");
    page.fill_in ("INPUT [NAME = 'EMAIL']", "NE EMAIL");
    Page.Click ("TLAČÍTKO [TYPE = Odeslat]");
    Page.Click ("TLAČÍTKO [TYPE = Odeslat]");
    Očekávejte (Page.Find ("# Signoterror"). HasClass ("skrytý")). Topefalsy ();
  });
});

Struktura vypadá velmi podobně jako naší jednotkové zkoušky: Definujeme suite s popsat a pak napište náš test v rámci to Funkce, pak provést nějaký kód a zkontrolovat jeho výsledek.

Spíše než testování specifických funkcí a hodnot, zde zde testujeme, zda se konkrétní pracovní postup (sign-up flow) se chová podle očekávání, když vyplníme nějaké špatné informace. Zde se děje více minut, jako jsou validace formuláře, které mohou být testovány jednotkou, stejně jako jakákoli manipulace pro to, co ukazuje náš chybový stav, který ukázal prvek s ID suguperror. .

Přijímací testy jsou skvělým způsobem, jak se ujistěte, že toky klíčových zkušeností vždy fungují správně. Je také snadné přidávat testy kolem okrajových případů a pomoci vašim týmům QA najít ve vaší aplikaci.

Při zvažování toho, co psát akceptační testy pro vaše uživatelské příběhy jsou skvělým místem pro spuštění. Jak váš uživatel komunikovat se svými webovými stránkami a jaký je očekávaný výsledek této interakce? Je to jiné pro testování jednotek, což je lépe přizpůsobeno něco jako požadavky funkcí, jako jsou požadavky kolem ověřeného pole.

03. vizuální regresní testování

Jak je uvedeno v úvodu, některé typy testů jsou jedinečné pro svět frontend. První z nich je vizuální regresní testování. To neovlivňuje váš kód, ale spíše porovnává vykreslené výsledky vašeho kódu - vaše rozhraní - s poskytnutou verzí aplikace ve výrobě, inscenaci nebo předem změněním místního prostředí.

To se obvykle provádí porovnáním screenshotů pořízených v bezhlavém prohlížeči (prohlížeč, který běží na serveru). Nástroje srovnání obrázků pak detekují rozdíly mezi oběma snímky.

Použití nástroje, jako jsou fantomcss, vaše testy určují tam, kde by měl testovací běžec navigovat, vezměte si screenshot a rámec ukazuje rozdíly, které přišly v těchto názorech.

 casper.start ("/ home"). Pak (funkce () {

  // počáteční stav formuláře
  Phantomcss.Screenshot ("# Signupform", "Zaregistrovat se formulář");

  // stiskněte tlačítko Sign Up (mělo by se spouštět chybu)
  Casper.Click ("Tlačítko # Signup");

  // Vezměte si screenshot komponenty UI
  Phantomcss.Screenshot ("# Signupform", "Zaregistrujte se chyba formuláře");

  // vyplňte formulář podle názvu atributů & amp; Předložit
  Casper.Fill ("# Signupform", {
    Jméno: "Alicia Sedlock",
    E-mail: "[email protected]"
  }, skutečný);

  // vzít druhý screenshot stavu úspěchu
 Phantomcss.Screenshot ("# Signupform", "Zaregistrujte se formulář úspěch");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — Tento vizuální regresní rámec ilustruje rozhodovací stromy ve vaší aplikaci, odhalení složitosti vůči těm mimo rozvoj

Na rozdíl od akceptačního a jednotkového testování je vizuální regresní testy těžké těžit z toho, zda budujete něco nového. Vzhledem k tomu, že vaše UI uvidí rychlé a drastické změny v průběhu aktivního vývoje, budete pravděpodobně uložit tyto testy, když jsou díly rozhraní vizuálně dokončeny. Proto jsou testy vizuálních regrese poslední testy, které byste měli psát.

V současné době vyžaduje mnoho vizuálních regresních nástrojů trochu ručního úsilí. Možná budete muset spustit snímek obrazovky, než začnete vývoje na pobočce, nebo ručně aktualizovat základní snímky obrazovky, jak budete provádět změny rozhraní.

To je prostě kvůli povaze vývoje - změny Ui. Může být úmyslné, ale testy pouze "Ano, to je stejné" nebo "Ne, to je jiné". Nicméně, pokud vizuální regrese jsou bodem bolesti v rámci vaší aplikace, může tento přístup zachránit váš týmový čas a úsilí celkově ve srovnání s neustále stanovením regresí.

04. Přístupnost a výkonové testy

Jako kultura a povědomí o předložení testování roste, takže naše schopnost testovat různé aspekty ekosystému. Vzhledem k zvýšenému zaměření přístupnost a výkon v naší technické kultuře, integrující to do testovacího sady pomáhá zajistit, aby tyto koncepty zůstaly prioritou.

Pokud máte problémy s vynucováním rozpočtů výkonů nebo standardů přístupnosti, je to způsob, jak udržet tyto požadavky v čele mysli lidí.

Obě tyto kontroly mohou být buď integrovány do vašeho pracovního postupu s vybudovacími nástroji, jako je grunt a gulp, nebo semi-ručně v rámci terminálu. Pro rozpočty výkonu, nástroj jako Grunt-Perfbudget vám dává možnost provozovat vaše stránky prostřednictvím webpagetestu automaticky v rámci zadaného úkolu.

Pokud však nepoužíváte běžec úkol, můžete také uchopit perfbudget jako samostatný modul NPM a spustit testy ručně.

Zde je to, co to vypadá, že to spustí přes terminál:

 Perfbudget -url http://www.aliciability.com -Key [Webpagetest API klíč] --SpeedIndex 2000 -Render 400

A podobně, nastavení přes GRUNT:

perfbudget: {
  Výchozí hodnota: {
    Možnosti: {
      URL: 'http://aliciability.com',
      Klíč: 'Webpagetest API klíč',
      Rozpočet: {
        SpeedIndExex: '2000',
        Vykreslení: '400'
      }
    }
  }
}

[...]

Grunt.registerTask ('výchozí', ['jsint', 'perfbudget']);

Stejné možnosti jsou k dispozici pro testování přístupnosti. Takže pro PA11Y, můžete buď spustit pa11y. Příkaz ve vašem prohlížeči pro výstup nebo nastavení úkolu pro automatizaci tohoto kroku. V terminálu:

 pa11y alicabilitace.com

// jako příkaz JavaScript po instalaci NPM

var pa11y = požadovat ('pa11y'); // vyžadují PA11Y.
var test = pa11y (); // dostat pa11y připraven nastavit

test.run ('alicability.com', funkce (chyba, výsledky) {
  // Přihlásit naše analyzujte své výsledky
});

Většina nástrojů v těchto kategoriích je poměrně plug-and-play, ale také vám poskytne možnost přizpůsobit, jak se testy spustit - například, můžete je nastavit, aby ignorovali určité standardy WCAG.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — Rote.JS je populární srovnávací knihovna obrazu a dává vám hodně kontroly nad tím, co spouští vizuální diferenciaci

Další stránka: Jak zavést testování do pracovního postupu

Aktuální stránka: Různé typy frontendových testů (a kdy je používat)

Další strana Všeobjímající a prosazování testovací kultury

Úvod do testování předního financování

01. Testování jednotek

02. Přijetí testy

03. vizuální regresní testování

04. Přístupnost a výkonové testy

jak - Nejoblíbenější články

Jak nastavit místní rozvojové prostředí

Jak vytvořit tekuté účinky s webglem

Jak modelovat pojetí umění v kině 4d

Jak rychle skici ruce

Jak používat textury ve Photoshopu

Vytvořte tkázový textový efekt s JavaScriptem

Jak vytvořit úžasné efekty s tvary CSS

Vytvořte autoportrét jen 4 barvy

Kategorie