Johdatus Etupääkokeeseen

Sep 16, 2025

Miten tehdään

Sivu 1/2:

Eri tyyppisiä etuja (ja milloin niitä käytetään)

Eri tyyppisiä etuja (ja milloin niitä käytetään)
Testauskulttuurin omaksuminen ja täytäntöönpano

Testaus Etupääkoodi on edelleen hämmentävä käytäntö monille kehittäjille. Mutta etureunasta tulee monimutkaisempi ja kehittäjä, jotka ovat vastuussa vakaudesta ja johdonmukaisuudesta, kuten koskaan ennen, etuosatestaus on omaksua yhtäläisenä kansalainen koodibaseissasi. Me hajotamme eri testausvaihtoehdot ja selitämme, mitä tilanteita käytetään parhaiten.

Etupäätestaus on peiton termi, joka kattaa erilaiset automaattiset testausstrategiat. Jotkut näistä, kuten yksiköstä ja integraatiotestauksesta ovat olleet hyväksytyt parhaat käytännöt taustakehitysyhteisössä vuosia. Muut strategiat ovat uudempia, ja ne ovat muuttuneet muutoksista, mitä Backend ja Front Development käytetään nyt.

Tämän artikkelin loppuun mennessä sinun pitäisi tuntea olonsa mukavaksi arvioida, mitkä testausstrategiat sopivat parhaiten tiimisi ja koodinvastkojen kanssa. Seuraavat koodin esimerkit kirjoitetaan Jasmine-kehyksen avulla, mutta säännöt ja prosessit ovat samankaltaisia useimmissa testauskehyksissä.

Paras kappaletta käyttäjän testausohjelmisto

01. Yksikkö testaus

Yksikön testaus, yksi testausvähirkastus, on alhaisin kaikilla testaustyypeillä. Sen tarkoituksena on varmistaa, että koodin pienimmät bittiä (nimeltään yksiköt) toimii itsenäisesti odotetusti.

Kuvittele, että sinulla on talon lego. Ennen kuin aloitat rakennuksen, haluat varmistaa, että jokainen yksittäinen kappale on osuus (viisi punaista neliötä, kolme keltaista suorakulmiota). Yksikkö-testaus varmistaa, että yksittäiset koodit - asiat, kuten syöttövalidat ja laskelmat - toimivat tarkoitus ennen suuremman ominaisuuden rakentamista.

Se auttaa ajattelemaan yksikkökokeita tandemissa "Tee yksi asia hyvin" mantraa. Jos sinulla on koodi, jossa on yksi vastuu, todennäköisesti haluat kirjoittaa sen yksikkötestin.

Katsotaanpa seuraavaa koodinpäästä, jossa kirjoitamme yksikkökokeita yksinkertaiselle laskimelle:

 Kuvaile ("Laskinoperaatiot", toiminto () {
  Sen ("pitäisi lisätä kaksi numeroa", toiminto () {
    Laskin.Init ();
    var-tulos = laskuri.Addumbers (7,3);
    odottaa (tulos) .Tobe (10);
  });
});

Meidän Laskin Hakemus, haluamme varmistaa, että laskelmat toimivat aina itsenäisesti, miten odotamme. Esimerkissä haluamme varmistaa, että voimme aina lisätä tarkasti kaksi numeroa yhteen.

Ensimmäinen asia, jota teemme, kuvaile sarjaa testejä, joita aiomme ajaa käyttämällä Jasmine: tä kuvata . Tämä luo testisarjan - hakemuksen tiettyyn alueeseen liittyvien testien ryhmittely. Laskimemme osalta ryhmäämme jokaisen laskentatestin omassa sviitissään.

Sviitit ovat hyviä paitsi koodiorganisaatiolle, mutta koska ne mahdollistavat sviitit yksin. Jos työskentelet uutta ominaisuutta sovellukseen, et halua käyttää kaikkia testiä aktiivisen kehityksen aikana, sillä se olisi hyvin aikaa vievää. Testaus sviitit yksilöllisesti voit kehittää nopeammin.

Seuraavaksi kirjoitamme todelliset testit. Käyttämällä se Toiminto, kirjoitamme ominaisuuden tai toiminnallisuuden testaamme. Esimerkkinämme testaa lisäystoiminnon, joten voimme suorittaa skenaarioita, jotka vahvistavat, että se toimii oikein.

Sitten kirjoitamme testiselosteemme, jossa testatamme, jos koodi toimii kuten odotamme. Aloittelemme laskimemme ja suoritamme Addnumbers Toiminto kahdella numerolla, jonka haluamme lisätä. Säilytämme numeron tuloksena ja väittävät sitten, että tämä on yhtä suuri kuin odotuksemme (tapauksessamme 10).

Jos Addnumbers Ei palauta oikeat luvut, testi epäonnistuu. Kirjoitamme samanlaisia testejä muille laskelmillemme - vähennys, kertolasku ja niin edelleen.

02. Hyväksymistestit

