En introduktion til frontendprøvning

Sep 16, 2025

hvordan

Side 1 af 2:

Forskellige typer frontend tests (og hvornår man skal bruge dem)

Forskellige typer frontend tests (og hvornår man skal bruge dem)
Embracing og håndhævelse af en testkultur

Testning af frontend-kode er stadig en forvirrende praksis til mange udviklere. Men med frontendudvikling bliver mere kompleks og med udviklere med ansvar for stabilitet og konsistens som aldrig før, skal frontend-testen omfattes som en lige borger inden for din kodebase. Vi nedbryder dine forskellige testmuligheder og forklarer hvilke situationer de bedst bruges til.

Frontend test er et tæppe term, der dækker en række automatiserede teststrategier. Nogle af disse, ligesom enheds- og integrationstestning, har været en accepteret bedste praksis inden for backend-udviklingssamfundet i årevis. Andre strategier er nyere og stammer fra de ændringer, som backend og frontend-udviklingen bruges til nu.

Ved udgangen af denne artikel skal du føle dig komfortabel at vurdere, hvilke teststrategier der passer bedst til dit team og kodebaser. Følgende kodeeksempler vil blive skrevet ved hjælp af Jasmine-rammen, men reglerne og processerne er ens på tværs af de fleste testrammer.

Bedste stykker af brugertestsoftware

01. Enhedstestning

Enhedstestning, en af testveteranerne, er på det laveste niveau af alle testtyper. Dens formål er at sikre de mindste bits af din kode (kaldet enheder) funktion uafhængigt som forventet.

Forestil dig at du har et LEGO-sæt til et hus. Før du begynder at bygge, vil du sørge for, at hvert enkelt stykke er redegjort for (fem røde firkanter, tre gule rektangler). Enhedstestning sørger for, at individuelle sæt kode - ting som input valideringer og beregninger - fungerer som beregnet inden du bygger den større funktion.

Det hjælper med at tænke på enhedstest i Tandem med 'Gør en ting godt' mantra. Hvis du har et stykke kode med et enkelt ansvar, vil du sandsynligvis skrive en enhedstest for den.

Lad os se på følgende kode snippet, hvor vi skriver en enhedstest for en simpel regnemaskine:

 Beskriv ("Calculator Operations", funktion () {
  det ("skal tilføje to numre", funktion () {
    Calculator.Init ();
    var resultat = regnemaskine.addnumbers (7,3);
    forventer (resultat) .TOOB (10);
  });
});

I vores Lommeregner Ansøgning, vi ønsker at sikre, at beregningerne altid fungerer uafhængigt af den måde, vi forventer. I eksemplet vil vi sørge for, at vi altid kan præcist tilføje to numre sammen.

Det første, vi gør, er at beskrive de serier af test, vi skal køre ved at bruge Jasmine's beskrive . Dette skaber en test suite - en gruppering af tests relateret til et bestemt område af applikationen. For vores regnemaskine vil vi gruppere hver beregningstest i sin egen suite.

Suiter er store ikke kun for kodeorganisation, men fordi de gør det muligt for dig at køre suiter alene. Hvis du arbejder på en ny funktion til et program, vil du ikke køre hver test under aktiv udvikling, da det ville være meget tidskrævende. Testing Suites individuelt lader dig udvikle sig hurtigere.

Dernæst skriver vi vores faktiske tests. Bruger det Funktion, vi skriver funktionen eller funktionen af funktionalitet, vi tester. Vores eksempel tester ud additionsfunktionen, så vi vil køre scenarier, der bekræfter, at det fungerer korrekt.

Vi skriver så vores testsøgning, hvor vi tester, hvis vores kode fungerer som vi forventer. Vi initialiserer vores regnemaskine og driver vores Addnumbers. funktion med de to numre, vi ønsker at tilføje. Vi gemmer nummeret som resultatet, og derefter hævder, at dette er lig med det nummer, vi forventer (i vores tilfælde 10).

Hvis Addnumbers. Undlader at returnere de korrekte tal, vores test vil mislykkes. Vi ville skrive lignende tests for vores andre beregninger - subtraktion, multiplikation, og så videre.

02. Acceptance Tests.

