Visuell Testning - UI Testing Inspector

Trött på att manuellt kontrollera visuella fel efter varje kodändring? UI Testing Inspector är ditt pålitliga verktyg för att hitta visuella skillnader med DOM-analys.

Varför använda?
⚡ 100 % Lokalt & Privat: alla skärmdumpar och jämförelsedata stannar på din dator – inga molntjänster, ingen datadelning
⚡ Omedelbar feedback-loop: installera tillägget, skapa en baslinje, gör kodändringar och se skillnaderna direkt – perfekt för snabba regressionstester
⚡ Pixelperfekt detektering: fånga även de minsta visuella förändringarna som ögat kan missa

Huvudfunktioner
🔸 Baslinje med ett klick – fånga ”före”-läget för valfri sida med ett klick
🔸 Pixelperfekt visuell diff – tydlig rapport med baslinje, aktuellt läge och markerade skillnader
🔸 Elementinspektion – se vad som ändrats i DOM och CSS, inte bara i koden
🔸 Fångst av hel sida eller viewport
🔸 Rapporthistorik – spara och granska upp till 15 tidigare rapporter
🔸 Ljusa & mörka teman – bekväm visning dag som natt

Inuti den detaljerade rapporten
🔍 Efter varje jämförelse får du:
✔️ Sammanfattning – procent skillnad och antal ändrade element
✔️ Sida-vid-sida-vy – ”Före / Efter” plus markerad ”Skillnader”-bild
✔️ Lista över DOM- & CSS-ändringar – färg, font, marginal m.m.

Vad du fångar
➤ Layoutförskjutningar & justeringsfel
➤ Färg- och stiländringar
➤ Saknade eller flyttade element
➤ Typsnitts- och textändringar
➤ Bildskillnader

Så fungerar det
1️⃣ Ställ in visuell baslinje
2️⃣ Gör kodändringar med förtroende
3️⃣ Klicka ”Jämför med baslinje” – detaljerad rapport öppnas i ny flik
4️⃣ Analysera skillnader och åtgärda fel
5️⃣ Uppdatera baslinjen när du är nöjd

Professionella tips
✨ Vänta tills sidan laddats helt före baslinjefångst
✨ Använd helsidesfångst för heltäckande tester
✨ Samma fönsterstorlek för exakta jämförelser
✨ Fånga baslinjer när innehållet är stabilt
✨ Testa en ändring åt gången för tydliga resultat
✨ Spara viktiga baslinjer innan stora refaktoreringar

Användningsfall
✅ Visuell regressionstestning
✅ Verifiering av UI/design
✅ Orädd CSS-refaktorisering
✅ Frontend-flöden med omedelbar visuell feedback

För vem
➡️ Frontend-utvecklare • QA-ingenjörer • UI/UX-designers • Frilansare & små team

Varför det sticker ut
🖼️ Bättre än manuella skärmdumpar
📝 Noll inlärningskurva – lätt att använda

Vanliga frågor
❓ Hur upptäcks förändringar?
💬 Pixel-för-pixel-jämförelse + strukturell DOM/CSS-skanning.
❓ Är min data säker?
💬 Ja – allt bearbetas och lagras 100 % lokalt i webbläsaren.
❓ Fungerar det på localhost?
💬 Självklart – perfekt för lokal utveckling.
❓ Dynamiskt innehåll?
💬 Jämför statiska lägen: fånga när animationer och annonser har stabiliserats.