En introduksjon til frontend testing

Jan 31, 2026

hvordan

[1. 3]

Side 1 av 2:

Ulike typer frontend tester (og når du skal bruke dem)

Ulike typer frontend tester (og når du skal bruke dem)
Omfavne og håndheve en testkultur

Testing Frontend-koden er fortsatt en forvirrende praksis for mange utviklere. Men med fronendutvikling blir mer komplisert og med utviklere som er ansvarlige for stabilitet og konsistens som aldri før, må frontdemessige testing bli omfavnet som en like statsborger i kodebasen din. Vi bryter ned dine forskjellige testalternativer og forklarer hvilke situasjoner de er best brukt til.

Frontend testing er et teppe term som dekker en rekke automatiserte teststrategier. Noen av disse, som enheten og integrasjonstesting, har vært en akseptert beste praksis innenfor sikkerhetsutviklingssamfunnet i mange år. Andre strategier er nyere, og stammer fra endringene i hvilken backend og frontend utvikling brukes til nå.

Ved slutten av denne artikkelen bør du føle deg komfortabel å vurdere hvilke teststrategier som passer best med teamet ditt og kodesbaser. Følgende kodeeksempler vil bli skrevet ved hjelp av Jasmine-rammeverket, men reglene og prosessene er like på tvers av de fleste testrammer.

Beste deler av brukertesting programvare

01. Enhetstesting

Enhetstesting, en av testveteranene, er på laveste nivå av alle testtyper. Formålet er å sikre at de minste biter av koden din (kalt enheter) fungerer uavhengig som forventet.

Tenk deg at du har et LEGO-sett for et hus. Før du begynner å bygge, vil du sørge for at hvert enkelt stykke er regnskapsført (fem røde firkanter, tre gule rektangler). Enhetstesting er å sørge for at enkelte sett med kode - ting som inngangsvalideringer og beregninger - jobber som beregnet før du bygger den større funksjonen.

Det bidrar til å tenke på enhetstester i tandem med "gjør en ting godt" mantra. Hvis du har et stykke kode med et enkelt ansvar, vil du sannsynligvis skrive en enhetstest for den.

La oss se på følgende kodestykke, der vi skriver en enhetstest for en enkel kalkulator:

 Beskriv ("Kalkulatoroperasjoner", funksjon () {
  det ("bør legge til to tall", funksjon () {
    Kalkulator.init ();
    var resultat = kalkulator.Addnumbers (7,3);
    Forvent (resultat) .tobe (10);
  });
});

I vår Kalkulator Søknad, vi vil sikre at beregningene alltid fungerer uavhengig som vi forventer. I eksemplet vil vi sørge for at vi alltid kan legge til to numre sammen nøyaktig.

Det første vi gjør er å beskrive serien av tester vi skal løpe ved å bruke Jasmine beskrive . Dette skaper en test suite - en gruppering av tester relatert til et bestemt område av søknaden. For vår kalkulator vil vi gruppere hver beregningstest i sin egen suite.

Suitene er gode, ikke bare for kodeorganisasjonen, men fordi de gjør at du kan kjøre suiter på egenhånd. Hvis du jobber med en ny funksjon for et program, vil du ikke kjøre hver test under aktiv utvikling, da det ville være veldig tidkrevende. Testing suiter enkeltvis lar deg utvikle seg raskere.

Deretter skriver vi våre faktiske tester. Bruker den Funksjon, vi skriver funksjonen eller funksjonaliteten vi tester. Vårt eksempel tester ut tilleggsfunksjonen, så vi vil kjøre scenarier som bekrefter at den fungerer som den skal.

Vi skriver deretter vår test påstand, som er der vi tester om koden vår fungerer som vi forventer. Vi initialiserer vår kalkulator, og kjører vår AddNumbers. Funksjon med de to tallene vi ønsker å legge til. Vi lagrer nummeret som resultatet, og hevder at dette er lik nummeret vi forventer (i vårt tilfelle 10).

Hvis AddNumbers Unnlater å returnere de riktige tallene, vil testen mislykkes. Vi vil skrive lignende tester for våre andre beregninger - subtraksjon, multiplikasjon og så videre.

02. Godkjenningstester