Hvis enhedstests er som at kontrollere hvert LEGO-stykke, kontrolleres accepttest, hvis hvert trin i bygningen kan udfyldes. Bare fordi alle stykkerne regnes, betyder ikke, at instruktionerne er korrekt eksekverbare og giver dig mulighed for at opbygge den endelige model.

Acceptance Tests Gå gennem din løbende applikation og sikrer udpegede handlinger, brugerindgange og brugerstrømme er fuldstændige og funktion.

Bare fordi vores ansøgning er Addnumbers. Funktionen returnerer det rigtige nummer, betyder ikke, at regnemaskinens grænseflade vil helt sikkert fungere som forventet at give det rigtige resultat. Hvad hvis vores knapper er deaktiveret, eller beregningsresultatet bliver ikke vist? Acceptance Tests hjælper os med at besvare disse spørgsmål.

 Beskriv ("Tilmeld fejltilstand", funktion () {
  det ("bør ikke tillade tilmelding med ugyldige oplysninger", funktion () {
    VAR Page = BESØG ("/ HOME");
    side.fill_in ("input [navn =" email "]", "ikke en email");
    side.click ("knap [type = indsende]");
    side.click ("knap [type = indsende]");
    Forvent (side.Find ("# signuperror"). Hasclass ("skjult")). Tobefalsy ();
  });
});

Strukturen ser meget ud til vores enhedstest: Vi definerer en suite med beskrive , så skriv vores test inden for det Funktion, derefter udfør nogle kode og tjek dens udfald.

I stedet for at teste om specifikke funktioner og værdier, dog her, vi tester for at se, om en bestemt arbejdsgang (et tilmeldingsstrøm) opfører sig som forventet, når vi udfylder nogle dårlige oplysninger. Der er flere minutters handlinger her, som f.eks. Form Validations, der kan testes, samt enhver håndtering for, hvad der viser vores fejltilstand, demonstreret af et element med id signuperror. .

Acceptance Tests er en fantastisk måde at sikre, at nøgleoplevelsesstrømme altid fungerer korrekt. Det er også nemt at tilføje tests omkring EDGE-tilfælde, og for at hjælpe dine QA-hold med at finde dem i din ansøgning.

Når du overvejer, hvad du skal skrive accepttest for, er dine brugerhistorier et godt sted at starte. Hvordan interagerer din bruger med dit websted, og hvad er det forventede resultat af denne interaktion? Det er anderledes end enhedsprøvning, hvilket er bedre matchet til noget som funktionskrav, som f.eks. Kravene omkring et valideret felt.

03. Visuel regressionstestning

Som nævnt i introduktionen er nogle typer testning unikke for frontend-verdenen. Den første af disse er visuel regressionstest. Dette tester ikke din kode, men sammenligner snarere det gengivne resultat af din kode - din grænseflade - med den gengivne version af din ansøgning i produktion, staging eller et forudbestemt lokalt miljø.

Dette gøres typisk ved at sammenligne screenshots taget i en hovedløs browser (en browser, der kører på serveren). Billedsammenligningsværktøjer skal derefter registrere eventuelle forskelle mellem de to skud.

