Bevezetés a frontend teszteléshez

Feb 9, 2026

kézikönyv

Page 1 of 2:

Különböző típusú frontend tesztek (és mikor kell használni őket)

Különböző típusú frontend tesztek (és mikor kell használni őket)
A vizsgálati kultúra átölelése és érvényesítése

A Frontend kód tesztelése még mindig zavaró gyakorlat sok fejlesztő számára. De frontend fejlesztés egyre összetettebb és a fejlesztők felelős stabilitást és mint még soha, frontend vizsgálatot kell magáévá egyenrangú polgár a codebase. Megszakítjuk a különböző tesztelési lehetőségeket, és megmagyarázzuk, milyen helyzetekben vannak a legjobban.

A frontend tesztelés egy takaró kifejezés, amely számos automatizált tesztelési stratégiát tartalmaz. Ezek közül néhány, például az egység és az integrációs tesztelés évek óta elfogadott legjobb gyakorlata volt a Backend Fejlesztési Közösségen belül. Más stratégiák újabbak, és a hátrányos és a frontend fejlesztésének változásaiból származnak.

A cikk végére kényelmesen értékelnie kell, hogy melyik tesztelési stratégiák megfelelnek a legjobbnak és a kódzsákoknak. A következő kód példákat írnak a jázmin keretrendszer segítségével, de a szabályok és folyamatok hasonlóak a legtöbb vizsgálati keretrendszeren.

A legjobb felhasználói tesztelési szoftverek

01. egységvizsgálat

Az egység tesztelése, az egyik vizsgáló veterán, az összes teszttípus legalacsonyabb szintjén van. Célja, hogy biztosítsák a kódok legkisebb bitjeit (nevezett egységek) függetlenül a várt módon.

Képzeld el, hogy van egy LEGO-t egy házhoz. Mielőtt elkezdené az épületet, meg akarja győződni arról, hogy minden egyes darabot elszámolják (öt piros négyzet, három sárga téglalap). Az egység tesztelése biztosítja, hogy az egyes kódok - dolgok, mint a bemeneti érvényesítések és számítások - a nagyobb jellemző építése előtt dolgozik.

Segít gondolkodni az egységvizsgálatokról a Tandem-ben a "Egy dolog jól" mantrával. Ha van egy kódja egyetlen felelősséggel, valószínűleg egy egységvizsgálatot szeretne írni.

Nézzük meg a következő kódrészletet, amelyben egy egyszerű számológép egy egységvizsgálatot írunk:

 leírja ("Számológép műveletek", funkció () {
  ("Két számot kell hozzáadnia", funkció () {
    Számológép.Init ();
    var eredmény = számológép.addinumbers (7,3);
    elvárja (eredmény) .tobe (10);
  });
});

Miénkben Számológép Alkalmazás, szeretnénk biztosítani, hogy a számítások mindig függetlenül működjenek az általunk elvárható módon. A példában meg akarjuk győződni arról, hogy mindig két számot tudunk hozzáadni.

Az első dolog, amit csinálunk, leírjuk a tesztek sorozatát, amelyeket Jasmine használatával fogunk futtatni leír . Ez létrehoz egy tesztcsomagot - az alkalmazás egy adott területével kapcsolatos tesztek csoportosítása. Számológépünk esetében mindegyik számítási tesztet saját lakosztályban csoportosítjuk.

A lakosztályok nem csak a kódszervezéshez nagyok, hanem azért, mert lehetővé teszik, hogy saját lakosztályokat futhassanak. Ha egy alkalmazás új funkcióján dolgozik, akkor nem szeretne minden tesztet futtatni az aktív fejlesztés során, mivel ez nagyon időigényes lenne. A Suites egyedileg történő tesztelése lehetővé teszi, hogy gyorsabban fejlődjön.

Ezután írjuk a tényleges tesztünket. Használni a azt Funkció, írjuk a funkciót vagy a funkcionalitást, amit tesztelünk. Példánk teszteli az adagolási funkciót, így futtatunk olyan forgatókönyveket, amelyek megerősítik, hogy megfelelően működik.

Ezután írjuk meg a tesztmegállapodást, amely akkor teszteljük, ha kódolunk, ahogy elvárjuk. A számológépünket inicializáljuk, és futtattuk Addnumbers funkció a két számmal, amit hozzá kívánunk adni. A számot az eredményeként tároljuk, majd azt állítjuk, hogy ez megegyezik a várható számmal (a mi esetünkben, 10).

Ha Addnumbers Nem adja vissza a helyes számokat, tesztünk sikertelen lesz. Hasonló teszteket írnánk más számításokhoz - kivonás, szorzás és így tovább.

02. Elfogadási tesztek