Hvis enhetstester er som å sjekke hvert lego-stykke, kontrollerer akseptprøver om hvert stadium av bygningen kan fullføres. Bare fordi alle brikkene er regnskapsført, betyr ikke at instruksjonene er riktig kjørbare og vil tillate deg å bygge den endelige modellen.

Acceptance testene går gjennom kjøringsprogrammet ditt og sørg for utpekte handlinger, brukerinnganger og brukerflyt er fullført og fungerer.

Bare fordi søknaden vår AddNumbers Funksjonen returnerer riktig nummer, betyr ikke at kalkulatorgrensesnittet vil definitivt fungere som forventet å gi det riktige resultatet. Hva om våre knapper er deaktivert, eller beregningsresultatet blir ikke vist? Godkjennelsestester hjelper oss med å svare på disse spørsmålene.

 Beskriv ("Registrer feil tilstand", funksjon () {
  det ("bør ikke tillate registrering med ugyldig informasjon", funksjon () {
    var side = besøk ("/ home");
    side.fill_in ("input [navn = 'e-post']", "ikke en e-post");
    side. Klikk på ("Knapp [Type = Send]");
    side. Klikk på ("Knapp [Type = Send]");
    Forvent (side.find ("# Signuperror"). HasClass ("skjult")). Tobrevalsy ();
  });
});

Strukturen ser veldig ut som vår enhetstest: Vi definerer en suite med beskrive , så skriv vår test i den Funksjon, og utfør deretter noen kode og kontroller utfallet.

I stedet for å teste rundt spesifikke funksjoner og verdier, men her tester vi for å se om en bestemt arbeidsflyt (en registreringsflyt) oppfører seg som forventet når vi fyller ut noen dårlige opplysninger. Det er flere minutters handlinger som skjer her, for eksempel Form Validations som kan være testet, samt enhver håndtering for hva som viser vår feiltilstand, demonstrert av et element med IDen Signuperror. .

Godkjenningstester er en fin måte å sikre at nøkkelopplevelsesstrømmer alltid fungerer som det er riktig. Det er også enkelt å legge til tester rundt kantvesker, og for å hjelpe QA-lagene til å finne dem i søknaden din.

Når du vurderer hva du skal skrive aksepttester for, er brukerhistoriene et flott sted å starte. Hvordan samhandler brukeren din med nettstedet ditt, og hva er det forventede resultatet av den samspillet? Det er forskjellig fra enheten testing, som er bedre matchet til noe som funksjonskrav, for eksempel kravene rundt et validert felt.

03. Visuell regresjonstesting

Som nevnt i introduksjonen, er noen typer testing unike for Frontend-verdenen. Den første av disse er visuell regresjonstesting. Dette tester ikke koden din, men sammenligner heller det gjengitte resultatet av koden din - grensesnittet ditt - med den gjengitte versjonen av søknaden din i produksjon, staging eller et forordnet lokal miljø.

Dette gjøres vanligvis ved å sammenligne skjermbilder tatt i en hodeløs nettleser (en nettleser som kjører på serveren). Bilde sammenligningsverktøy og oppdager deretter eventuelle forskjeller mellom de to skuddene.

