guide visual regression testing with visual testing tools
In deze uitgebreide gids wordt alles uitgelegd over het testen van visuele regressie. Bevat ook beoordeling van gratis en commerciële visuele testtools zoals Applitools, Percy, Screener, enz:
Visuele regressietests of visuele tests in software zijn een activiteit voor kwaliteitsborging om te verifiëren of de visuele aspecten van de gebruikersinterface van de applicatie geschikt lijken voor de gebruiker. Het is ook bekend als Visual Validation Testing.
Het is bedoeld om te verifiëren of de juiste gegevens en inhoud worden weergegeven aan de voorkant van de applicatie. Bovendien valideert het ook de lay-out en het uiterlijk van elk visueel element dat aanwezig is in de gebruikersinterface en de hele gebruikersinterface zelf.
Wat je leert:
Visuele regressietesten
Als we het hebben over de juistheid van Layout, betekent dit dat de positionering, vorm en grootte van elk element op het scherm correct is. Elementen mogen elkaar niet overlappen, ze moeten zichtbaar zijn en niet verborgen.
Het visuele element kan hier verwijzen naar een afbeelding, pagina, deel van een pagina of deel van een afbeelding.
Het valideren van het uiterlijk betekent dat het lettertype, de kleur, de helderheid, het contrast, de dichtheid, de textuur, het visuele gewicht, de afbeeldingen, enz. Van de visuele elementen er correct uit moeten zien.
Wat is visuele regressietesten?
Regressietests zorgen ervoor dat elke wijziging die in de software wordt aangebracht, niets breekt dat voorheen goed werkte.
Als het gaat om visuele tests, zorgt de visuele regressietest ervoor dat er geen stijlproblemen naar voren komen als er wijzigingen in de software worden aangebracht. De applicatie moet er net zo goed blijven uitzien als hij was.
Een tool voor het testen van visuele regressie maakt screenshots van de huidige gebruikersinterface en vergelijkt deze met de originele screenshots. Bij visuele regressietesten wordt dus gekeken naar de historische verschillen. Het bevestigt dat de webpagina nog steeds zoals verwacht wordt weergegeven in verschillende browsers, zelfs na wijzigingen in de code.
Hieronder ziet u een zeefdruk van een visuele regressietest die is uitgevoerd met een geautomatiseerde tool:
(beeld bron
In de huidige praktijken van continue integratie worden visuele regressietests erg belangrijk om ervoor te zorgen dat de nieuwe wijzigingen geen rommel veroorzaken in de lay-out naarmate de applicatie zich ontwikkelt van versie naar versie en vordert tussen browsers.
Veel organisaties gebruiken visuele regressietests om versies van bepaalde webpagina's vast te leggen om te documenteren hoe deze van de ene iteratie naar de andere verandert.
Belang van visuele validatietests
Hoe correct de functionaliteit van uw applicatie ook werkt, de klant heeft er niets aan, tenzij het een goede gebruikersinterface en gebruikerservaring kan bieden.
Tegenwoordig praten we niet alleen over UI (User Interface), maar besteden we ook veel aandacht aan UX (user experience). Wanneer we ons richten op het leveren van een betere gebruikerservaring, worden visuele tests veel belangrijker omdat het aantrekkelijkere visuele ontwerp kan worden ervaren als bruikbaarder voor de gebruiker.
Laten we het onderstaande voorbeeld van de Amazon-website bekijken:
(beeld bron
In de bovenstaande afbeelding kunt u zien dat de tekst en afbeeldingen elkaar overlappen en niet goed zijn uitgelijnd. Dit is een voorbeeld van een visuele bug die een slechte gebruikerservaring kan veroorzaken, aangezien de klant de beoogde actie op de website niet kan voltooien.
Visueel ontwerp vormt op veel manieren de gebruikerservaring.
Bijvoorbeeld,
- Geweldige visuele ontwerpen helpen om vertrouwen en geloofwaardigheid op te bouwen.
- Versterkt het merkimago.
- Heeft invloed op de leesbaarheid.
- Vormt een visueel evenwicht op het scherm.
- Leidt de gebruikers naar acties.
- Overtuigt het oog om zijn aandacht te verleggen naar bepaalde pagina-elementen.
Bovendien hebben we tegenwoordig een enorme verscheidenheid aan besturingssystemen, webbrowsers, schermresoluties en apparaten, dus het wordt cruciaal om ervoor te zorgen dat de gebruikersinterface correct wordt weergegeven op elk van de mogelijke combinaties hiervan.
Zelfs een kleine vervorming in de gebruikersinterface kan leiden tot verlies van omzet. Visuele bugs kunnen vervelend en onaangenaam zijn voor de gebruikers en voor ongemak zorgen.
Stel dat u in het bankwezen zit en u biedt uw klanten een online applicatie voor mobiel bankieren aan.
U krijgt klachten van sommige van uw klanten dat wanneer ze geld willen overboeken naar iemands rekening en nadat ze alle vereiste informatie hebben ingevuld, ze de ‘Verzenden’ knop op het scherm en dit is een irritante ervaring voor hen.
Wanneer u het probleem onderzoekt, ziet u dat de verzendknop wordt verborgen op een bepaalde schermresolutie voor Android-gsm's en daarom konden alle klanten met Android-telefoons met die specifieke schermgrootte de verzendknop niet zien.
De functionaliteit van de applicatie werkte in dit geval dus prima, maar vanwege de visuele bug konden de gebruikers hun beoogde acties in de app niet voltooien. Dit voorbeeld laat zien hoe belangrijk het is om de visuele aspecten van de applicatie op elke mogelijke configuratie te testen voordat je de applicatie aan de klanten levert.
Sommige gebieden waar visuele validatietests ten zeerste worden aanbevolen, zijn (omdat dit rechtstreeks van invloed is op uw merk):
- Mobiele apps
- Mobiel internet / responsief web
- Marketingwebsites
- Content management systemen
- Consumentensystemen zoals luchtvaartmaatschappijen, reizen, bankieren, etc.
Gezien het belang ervan, zouden bedrijven aanzienlijke inspanningen en geld moeten besteden aan visuele tests. Indien gebruikt in combinatie met de bestaande ontwikkelaarstests, zal het u helpen bij het detecteren van de visuele problemen in de vroege stadia van de ontwikkelingscyclus.
Visuele testmethoden en -processen
Als ontwikkelaars of testers werken we vaak aan het testen van de functionaliteit van de applicaties. Ofwel via handmatige of een geautomatiseerde tool, we controleren of de applicatie werkt zoals verwacht. Dergelijke functionaliteitstests zijn erg belangrijk om de goede werking van de applicatie te garanderen.
Als we hier echter visuele tests aan toevoegen, zou dit de algehele tests aanzienlijk verbeteren. Dit testen wordt dus vaak gedaan in combinatie met functioneel testen.
Er zijn verschillende testmethoden en -processen om de uitdagingen van het visueel testen van applicaties in brede configuraties het hoofd te bieden. Er zijn ook veel tools beschikbaar om visuele validatietests te ondersteunen.
Over het algemeen zijn er twee hoofdbenaderingen die worden gevolgd voor visuele validatietests, namelijk op code gebaseerd en op configuratie gebaseerd. De visuele testtools zijn ook gecategoriseerd op basis van deze twee benaderingen.
Het kan handmatig of op een geautomatiseerde manier worden gedaan. Vanwege bepaalde uitdagingen kan het niet volledig handmatig of volledig geautomatiseerd zijn. Over het algemeen heeft een combinatie van handmatige en geautomatiseerde aanpak de voorkeur.
Hieronder staan de 3 verschillende visuele testmethoden die doorgaans worden gevolgd.
Teams kunnen kiezen uit een van deze opties, afhankelijk van hun behoeften:
# 1) Maak speciale visuele tests : Dit is de meest aanbevolen methode omdat u hiermee volledige controle heeft over visuele validatie. Met deze benadering kunt u ook tests schrijven met matige inspanningen. Maar ja, je zult de tests helemaal opnieuw moeten schrijven en het zal wat tijd kosten.
# 2) Voeg visuele checkpoints in bestaande functionele tests in: Bij deze methode beschikt u al over de tests voor het valideren van de functionaliteit van de applicatie en voegt u slechts enkele visuele controles toe tussen deze tests om de pagina's te valideren.
beste ide voor python op mac
Deze methode beperkt natuurlijk uw testdekking, maar het is een snelle manier om visuele tests in te voegen en te profiteren van de bestaande functionele testcode.
# 3) Voeg impliciete visuele validatie toe aan het bestaande testraamwerk: Deze methode is heel gemakkelijk te implementeren omdat er maar een paar regels code voor nodig zijn. Het lijdt echter aan de beperking dat u in dit geval ook generieke validatie kunt uitvoeren. U kunt specifieke componenten in het framework niet valideren.
Terwijl we verder gaan, zullen we handmatige en geautomatiseerde visuele tests bespreken. We zullen ook de visuele testtools en frameworks in detail bekijken.
Handmatige visuele tests
Softwarebedrijven worden geconfronteerd met twee opties om visuele tests uit te voeren, namelijk handmatig testen of geautomatiseerd testen. Laten we eens in detail kijken naar handmatige visuele tests.
Hoewel handmatig testen traag, duur en foutgevoelig kan zijn, is het vanwege de subjectieve aard van het interfaceontwerp vaak niet mogelijk om een geautomatiseerde test uit te voeren om de juistheid van elk scenario vast te leggen. Soms moeten we dus een balans kiezen tussen handmatig en geautomatiseerd testen.
Ook kan een van de belangrijkste voordelen van handmatig testen door een mens buiten het bereik van de test kijken. Een automatiseringstest kan alleen het probleem vastleggen dat binnen de reikwijdte ervan ligt, maar in een handmatige test kan een menselijke tester ook andere cosmetische bugs en andere dingen ontdekken die er onjuist uitzien in de gebruikersinterface.
Omdat handmatige tests dichter bij de handelingen van de echte gebruiker liggen, kunnen ze de lay-outfouten en ontwerpproblemen opsporen die over het algemeen aan het licht komen wanneer een echte gebruiker met de applicatie communiceert.
U kunt handmatige tests uitvoeren in de vroege stadia van de applicatieontwikkeling wanneer uw gebruikersinterface onstabiel is. Het is ook handig voor ad-hoc testen wanneer u snelle controles ter plaatse nodig heeft.
Bij handmatige visuele validatietests moet de tester het uiterlijk en de lay-out van de visuele elementen handmatig controleren. Dit kan inhouden dat u huidige schermafbeeldingen maakt en deze vervolgens handmatig vergelijkt met de basisschermafbeeldingen om eventuele hiaten te identificeren.
Een andere effectieve manier om handmatig te testen, is door een componentverkenner te gebruiken. Hierin definieert u de testtoestanden, gebruikt u verkenner om een toestand en component te selecteren en controleert u deze op het scherm. Een van deze tools is React Storybook, waar u afzonderlijk UI-componenten kunt ontwikkelen.
Via deze methode kan een tester een handmatige test van een onderdeel uitvoeren, controleren hoe het wordt weergegeven en kijken of het goed werkt of niet.
Handmatige teststappen:
- Blader door de app en leg de bekende goede baseline-screenshots vast.
- Maak op een later moment nog een reeks schermafbeeldingen van de nieuwste versie van de app.
- Vergelijk deze schermafbeeldingen nu handmatig (basislijn versus huidig) om de visuele bugs te achterhalen.
Geautomatiseerde visuele tests
Geautomatiseerd visueel testen is een manier om automatisch te verifiëren of een gebruikersinterface er visueel uitziet zoals bedoeld.
De voordelen van het automatiseren van visuele tests zijn dat ze kostenefficiëntie op de lange termijn bieden, sneller zijn dan handmatige tests, nauwkeuriger zijn omdat ze menselijke fouten kunnen uitsluiten en pixel-perfecte visuele tests kunnen leveren, ze zijn herbruikbaar en transparant omdat ze automatische rapporten bieden die gemakkelijk en gemakkelijk toegankelijk voor iedereen in het team.
Enkele van de beperkingen van geautomatiseerd visueel testen zijn dat er vooraf hoge kosten kunnen zijn en dat u aanzienlijke inspanningen moet besteden aan testonderhoud om elke wijziging op te vangen.
Bij automatiseringstests is het bereik smaller, tenzij er screenshot-tests zijn uitgevoerd. Er is ook een steile leercurve, aangezien de organisaties de tijd nemen om te leren over automatiseringstesttools.
Gaan met automatisering zou een goede keuze zijn als u visuele regressietests moet uitvoeren om te kunnen omgaan met frequente wijzigingen die plaatsvinden in een stabiele gebruikersinterface. Geautomatiseerd testen helpt ook bij een geweldige visuele screenshot-vergelijking.
Geautomatiseerde vergelijking van screenshot biedt een grote mate van precisie bij visuele tests en verhoogt de ROI. De geautomatiseerde screenshotvergelijking kan die bugs vastleggen die onmogelijk met menselijke ogen en handmatige vergelijking kunnen worden gedetecteerd. Het is uiteindelijk ook nuttig voor het testen van complexe gebruikersverhalen.
Er is een breed scala aan open source en commerciële tools beschikbaar voor geautomatiseerd testen.
De onderstaande afbeelding laat zien hoe visuele validatie kan worden geautomatiseerd met elke programmeertaal:
(beeld bron
Hieronder wordt de algemene workflow van Visual Test Automation weergegeven:
(beeld bron
Zoals weergegeven in het bovenstaande workflowdiagram, zijn er 4 stappen betrokken bij geautomatiseerd visueel testen:
Stap 1 : In deze stap moeten we de applicatie en de test aansturen en screenshots maken.
Stap 2 : In deze stap vergelijkt de automatiseringstool deze screenshots met de baseline screenshots. De baseline-schermafbeeldingen zijn over het algemeen de afbeeldingen die zijn gemaakt in de vorige testruns en die zijn bewezen door een tester.
Stap 3: Zodra de tool de resultaten van de beeldvergelijkingen heeft ontvangen, genereert het een rapport met alle gevonden verschillen.
Bijvoorbeeld,de onderstaande afbeelding toont een van de testautomatiseringstools die de verschillen in een hoekige toepassing benadrukken:
Stap 4 : In de laatste stap beoordeelt de tester het rapport en controleert voor elk verschil of het een bug of een geldige wijziging (false positives) is. Op basis hiervan worden de basislijnafbeeldingen bijgewerkt.
Voor de eerste testrun heb je geen basislijnafbeeldingen. De afbeeldingen die tijdens de eerste run zijn verkregen, worden dus over het algemeen zelf behandeld als basislijnafbeeldingen. Vanaf de volgende run worden ze vergeleken met de screenshots.
Best practices voor geautomatiseerde visuele tests
- Kies een tool die slim genoeg is om false positives te negeren. De tool zou in staat moeten zijn om anti-aliasing, pixel-offsets, enz. Te verwerken en slaagt niet voor uw tests vanwege deze redenen.
- Testautomatisering moet dynamische en bewegende inhoud aankunnen.
- Vertrouw niet op foutverhoudingen of configuratie van drempels. Het enige dat er toe moet doen, is of een mens dat verschil kan zien, en heeft dat invloed op de gebruikerservaring?
- Het automatiseringsalgoritme moet de structuur van de pagina kunnen analyseren en moet in staat zijn om lay-outvergelijkingen te maken.
- Geef de voorkeur aan het valideren van de volledige UI-pagina in plaats van de afzonderlijke componenten. Dit zorgt voor meer en betere dekking. Als u alleen specifieke componenten valideert, kunt u onverwachte bugs missen.
Geautomatiseerde testtools en visuele testframeworks
Tegenwoordig is er een grote verscheidenheid (bijna 30 plus) tools beschikbaar op de markt voor geautomatiseerd visueel testen. Sommige van deze tools zijn open source, andere zijn commercieel. De meeste van deze tools werken op dezelfde manier, maar ze streven een andere workflow na per doelgroep.
Voor front-end ontwikkelaars zijn er twee soorten frameworks die betrokken zijn bij visuele tests. Ten eerste heeft u een testrunner nodig waarmee u de tests kunt schrijven en uitvoeren. Ten tweede hebt u een browserautomatiseringsraamwerk nodig om gebruikersinteracties te repliceren. Deze twee frameworks worden gezamenlijk Visuele testcode genoemd.
Met behulp van deze testkaders maken de ontwikkelaars de code die echte gebruikersacties imiteert, zoals het typen van tekst of het klikken op knoppen. De testcode heeft commando's om screenshots te maken op relevante punten. Wanneer de test voor de eerste keer wordt uitgevoerd, wordt een eerste set screenshots gemaakt.
Deze schermafbeeldingen dienen als vergelijkingsbasis wanneer er wijzigingen in de applicatie zijn aangebracht. Zodra de basislijn is vastgesteld, voert de ontwikkelaar de code op de achtergrond uit. Als er een wijziging wordt gevonden, wordt het screenshot van de wijziging vastgelegd.
De testrunner vergelijkt dit screenshot met het baseline-screenshot voor dat codegebied. Als er verschillen worden gevonden tussen de afbeeldingen, wordt de test als een mislukking beschouwd en wordt de visuele bug gerapporteerd.
Als de hele testcode is uitgevoerd, wordt automatisch een rapport gegenereerd. Dit rapport wordt handmatig beoordeeld door een menselijke tester om alle screenshotafbeeldingen te controleren die verschillen van de basislijnafbeeldingen. Sommige tools genereren een diff-afbeelding om het verschil tussen de werkelijke en verwachte schermafbeelding te benadrukken.
wat is een bin-bestandstype
Als het verschil wordt veroorzaakt door een probleem in de code, kan de ontwikkelaar dat probleem oplossen en de code opnieuw uitvoeren. Als het verschil wordt veroorzaakt door een vereiste wijziging in de gebruikersinterface van de applicatie, beoordeelt de ontwikkelaar die schermafbeelding en werkt de schermafdruk van de basislijn bij zodat de toekomstige tests kunnen worden doorstaan.
Visueel testen omvat zowel gratis als betaalde tools. Laten we de tools in detail bespreken.
Lijst met de beste visuele testtools
Op code / script gebaseerde open-source en gratis tools
Hieronder vindt u de lijst met op code gebaseerde visuele validatietools die open-source zijn en gratis beschikbaar zijn.
- PhantomCSS (UJs CapserJs)
- FBSnapshotTestCase (Gebruikt XCTest)
- Tweelingen (Gebruikt JS DSL)
- Naald (Gebruikt Python)
- Rspec Page Regressie (Gebruikt Capibara)
- Pix-Diff (Gebruikt JS en gradenboog)
- Selenium Visual Diff (Gebruikt Java en WD)
- Vizregress (Gebruikt .NET en WD)
- VisualCeption (Gebruikt PHP en CodeCeption)
- Spook (Gebruikt een JS DSL)
Op configuratie gebaseerde open-source en gratis tools
Op configuratie gebaseerde visuele validatietools die open-source zijn en gratis beschikbaar zijn, worden hieronder ter referentie vermeld:
- BaskstopJS
- dpxdtMake –Verenigd
- CSSCritic
- Grunt Photobox
- VIFF
- Groene ui
- elf van Ierse folklore
- CSS visuele test
- Snap en vergelijk
- Grunt-Vigo
- Galen Framework
- Automotie
We zullen niet dieper ingaan op elk van de bovenstaande tools, maar laten we kort de beste bespreken.
Phantom CSS is een van de zeer populaire open-source tools voor visuele validatie. Het heeft 4.768 GitHub-sterren. Het helpt u met geautomatiseerde visuele regressietests. Het gebruikt CasperJS om de screenshots te maken en vergelijkt ze met de baseline screenshots met Resemble.js.
(beeld bron
Het genereert de beeldverschillen op basis van RGB-pixelverschillen. Deze tool is alleen nuttig als de gebruikersinterface voorspelbaar is.
FBSnapshotTestCase is ook een andere populaire tool in deze categorie. Het heeft 880 GitHub-sterren.
Het legt een geconfigureerde UIView of CALayer vast en gebruikt een methode genaamd render InContext: om een momentopname van een afbeelding van de inhoud te verkrijgen. Het vergelijkt deze afbeelding met een 'referentie-afbeelding' die in uw broncode-opslagplaats wordt bewaard en slaagt niet voor de test als de twee snapshots niet overeenkomen.
BackstopJS is een toonaangevende tool in de categorie van op configuratie gebaseerde tools. Het vangt de CSS Curveballs op. Het is een automatiseringstool voor visuele regressietests die de responsieve webinterface kunnen testen door de DOM-schermafbeeldingen in de loop van de tijd te matchen.
Het is een eenvoudig te gebruiken tool met een aantal geweldige functies, zoals gebruikersinterface voor rapportage in de browser, geïntegreerde docker-weergave, JUnit-rapporten, CLI-rapporten, enz.
Het Galen-framework is ook een van de beroemde open-source frameworks voor visuele validatietests. Met deze tool kun je op geautomatiseerde wijze de layout en responsive design van webapps testen.
(beeld bron
Dit raamwerk loopt goed in het seleniumrooster.
Laten we nu enkele commerciële tools en frameworks bespreken die beschikbaar zijn voor visuele testautomatisering!
Commerciële tools
# 1) Applitools
Het is een van de zeer populaire commerciële frameworks voor geautomatiseerde visuele tests en visuele regressietests. Deze tool biedt een door AI aangedreven cognitieve visie. Het maakt gebruik van kunstmatige intelligentie om u te helpen bij end-to-end visuele tests en monitoring.
Met Applitools kunt u automatisch honderden UI-componenten testen op alle platforms en configuraties zonder code te schrijven of met een zeer minimum aan code. Het heeft ondersteuning voor meer dan 40 testkaders en talen.
Het ondersteunt ook het DevOps-proces, waarmee u uw visuele testgevallen eenvoudig kunt integreren in de CI / CD-pijplijn. Met deze tool kunt u ook aangepaste visuele rapporten maken.
Dit raamwerk wordt gebruikt door een aantal topbedrijven, waaronder Sony, SAP, MasterCard en PayPal. Het heeft ook zeer positieve klantrecensies.
De leverancier biedt drie versies van dit framework, namelijk Starter, Enterprise Public Cloud en Enterprise Dedicated Cloud. U moet contact opnemen met de leverancier voor de prijzen.
Website: Applitools
# 2) Crossbrowsertesting Visual Testing
Crossbrowsertesting is een webtestplatform ontwikkeld door SmartBear voor het gehele testproces. Deze tool omvat zowel visuele tests als visuele regressietests.
De screenshot-testfunctie die door deze tool wordt geboden, legt schermafbeeldingen van volledige pagina's vast en helpt snel bij het vinden van visuele bugs en het opsporen van visuele inconsistenties. Om een screenshot-test te starten, moet u de URL opgeven en een aantal browsers kiezen.
Screenshot-tests zijn beschikbaar voor de meeste desktop-apparaten en populaire mobiele apparaten. U kunt uw browserresolutie mixen en matchen voor dynamische responsieve tests in desktopbrowsers en mobiele oriëntaties. Uw screenshot-test legt drie weergaven van elke configuratie vast, d.w.z. Windowed, Full-page en Full-page chromeless.
U kunt uw testresultaten snel filteren en de visuele bugs zien. U kunt ook naar een live test springen en de visuele defecten opsporen of corrigeren. U kunt lokale en ontwikkelomgevingen testen via een lokale verbindingstool die door deze software wordt geleverd.
Als u voor visuele regressietests met succes een screenshot-test hebt uitgevoerd, kunt u deze gewoon op dagelijkse, wekelijkse of maandelijkse basis plannen. De tool verzendt ook de testresultaten.
Deze tool heeft een geautomatiseerde vergelijkingsengine om geautomatiseerde schermafbeeldingen van dezelfde pagina in verschillende configuraties te maken. Hier kunt u een basislijnbrowser selecteren en vervolgens de gemarkeerde lay-outverschillen evalueren.
Het biedt ook enkele geavanceerde opties om uw test krachtiger te maken. Deze opties omvatten basisverificatie, inlogprofiel, Selenium-script, schermafdrukvertraging, e-mails verzenden, vaste elementen verbergen, enz.
Lees ook = >> Hoe Screenshot in Selenium te maken
Dit is een geprijsde tool. Er is echter ook een gratis proefversie beschikbaar. De Live-testversie van deze tool kost u $ 29 / maand, Geautomatiseerd testen kost $ 60 / maand en Onbeperkt testen kost $ 100 / maand.
Website: Crossbrowsertesten
# 3) Percy visuele tests
Percy is een van de krachtige tools voor geautomatiseerd visueel testen. Hiermee kunt u de visuele tests integreren, uitvoeren en beoordelen. Integratie kan worden gedaan via testautomatiseringsframeworks, CI / CD-services of rechtstreeks via uw applicatie.
Na integratie kunnen we beginnen met het uitvoeren van de benodigde visuele tests op de applicaties en componenten. Wanneer een visuele test wordt gestart, extraheert de Percy-tool UI-schermafbeeldingen in verschillende browsers en responsieve breedtes. Vervolgens wordt een pixel voor pixel basislijnvergelijking uitgevoerd en worden eventuele relevante visuele veranderingen in uw gebruikersinterface geïdentificeerd.
Nadat de schermafbeeldingen zijn weergegeven, kunt u ze op visuele problemen controleren.
De pixel voor pixel diffs en responsieve diffs die door deze tool worden geboden, geven een geweldige visuele dekking. Bovendien minimaliseert de snapshot-stabilisatiefunctie false positives.
Dit is een betaalde tool. Het biedt echter ook een gratis proefversie. De betaalde versies hebben drie smaken, namelijk Essential, Business en Enterprise. De Essential-versie kost $ 29 / maand, de Business-versie kost $ 849 / maand en de Enterprise-versie wordt op maat gemaakt volgens uw behoefte, dus de prijs zal dienovereenkomstig variëren.
Website: Percy visuele tests
# 4) Screener.io
Dit is een geautomatiseerde testtool waarmee u de tests in realtime in de cloud kunt opnemen en uitvoeren. Teststromen kunnen eenvoudig worden geautomatiseerd zonder dat codering vereist is. Het detecteert automatisch de UI-inconsistenties op verschillende platforms. Het ondersteunt ook het testen van de verhalenboekcomponenten.
Hiermee kunt u visuele tests uitvoeren in combinatie met functionele tests in dezelfde testrun, waardoor de algehele testdekking toeneemt. Bedrijven die screener.io gebruiken, zijn onder meer Yammer, Microsoft, uber, enz.
Het Starter-pakket van deze tool kost u ongeveer $ 249 / maand, het Perform-pakket kost $ 499 / maand en het Enterprise-pakket heeft aangepaste prijzen op basis van uw vereisten.
Website: Screener.io
# 5) laatste test
endtest is een UI-testplatform dat codeloze automatiseringstests ondersteunt met behulp van machine learning. Hiermee kunt u snel de geautomatiseerde tests maken, opslaan en rechtstreeks in de cloud uitvoeren. Ze hebben ook een Chrome-extensie waarmee u de tests kunt opnemen.
Deze tool heeft veel functies, zoals het genereren van willekeurige testgegevens, geavanceerde bewering, automatische back-ups, geolocatie, live video's, screenshot-vergelijking, enz.
Website: endtest
Gevolgtrekking
In deze tutorial hebben we besproken hoe belangrijk visuele validatietests zijn in het huidige scenario waarin de softwareapplicatie goed moet werken op meerdere configuraties van schermformaten, mobiele apparaten, besturingssystemen, schermresoluties, enz.
Wil je een goede gebruikerservaring, dan is visuele validatietesten net zo belangrijk als functioneel testen. Visuele tests en functionele tests, wanneer gecombineerd, kunnen een brede testdekking bieden.
Er is een breed scala aan open-source en commerciële tools en frameworks beschikbaar voor visuele validatietests. In deze tutorial hebben we enkele van de beste tools besproken. Die tools kunnen u inderdaad helpen met geautomatiseerde visuele tests en visuele regressietests.
Veel leesplezier!
Aanbevolen literatuur
- Beste softwaretesttools 2021 (QA Test Automation Tools)
- Alfatesten en bètatesten (een complete gids)
- Ultieme gids voor validatietesten
- 11 beste automatiseringstools voor het testen van Android-applicaties (Android App Testing Tools)
- Netwerkbeveiligingstests en de beste hulpprogramma's voor netwerkbeveiliging
- Functioneel testen versus niet-functioneel testen
- Primer eBook downloaden testen
- De verschillen tussen unit-tests, integratietests en functionele tests