Ha az egységvizsgálatok olyanok, mint minden LEGO darab ellenőrzése, az elfogadási tesztek ellenőrzik, hogy az épület minden szakasza befejeződött-e. Csak azért, mert az összes darabot elszámolják, nem jelenti azt, hogy az utasítások megfelelően futtathatók, és lehetővé teszik a végső modell felépítését.

Az átvételi tesztek a futó alkalmazáson keresztül mennek keresztül, és biztosítják a kijelölt műveleteket, a felhasználói bemenetek és a felhasználói áramlások elvégezhetők és működnek.

Csak azért, mert az alkalmazásunk Addnumbers A funkció visszaadja a megfelelő számot, nem jelenti azt, hogy a számológép felület biztosan működik, hogy a megfelelő eredményt adja meg. Mi van, ha a gombok le vannak tiltva, vagy a számítási eredmény nem jelenik meg? Az elfogadási tesztek segítenek megválaszolni ezeket a kérdéseket.

 leírja ("jelentkezési hibaállapot", funkció () {
  ("Nem szabad engedélyezni az érvénytelen információkat", funkció () {
    var oldal = látogatás ("/ home");
    Page.Fill_in ("INPUT [NAME = '' '' ']", "nem e-mail");
    oldal.click ("gomb [type = submit]");
    oldal.click ("gomb [type = submit]");
    elvárják (oldal.Find ("# signuperror"). Hasclass ("rejtett")). Tobefalsy ();
  });
});

A szerkezet nagyon hasonlít az egység tesztünkhöz: egy lakosztályt definiálunk leír , akkor írja be a tesztünket a azt funkció, majd hajtson végre néhány kódot, és ellenőrizze az eredményét.

Ahelyett, hogy a konkrét funkciókat és értékeket tesztelné, azonban itt vizsgáljuk meg, hogy egy adott munkafolyamat (feliratkozási áramlás) úgy viselkedik, hogy várt módon viselkedjen, ha néhány rossz információt töltünk. Itt több perces cselekvés történik, például olyan formanyomtatványok, amelyek az egység teszteltek, valamint minden olyan kezelést, amely megmutatja a hibaállapotunkat, amelyet az azonosítóval végzett elem mutatja signuperror .

Az elfogadási tesztek nagyszerű módja annak, hogy a kulcsfontosságú élményáramok mindig megfelelően működjenek. Szintén könnyű hozzáadni a teszteket az élbetegek körül, és segíthet a QA csapatainak megtalálni őket az alkalmazásában.

Ha figyelembe vesszük, hogy mit írhat az elfogadási tesztek, akkor a felhasználói történetek nagyszerűen kezdődnek. Hogyan kapcsolódik a felhasználó a webhelyével, és mi az a kölcsönhatás várható eredménye? Ez különbözik az egységvizsgálathoz, ami jobban illeszkedik valami hasonló funkcióigényhez, például a validált mező körüli követelményekhez.

03. Vizuális regressziós tesztelés

Amint azt a bevezetés is említette, egyes típusú vizsgálatok egyedülállóak a Frontend World számára. Ezek közül az első a vizuális regressziós tesztelés. Ez nem teszteli a kódját, hanem összehasonlítja a kód megjelenésű eredményét - az interfész - az alkalmazás renderelt változatát a termelés, az állítás, vagy az előre megváltozott helyi környezetben.

Ezt általában a fejléces böngészőben (a kiszolgálón futó böngésző) képernyőképek összehasonlításával végezzük. A kép összehasonlító eszközei akkor érzékelik a két felvétel közötti különbséget.

