Testing av HTML-øyeblikksbilder
Oppdag utilsiktede HTML-endringer med øyeblikksbildetester
Testing av HTML-øyeblikksbilder er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva snapshot-testing er
Snapshot-testing lagrer det gjengitte resultatet av en komponent eller side ved første kjøring, og sammenligner deretter nye resultater med det lagrede snapshotet ved senere kjøringer. Alle endringer i HTML-resultatet får testen til å feile til snapshotet bevisst oppdateres.
Jest-snapshot-testing
Jests toMatchSnapshot()-matcher serialiserer en verdi (inkludert JSX gjengitt som HTML) og sammenligner den med en lagret fil. npx jest -u oppdaterer snapshots når endringer er bevisste. Testene fungerer som et regresjonsnett for utilsiktede endringer i gjengivelsen.
import { render } from "@testing-library/react";
import Button from "./Button";
test("Button renders consistently", () => {
const { container } = render(<Button>Save</Button>);
expect(container.innerHTML).toMatchSnapshot();
});Storybook Test Runner
Storybook Test Runner kjører gjennom hver story og lager snapshots av resultatet via axe (tilgjengelighet) og DOM-serialisering. Kombinert med Chromatic legger det til visuell regresjon oppå dette – forskjeller på pikselnivå i tillegg til DOM-forskjeller.
Visuell regresjon med Percy eller Chromatic
Percy og Chromatic lager snapshots av gjengitte sider som bilder og viser visuelle forskjeller. De fanger CSS-regresjoner som DOM-snapshots ikke oppdager (et skrifttypebytte, en margjustering eller et fargeskifte). Kombiner DOM-snapshots (billige og raske) med visuelle snapshots (kostbare og omfattende).
Vedlikehold av snapshots
Snapshots som endres «for lett», blir støy. Unngå å ta snapshots av ustabile verdier (datoer, id-er og tilfeldige nøkler). Bruk Jests property matchers (expect.any(String)) for felt som med rette varierer mellom kjøringer. Hold snapshots små og fokuserte.
Kodegjennomgang av snapshots
Forskjeller i snapshot-filer i pull requests er fullverdig materiale for gjennomgang. Gjennomgåerne bekrefter at DOM-endringene er bevisste og ønskede, og kan fange utilsiktede følgeeffekter av en «enkel» CSS-endring. Behandle snapshot-forskjeller som alle andre forskjeller.
Ikke ta snapshot av alt
Det er skjørt å ta snapshot av enorme gjengivelser på sidenivå – hver minste endring forplanter seg til en enorm diff. Ta snapshot på komponentnivå: hver Button, hver Card, hvert FormField. Gjengivelse på sidenivå bør heller få visuelle regresjonstester.
Serialisering av snapshot
Velg hvordan snapshotet skal serialiseres: fullstendig HTML, forenklet DOM, bare props eller tilgjengelighetstre. Hvert format fanger opp ulike regresjoner. For UI-komponenter er fullstendig HTML mest grundig; for prop-drevet logikk er bare props rimeligere og gir sjelden falske positiver.
Når snapshot-tester feiler
Den vanligste årsaken er en refaktorering som produserer HTML med samme betydning, men en annen struktur. Undersøk diffen: Hvis endringen er tilsiktet og god, oppdater snapshotet. Hvis den er uventet, må den underliggende koden rettes. Kjør aldri jest -u blindt uten å undersøke resultatet.
Snapshot-tester på tvers av nettlesere
Visuelle regresjonsverktøy gjengir innhold i flere nettlesere og rapporterer nettleserspesifikke forskjeller. Bruk dette til å oppdage CSS som gjengis forskjellig i Safari og Chrome – noe som er vanlig for nye layoutfunksjoner i en tidlig adopsjonsfase. Uten snapshot-tester på tvers av nettlesere oppdages slike regresjoner først gjennom manuell kvalitetssikring.
Kombiner med andre tester
Snapshot-tester er nødvendige, men ikke tilstrekkelige. De fanger opp utilsiktede endringer i gjengivelsen, men ikke logiske feil (at et knappetrykk gjør det riktige). Kombiner dem med enhetstester for atferd og ende-til-ende-tester for brukerflyter – hvert lag fanger opp ulike feil.
Ytelse
Snapshot-tester er raske – de sammenligner strenger eller filer. Visuelle regresjonstester er tregere (de gjengir piksler, sammenligner bilder og kjører ofte på tvers av nettlesere). Kjør snapshot-tester ved hver CI-bygging; kjør visuell regresjon ved hver PR, men eventuelt ikke ved hver commit, avhengig av CI-budsjettet.
Kunnskapssjekk
Hvorfor suppleres DOM-snapshot-tester vanligvis med visuelle regresjonstester som Percy eller Chromatic?
Oppsummering
Snapshot-testing fanger opp gjengitt HTML ved første kjøring og varsler om alle endringer ved senere kjøringer. Bruk Jest toMatchSnapshot for komponent-DOM, Storybook Test Runner for stories og Percy/Chromatic for visuell regresjon på pikselnivå. Ta snapshot på komponentnivå (ikke sidenivå), utelat ustabile verdier og undersøk diffene nøye i PR-er. Kombiner med enhetstester og ende-til-ende-tester for full dekning.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Testing av HTML-øyeblikksbilder» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Testing av HTML-øyeblikksbilder», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Testing av HTML-øyeblikksbilder»?
Oppdag utilsiktede HTML-endringer med øyeblikksbildetester Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Testing av HTML-øyeblikksbilder»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- W3C Markup Validator
- Lighthouse HTML-revisjon
- Pa11y og axe for tilgjengelighetstesting
- Testing av HTML-øyeblikksbilder