Ved hjælp af et værktøj som Phantomcss, angiv dine test, hvor testløberen skal navigere til, tage et screenshot, og rammerne viser dig forskelle, der kom op i disse synspunkter.

 CASPER.START ("/ HOME"). Derefter (funktion () {

  // Indledende tilstand af formular
  phantomcss.screenshot ("# signupform", "tilmeld form");

  // Tryk på knappen Tilmelding (skal udløse fejl)
  casper.click ("knap # tilmelding");

  // Tag et screenshot af UI-komponenten
  phantomcss.screenshot ("# signupform", "tilmeld form fejl");

  // Udfyld form efter navnattributter & amp; Indsend
  casper.fyld ("# signupform", {
    Navn: "Alicia Sedlock",
    Email: "[email protected]"
  }, sand);

  // Tag et andet screenshot af succes tilstand
 Phantomcss.Screenshot ("# signupform", "tilmeld dig form succes");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — Denne visuelle regressionsramme illustrerer beslutning træer i din ansøgning, udsætter kompleksitet til dem uden for udviklingen

I modsætning til accept og enhedstestning er visuel regressionstest svært at drage fordel af, om du bygger noget nyt. Da din UI vil se hurtige og drastiske ændringer i løbet af den aktive udvikling, vil du sandsynligvis gemme disse tests for, når stykker af grænsefladen er visuelt komplet. Derfor er visuelle regressionstests de sidste test, du skal skrive.

I øjeblikket kræver mange visuelle regressionsværktøjer en smule manuel indsats. Du skal muligvis køre dit screenshot-capture, før du begynder at udvikle sig på din filial eller manuelt opdatere baseline screenshots, når du foretager ændringer i grænsefladen.

Dette er simpelthen på grund af udviklingens art - ændringer til UI. Kan være forsætlig, men test kun ved 'ja, dette er det samme' eller 'nej, det er anderledes'. Men hvis visuelle regressioner er et smertepunkt i din ansøgning, kan denne tilgang redde din teamtid og indsats generelt sammenlignet med konstant at fastsætte regressioner.

04. Tilgængelighed og præstationsprøver

Som kultur og bevidsthed omkring Frontend test vokser, gør vores evne til at teste forskellige aspekter af økosystemet. I betragtning af det øgede fokus på tilgængelighed Og ydeevne i vores tekniske kultur, der integrerer dette i din testpakke, hjælper med at sikre, at disse koncepter forbliver en prioritet.

Hvis du har problemer med at håndhæve præstationsbudgetter eller tilgængelighedsstandarder, er det en måde at holde disse krav i spidsen for folks sind.

Begge disse checks kan enten integreres i din workflow med bygningsværktøjer som grunt og gulp eller semi-manuelt i din terminal. For præstationsbudgetter giver et værktøj som Grunt-PerfBudget dig mulighed for at køre dit websted via WebpageTest automatisk inden for en bestemt opgave.

Men hvis du ikke bruger en opgave-runner, kan du også få fat i PerfBudget som et selvstændigt NPM-modul og køre testen manuelt.

Her er hvordan det ser ud til at køre dette gennem terminalen:

 PERFBUDGET - HTTP: //WWSETEST API KEY] --Speedindex 2000 --Render 400

Og ligeledes opretter gennem grunt:

PerfBudget: {
  Standard: {
    muligheder: {
      URL: 'http://aliciapability.com',
      Nøgle: 'WebpageTest API-nøgle',
      Budget: {
        Speedindex: '2000',
        Render: '400'
      }
    }
  }
}

[...]

grunt.registerTask ('Default', ['Jshint', 'PerfBudget']);

De samme muligheder er tilgængelige for tilgængelighedstest. Så for PA11Y kan du enten køre pa11. kommando i din browser for output eller opret en opgave for at automatisere dette trin. I terminalen:

 PA11Y ALICIASIOR.COM

// som en javascript-kommando efter NPM installering

var pa11y = krav ('pa11y'); // kræver PA11.Y.
var test = pa11y (); // få pa11y klar til at sætte

test.run ('aliciapability.com', funktion (fejl, resultater) {
  // log vores parse dine resultater
});

De fleste værktøjer i disse kategorier er ret plug-and-play, men giver dig også mulighed for at tilpasse, hvordan testene bliver kørt - for eksempel kan du indstille dem til at 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 — Dagble.js er et populært billedsammenligningsbibliotek, og giver dig en masse kontrol over, hvad der udløser en visuel differentiering

Næste side: Sådan introducerer du test i din workflow

Nuværende side: Forskellige typer frontend tests (og hvornår man skal bruge dem)

Næste side Embracing og håndhævelse af en testkultur

En introduktion til frontendprøvning

01. Enhedstestning

02. Acceptance Tests.

03. Visuel regressionstestning

04. Tilgængelighed og præstationsprøver

hvordan - Mest populære artikler

Sådan Download Instagram Photos: Alt du behøver at kende

Sådan redigeres en video på Tiktok

Portrætfotografi: Sådan tager du perfekte portrætter

3 Essential Zbrush Retopology Techniques

Sådan kaster du smarte tekstvirkninger med CSS

Master bro værktøjet

Den ultimative vejledning til sammensatte billeder i Photoshop

Sådan tegner du Harley Quinn

Kategorier