Jos yksikkökokeet ovat kuin kunkin lego-kappaleen tarkistaminen, hyväksymistestit tarkistavat, jos jokainen rakennuksen vaihe voidaan suorittaa. Vain siksi, että kaikki kappaleet kirjataan, ei tarkoita, että ohjeet ovat asianmukaisesti suoritettavissa ja mahdollistavat lopullisen mallin rakentamisen.

Hyväksymistestit Käy läpi käynnissä oleva sovellus ja varmista, että nimettyjen toimintojen, käyttäjätulot ja käyttäjävirrat ovat valmiit ja toimivat.

Vain siksi, että hakemuksesi Addnumbers Toiminto palauttaa oikean numeron, ei tarkoita, että laskimen käyttöliittymä toimii ehdottomasti odotetusti oikean tuloksen perusteella. Entä jos painikkeemme on poistettu käytöstä tai laskentatulos ei näy? Hyväksymistestit auttavat meitä vastaamaan näihin kysymyksiin.

 Kuvaile ("Rekisteröitymistila", toiminto () {
  Sen ("ei pitäisi sallia rekisteröityä virheellisillä tiedoilla", toiminto () {
    Var Page = vierailu ("/ home");
    Page.fill_in ("Input [NAME =" Sähköposti "]", "Ei sähköposti");
    Page.Click ("Painike [tyyppi = lähetä]");
    Page.Click ("Painike [tyyppi = lähetä]");
    odottaa (sivu.find ("# signuperror"). Hasclass ("piilotettu")). Tobefalsy ();
  });
});

Rakenne näyttää hyvin samankaltaisesta yksikkökokeesta: Määritämme sviitin kanssa kuvata ja kirjoita sitten testi se Toiminto, suorita sitten jokin koodi ja tarkista sen lopputulos.

Sen sijaan, että testata tiettyjä toimintoja ja arvoja, tässä me testaamme, onko tietty työnkulku (kirjautumisvirta) käyttäytyy odotetulla tavalla, kun täytämme joitakin huonoja tietoja. Tässä on enemmän minuuttitoimia, kuten lomakkeen validoinnit, jotka voivat olla yksikkö testattu, sekä kaikki käsittelytiedot, mikä osoittaa virheilmoituksemme, osoittamalla elementillä tunnus Sigtuperror .

Hyväksymistestit ovat erinomainen tapa varmistaa, että keskeiset kokemusvirrat toimivat aina oikein. On myös helppo lisätä testejä reuna-tapausten ympärille ja auttaa QA-tiimisi löytämään ne hakemuksesi.

Kun otetaan huomioon, mitä kirjoittamalla hyväksymistestit, käyttäjän tarinat ovat erinomainen paikka aloittaa. Miten käyttäjä toimii vuorovaikutuksessa verkkosivustosi kanssa ja mikä on kyseisen vuorovaikutuksen odotettu lopputulos? Se on erilainen kuin yksikön testaus, mikä vastaa paremmin jotain funktiovaatimuksia, kuten validoidun kentän vaatimukset.

03. Visuaalinen regressiotestaus

Kuten johdannossa mainittiin, jotkin testaustyypit ovat ainutlaatuisia eturahaa. Ensimmäinen näistä on visuaalinen regressiotestaus. Tämä ei testaa koodiasi, vaan vertailee koodin tekemistä - käyttöliittymänne - liitännän ansiosta valmistus, lavastus tai ennalta muuttunut paikallinen ympäristö.

Tämä tehdään tyypillisesti vertaamalla sydänlähtöisessä selaimessa otettuja kuvakaappauksia (palvelimessa oleva selain). Kuvan vertailutyökalut havaitsevat näiden kahden laukauksen väliset erot.