Olyan eszköz használatával, mint például a Phantomcss, a tesztek megadják, ahol a teszt futó navigálnia kell, vegyen egy képernyőt, és a keret megjeleníti az e nézetekben szereplő különbségeket.

 Casper.start ("/ Home"). Ezután (funkció () {

  // kezdeti forma
  Phantomcss.screenshot ("# signupform", "feliratkozási űrlap");

  // nyomja meg a Regisztráció gombot (hibát okozhat)
  casper.click ("Button # signup");

  // Vegyünk egy képernyőképet az UI komponensről
  fantomcss.screenshot ("# signupform", "Regisztráció űrlap hiba");

  // Töltse ki az űrlapot név attribútumokkal & amp; Beküldés
  casper.fill ("# signupform", {
    Név: "Alicia Sedlock",
    E-mail: "[email protected]"
  }, igaz);

  // Vegyünk egy második screenshot of success állam
 Phantomcss.screenshot ("# signupform", "Regisztrációs forma siker");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — Ez a vizuális regressziós keretrendszer az alkalmazásban lévő döntési fákat szemlélteti, amely komplexitást mutat a fejlődésen kívüli

Ellentétben az elfogadás és az egység tesztelés, a vizuális regressziós tesztelés nehéz kihasználni, ha valami újat épít. Mivel az UI az aktív fejlesztés során gyors és drasztikus változásokat fog látni, valószínűleg mentheti ezeket a teszteket, ha az interfész darabjai vizuálisan teljesek. Ezért a vizuális regressziós tesztek az utolsó tesztek, amelyeket írni kell.

Jelenleg számos vizuális regressziós eszköz egy kis kézi erőfeszítést igényel. Előfordulhat, hogy a képernyőkép befogását el kell futtatnia, mielőtt elkezdené a fióktelepet, vagy manuálisan frissíti a kiindulási képernyőképeket, amikor módosítja az interfészt.

Ez egyszerűen a fejlesztés jellege miatt - a Ui lehet szándékos, de a tesztek csak azt tudják, hogy "igen, ez ugyanaz" vagy "nem, ez más. Ha azonban a vizuális regressziók fájdalmat jelentenek az Ön alkalmazásában, akkor ez a megközelítés megmentheti a csapat idejét és erőfeszítéseit összességében, összehasonlítva a regressziók folyamatos rögzítéséhez.

04. Hozzáférhetőség és teljesítményvizsgálatok

A FRONTEND tesztelés kultúrájának és tudatosságának növekedése, így képesek az ökoszisztéma különböző aspektusainak tesztelésére. Figyelembe véve a fokozott összpontosítást megközelíthetőség És a teljesítmény a technikai kultúránkban, amely ezt a tesztelési csomagba integrálja, biztosítja, hogy ezek a fogalmak továbbra is prioritássá váljanak.

Ha problémái vannak a teljesítményi költségvetések vagy a hozzáférhetőségi szabványok végrehajtása érdekében, ez a módja annak, hogy ezeket a követelményeket az emberek elméjének élvonalában tartsák.

Mindkét ellenőrzés beilleszthető a munkafolyamatba, olyan építőeszközökkel, mint a grunt és a gulp, vagy a terminálon belüli félig manuálisan. A teljesítményköltségvetésekhez olyan eszköz, mint a Grunt-PerfBudget lehetővé teszi, hogy a weboldalon keresztül automatikusan futtassa a weboldalt a weboldalt.

Ha azonban nem használ egy feladat futót, akkor a perfbudget önálló NPM modulként is megragadhatja, és manuálisan futtathatja a teszteket.

Itt van, hogy ezt néz ki a terminálon keresztül:

 Perfbudget --url http://www.alicility.com - [webpagetest API kulcs] --speedindex 2000 --Render 400

És hasonlóképpen, felállítva a grunt:

PerfBudget: {
  Alapértelmezés: {
    lehetőségek: {
      URL: "http://aliciability.com",
      Kulcs: "WebPagetest API KEY",
      költségvetés: {
        SpeedIndex: "2000",
        Render: '400'
      }
    }
  }
}

[...]

grunt.registertask ("alapértelmezett", ['jshint', 'perfbudget']);

Ugyanezek a lehetőségek állnak rendelkezésre az akadálymentesítési teszteléshez. Tehát a PA11Y-hez, akkor futtathatja a pa11y Parancs a böngészőjében a kimenethez, vagy állítsa be a feladatot, hogy automatizálja ezt a lépést. A terminálban:

 PA11Y AliChiangle.com

// JavaScript parancsként az NPM telepítése után

var pa11y = szükséges ("PA11Y"); // PA11Y-t igényel
VAR TESZT = PA11Y (); // Get Pa11y készen áll a beállításra

test.run ("Alicity.com", funkció (hiba, eredmények) {
  // naplózza az elemezését
});

Ezeknek a kategóriáknak a legtöbb eszköze meglehetősen plug-and-play, de lehetőséget ad arra, hogy testreszabhatja a tesztek futtatását - például beállíthatja őket, hogy figyelmen kívül hagyják az egyes WCAG szabványokat.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — A Messemble.js egy népszerű képösszehasonlító könyvtár, és sok irányítást ad a vizuális differenciálódás kiváltására

Következő oldal: Hogyan lehet tesztelni a munkafolyamatot

Aktuális oldal: Különböző típusú frontend tesztek (és mikor kell használni őket)

Következő oldal A vizsgálati kultúra átölelése és érvényesítése

Bevezetés a frontend teszteléshez

01. egységvizsgálat

02. Elfogadási tesztek

03. Vizuális regressziós tesztelés

04. Hozzáférhetőség és teljesítményvizsgálatok

kézikönyv - Most Popular Articles

Hogyan javíthatja a karaktert művészetét

Jump Start reagál az EXPO-val

Hozzon létre egy egyszerű színtáblázat

Rajzoljon öt perc alatt

Hogyan lehet létrehozni egy retro logó affinitás tervezővel

Hogyan festeni egy álomszerű fantázia erdő jelenetet

Hogyan lehet a WordPress webhely többnyelvű

Hogyan készítsünk 3d hajat és szőrme

Kategóriák