Testning med HTML-ögonblicksbilder
Upptäck oavsiktliga HTML-ändringar med ögonblicksbildstester
Testning med HTML-ögonblicksbilder är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad snapshot-testning är
Snapshot-testning sparar det renderade resultatet av en komponent eller sida vid den första körningen och jämför sedan det nya resultatet med den sparade snapshot-filen vid efterföljande körningar. Alla ändringar i HTML-resultatet gör att testet misslyckas tills snapshot-filen uppdateras avsiktligt.
Jest snapshot-testning
Jests toMatchSnapshot()-matcher serialiserar ett värde (inklusive JSX som renderats till HTML) och jämför det med en sparad fil. npx jest -u uppdaterar snapshots när avsiktliga ändringar görs. Testerna fungerar som ett skydd mot oavsiktliga förändringar i renderingen.
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 kör varje story och tar en snapshot av resultatet via axe (tillgänglighet) och DOM-serialisering. Tillsammans med Chromatic lägger det till visuell regression ovanpå detta — skillnader på pixelnivå utöver DOM-skillnader.
Visuell regression med Percy eller Chromatic
Percy och Chromatic tar snapshots av renderade sidor som bilder och visar visuella skillnader. De fångar CSS-regressioner som DOM-snapshots missar (ett teckensnittsbyte, en marginaljustering eller en färgförändring). Kombinera DOM-snapshots (billiga och snabba) med visuella snapshots (dyra och omfattande).
Underhåll av snapshots
Snapshots som ändras "för lätt" blir brus. Undvik att ta snapshots av instabila värden (datum, id:n och slumpmässiga nycklar). Använd Jests property matchers (expect.any(String)) för fält som legitimt varierar mellan körningar. Håll snapshots små och fokuserade.
Kodgranskning av snapshots
Diffar i snapshot-filer i pull requests är förstklassigt granskningsmaterial. Granskare verifierar att DOM-ändringarna är avsiktliga och önskvärda — och upptäcker oavsiktliga kaskadeffekter från en "enkel" CSS-ändring. Behandla snapshot-diffar som alla andra diffar.
Skapa inte snapshots av allt
Att skapa snapshots av enorma renderingar av sidor på toppnivå är skört — varje liten ändring ger upphov till en enorm diff. Skapa snapshots på komponentnivå: varje Button, varje Card, varje FormField. Rendering på sidnivå bör i stället testas med visuella regressionstester.
Serialisering av snapshots
Välj hur snapshoten ska serialiseras: fullständig HTML, förenklad DOM, endast props eller tillgänglighetsträdet. Varje format fångar olika regressioner. För UI-komponenter är fullständig HTML mest grundlig; för propstyrd logik är endast props billigare och leder mer sällan till falska positiva resultat.
När snapshots går sönder
Den vanligaste orsaken är en refaktorering som ger likvärdig men annorlunda strukturerad HTML. Granska diffen: om ändringen är avsiktlig och bra ska snapshoten uppdateras. Om den är oväntad ska den underliggande koden korrigeras. Kör aldrig jest -u blint utan att först granska resultatet.
Snapshots i flera webbläsare
Verktyg för visuella regressionstester renderar i flera webbläsare och rapporterar webbläsarspecifika skillnader. Använd detta för att upptäcka CSS som renderas olika i Safari och Chrome — något som är vanligt för nya layoutfunktioner i fasen för tidig användning. Utan snapshots i flera webbläsare upptäcks sådana regressioner endast genom manuell QA.
Kombinera med andra tester
Snapshot-tester är nödvändiga men inte tillräckliga. De fångar oavsiktliga ändringar i rendering, men inte logikfel (att ett klick på knappen gör rätt sak). Kombinera dem med enhetstester för beteende och end-to-end-tester för användarflöden — varje lager fångar olika typer av fel.
Prestanda
Snapshot-tester är snabba — de jämför strängar och filer. Visuella regressionstester är långsammare (de renderar pixlar, jämför bilder och körs ofta i flera webbläsare). Kör snapshots vid varje CI-bygge; kör visuella regressionstester vid varje PR men eventuellt inte vid varje commit, beroende på CI-budgeten.
Kunskapskontroll
Varför kompletteras DOM-snapshot-tester vanligtvis med visuella regressionstester som Percy eller Chromatic?
Sammanfattning
Snapshot-testning fångar den renderade HTML-koden första gången och markerar alla ändringar vid efterföljande körningar. Använd Jest toMatchSnapshot för komponenternas DOM, Storybook Test Runner för stories och Percy/Chromatic för visuella regressionstester på pixelnivå. Skapa snapshots på komponentnivå, inte sidnivå, uteslut instabila värden och granska diffar noggrant i PR:er. Kombinera med enhets- och end-to-end-tester för full täckning.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Testning med HTML-ögonblicksbilder” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Testning med HTML-ögonblicksbilder”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Testning med HTML-ögonblicksbilder”?
Upptäck oavsiktliga HTML-ändringar med ögonblicksbildstester Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Testning med HTML-ögonblicksbilder”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- W3C Markup Validator
- HTML-granskning med Lighthouse
- Pa11y och axe för tillgänglighetstestning
- Testning med HTML-ögonblicksbilder