Ved hjelp av et verktøy som fantomcss, spesifiserer testene dine hvor testløperen skal navigere til, ta et skjermbilde, og rammen viser deg forskjeller som kom opp i disse synspunktene.

 casper.start ("/ home"). Deretter (funksjon () {

  // innledende tilstand av form
  phantomcss.screenshot ("# signupform", "Registrer deg form");

  // Trykk på Registrer-knappen (skal utløse feilen)
  casper.click ("knapp # registrering");

  // Ta et skjermbilde av UI-komponenten
  phantomcss.screenshot ("# Signupform", "Registrer deg Feil");

  // fyll ut skjema etter navnattributter og amp; sende inn
  Casper.Fyll ("# Signupform", {
    Navn: "Alicia Sedlock",
    E-post: "[email protected]"
  }, sant);

  // ta et andre skjermbilde av suksessstat
 Phantomcss.screenshot ("# Signupform", "Registrer deg suksess");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — Dette visuelle regresjonsrammen illustrerer beslutninger i søknaden din, og eksponerer kompleksiteten til de utenfor utviklingen utenfor

I motsetning til aksept og enhetstesting, er visuell regresjonstesting vanskelig å dra nytte av hvis du bygger noe nytt. Som din brukergrensesnitt vil se raske og drastiske endringer i løpet av aktiv utvikling, vil du sannsynligvis lagre disse testene for når stykkene i grensesnittet er visuelt fullført. Derfor er visuelle regresjonstester de siste testene du bør skrive.

For tiden krever mange visuelle regresjonsverktøy litt manuell innsats. Du må kanskje kjøre skjermbildeopptaket før du begynner å utvikle utviklingen på avdelingen, eller manuelt oppdaterer baseline skjermbilder som du gjør endringer i grensesnittet.

Dette er bare på grunn av arten av utvikling - endringer i Ui. Kan være forsettlig, men tester vet bare "Ja, dette er det samme" eller "Nei, dette er annerledes". Men hvis visuelle regresjoner er et smertepunkt i søknaden din, kan denne tilnærmingen spare lagtid og innsats samlet, sammenlignet med stadig fikseringsregressjoner.

04. Tilgjengelighet og ytelsestester

Som kulturen og bevisstheten rundt forsonetesting vokser, gjør det også vår evne til å teste ulike aspekter av økosystemet. Gitt det økte fokuset på tilgjengelighet Og ytelse i vår tekniske kultur, som integrerer dette i testpakken, bidrar til å sikre at disse konseptene forblir en prioritet.

Hvis du har problemer med å håndheve ytelsesbudsjetter eller tilgjengelighetsstandarder, er dette en måte å holde disse kravene i forkant av folks sinn.

Begge disse kontrollene kan enten integreres i arbeidsflyten din med byggverktøy som grunt og gulp, eller halvt manuelt i terminalen din. For ytelsesbudsjetteringer gir et verktøy som grunt-perfbudget deg muligheten til å kjøre nettstedet ditt via webpageetest automatisk innenfor en spesifisert oppgave.

Men hvis du ikke bruker en oppgaveløper, kan du imidlertid også få tak i perfbudget som en frittstående NPM-modul og kjøre testene manuelt.

Her er hvordan det ser ut til å kjøre dette gjennom terminalen:

 perfbudget --url http://www.aliciaibility.com -Kny [Webpageetest API Key] --SpeedIndex 2000 - Angrient 400

Og på samme måte, å sette opp gjennom grunt:

perfbudget: {
  Standard: {
    Alternativer: {
      URL: 'http://aliciability.com',
      Nøkkel: 'WebpageTest API Key',
      Budsjett: {
        SpeedIndex: '2000',
        Render: '400'
      }
    }
  }
}

[...]

grunt.registerTask ('standard', ['jshint', 'perfbudget']);

De samme alternativene er tilgjengelige for tilgjengelighetstesting. Så for PA11Y, kan du enten kjøre PA11Y. Kommando i nettleseren din for å utdata eller sette opp en oppgave for å automatisere dette trinnet. I terminalen:

 PA11Y AliciaBility.com

// som en javascript-kommando etter NPM Installer

VAR PA11Y = KRAV ('PA11Y'); // krever PA11Y.
var test = PA11Y (); // få pa11y klar til å sette

test.run ('aliciability.com', funksjon (feil, resultater) {
  // Logg om våre resultater
});

De fleste verktøyene i disse kategorier er ganske plug-and-play, men gir deg også muligheten til å tilpasse hvordan testene får løp - for eksempel kan du sette dem til å ignorere visse WCAG-standarder.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — Ligner.js er et populært bilde sammenligningsbibliotek, og gir deg mye kontroll over hva som utløser en visuell differensiering

Neste side: Slik introduserer du testing i arbeidsflyten din

Nåværende side: Ulike typer frontend tester (og når du skal bruke dem)

Neste side Omfavne og håndheve en testkultur

En introduksjon til frontend testing

01. Enhetstesting

02. Godkjenningstester

03. Visuell regresjonstesting

04. Tilgjengelighet og ytelsestester

hvordan - Mest populære artikler

Slik legger du til fonter i Photoshop

Hvordan kombinere 3D og tegneserien i Zbrush

Slik bruker du smarte lag i Photoshop

Hvordan lage fargerike verdener som forteller en historie

Hvordan blande fargede blyanter

Lag et lavt poly tapet i C4D

Lag en animert GIF i Photoshop

Hvordan lage et stilisert 3D-tegn for spill

Kategorier