Käyttämällä työkalua, kuten Phantomcss, testit täsmentävät, missä testisyöttöön tulee siirtyä, ota kuvakaappaus ja kehys osoittaa, että nämä näkymät syntyivät erimielisyydet.

 casper.start ("/ home"). Sitten (toiminto () {

  // Ensimmäinen tila
  Phantomcss.screenshot ("# SignUpform", "Rekisteröidy lomake");

  // Osoita Rekisteröidyn painiketta (pitäisi laukaista virhe)
  casper.click ("Button # SignUp");

  // Ota kuvakaappaus UI-komponentti
  Phantomcss.screenshot ("# SignUpform", "Rekisteröidy lomakkeen virhe");

  // Täytä lomake nimellä Attributes & amp; Lähetä
  casper.fill ("# signupform", {
    Nimi: "Alicia Sedlock",
    Sähköposti: "[email protected]"
  }, totta);

  // Ota toinen kuvakaappaus menestystilasta
 Phantomcss.screenshot ("# SignUpform", "Rekisteröidy lomakkeen menestys");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — Tämä visuaalinen regressiokehys kuvaa hakemuksenne päätöksen puita, paljastaa monimutkaisuuden kehityksen ulkopuolelle

Toisin kuin hyväksymis- ja yksikön testaus, visuaalinen regressiotestaus on vaikea hyötyä, jos rakennat jotain uutta. Koska käyttöliittymäsi näkevät nopeat ja drastiset muutokset aktiivisen kehityksen aikana, voit todennäköisesti tallentaa nämä testit, kun rajapinnan kappaleet ovat visuaalisesti täydellisiä. Siksi visuaaliset regressiotestit ovat viimeiset testit, jotka sinun pitäisi kirjoittaa.

Tällä hetkellä monet visuaaliset regressiotyökalut vaativat hieman manuaalista työtä. Sinun on ehkä suoritettava kuvakaappaus, ennen kuin aloitat sivukonttorin kehityksen tai päivittää manuaalisesti peruskuvakaappaukset, kun teet muutoksia käyttöliittymään.

Tämä johtuu yksinkertaisesti kehityksen luonteen vuoksi - muutokset Ui Voi olla tarkoituksellista, mutta testit tietävät vain "kyllä, tämä on sama" tai "ei, tämä on erilainen". Kuitenkin, jos visuaaliset regressiot ovat hakemuksesi kipupiste, tämä lähestymistapa voi säästää tiimi aikaa ja vaivaa kokonaisuudessaan verrattuna jatkuvasti korjaamaan regressioita.

04. Esteettömyys ja suorituskyvyn testit

Kulttuuri ja tietoisuus eturyhmän ympärillä kasvaa, joten kykymme testata erilaisia näkökohtia ekosysteemin. Kun otetaan huomioon lisääntynyt keskittyminen esteettömyys Ja suorituskyky teknisessä kulttuurissamme, integroimalla tämän testaussarjalla auttaa varmistamaan, että nämä käsitteet pysyvät ensisijaisesti.

Jos sinulla on ongelmia, jotka noudattavat suorituskykyä tai esteettömyysvaatimuksia, tämä on tapa pitää nämä vaatimukset ihmisten mielien eturintamassa.

Molemmat tarkastukset voidaan joko integroida työnkulkuasi rakentamalla työkaluja, kuten Grunt ja Gulp tai puoliksi manuaalisesti terminaalin sisällä. Suoritusarvoista budjetteista, kuten GRUNN-PERFUDGET, antaa sinulle mahdollisuuden käyttää sivustossasi Web -Getestin kautta automaattisesti tietyn tehtävän sisällä.

Kuitenkin, jos et käytä tehtävän juoksijaa, voit myös tarttua PERFBUDGE ON SISÄLTÄVÄ NPM-moduuli ja suorittaa testit manuaalisesti.

Tässä on se, mitä se näyttää suorittamaan tätä terminaalin kautta:

 PERFBUDGET --URL http://www.aliteetteet.com - näppäin [Webpagetest API Key] --SpeedIndex 2000 --Render 400

Ja samoin perustamalla Grunt:

PERFUDGET: {
  Oletus: {
    Vaihtoehdot: {
      URL: 'http://alication.com ",
      Näppäin: "Webpagetest API Key",
      Talousarvio: {
        SpeedIndex: "2000",
        Render: "400"
      }
    }
  }
}

[...]

GRUNT.REGISTERTERT ("oletus", ["jshint", "perfbudget"]);

Samat vaihtoehdot ovat käytettävissä esteettömyyden testaukseen. Joten Pa11Y, voit joko ajaa pa11 Komento selaimessasi lähtöä tai määrittää tehtävän tämän vaiheen automatisoimiseksi. Terminaalissa:

 Pa11y alication.com

// JavaScript-komentona NPM-asennuksen jälkeen

var pa11y = vaatia ('pa11y'); // vaatia pa11y
var testi = pa11y (); // Hanki Pa11Y valmis asettamaan

test.run ('Alication.com ", toiminto (virhe, tulokset) {
  // Kirjaudu takaamaan tulokset
});

Useimmat näissä luokissa olevat työkalut ovat melko plug-and-toisto, mutta myös antaa sinulle mahdollisuuden muokata, miten testit voivat ajaa - esimerkiksi voit asettaa ne sivuuttamaan tiettyjä WCAG-standardeja.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — Resemble.js on suosittu kuvavertailu kirjasto ja antaa sinulle paljon valvontaa, mikä laukaisee visuaalisen erilaisuuden

Seuraava sivu: Miten esitellä testaus työnkulkuun

Tämänhetkinen sivu: Eri tyyppisiä etuja (ja milloin niitä käytetään)

Seuraava sivu Testauskulttuurin omaksuminen ja täytäntöönpano

Johdatus Etupääkokeeseen

01. Yksikkö testaus

02. Hyväksymistestit

03. Visuaalinen regressiotestaus

04. Esteettömyys ja suorituskyvyn testit

Miten tehdään - Suosituimmat artikkelit

Piirrä kontrastin teho

Web-ilmoituksen poistaminen käytöstä Windows, MacOS ja Android

Aloita ruosteella

Kuinka luoda karvainen sarjakuvahahmo

12 Vinkkejä realistiseen 3D-valaistukseen

Kuinka luoda värikkäitä maailmoja, jotka kertovat tarinan

Kuinka maalata maagisia hehkuja

Aloita prototyyping Adobe XD: ssä

Luokat