responsive web design testing
In de huidige tijd is het gebruik van mobiele apparaten voor toegang tot internet gegroeid en behoorlijk populair geworden. Vrijwel elke internetgebruiker wil een mobiele versie van de website.
De meeste websites zijn echter niet zo geoptimaliseerd als ze zouden moeten zijn voor mobiele apparaten. De testers moeten een mobiel responsieve test uitvoeren op responsieve ontwerpen.
Traditionele softwareproducten worden op elk apparaat in wezen hetzelfde weergegeven.
Microsoft Office, bijvoorbeeld , ziet er op elke pc hetzelfde uit. Stel je voor dat je Microsoft Word precies zo gebruikt als het op je desktop draait en het op een iPhone4 bekijkt. De menu's en knoppen worden klein weergegeven, of u ziet slechts een hoek van het scherm en moet uitgebreide schuifbalken gebruiken. Hoe dan ook, de applicatie wordt in wezen onbruikbaar.
Deze frustrerende ervaring is precies wat elke ontwerper doormaakt wanneer hij probeert te ontwerpen voor het web.
De oplossing voor het probleem is iets dat 'responsief ontwerp' wordt genoemd, een techniek waarbij webpagina's de browser vragen wat de resolutie is en vervolgens de gebruikerservaring op een elegante manier opnieuw ontwerpen op basis van de beschikbare schermruimte. Ineens is het onmogelijk om precies te weten hoe uw software er in productie uit zal zien.
Dat betekent een teststrategie (en een automatiseringsstrategie) die moet kunnen experimenteren en leren wat ‘er goed uitziet’ en wat niet, bij verschillende resoluties.
Wat je leert:
- Handleiding voor beginners om responsieve website-ontwerpen te testen
- Wat is responsive webdesign?
- Voordelen van responsief ontwerp:
- Hoofdcomponenten van responsief websiteontwerp:
- Voorbeelden van responsief webontwerp
- Hoe u een responsieve website test
- Voorbeeldtestscenario's voor het testen van responsieve websites:
- Tools om een responsieve website te testen
- Uitdagingen bij het testen van responsief ontwerp en mogelijke oplossingen
- Tips voor responsieve webtests
- Gevolgtrekking
Handleiding voor beginners om responsieve website-ontwerpen te testen
Wanneer we een website proberen te openen, leest de server ' m.sub-domeinen ”Om te bepalen van welk type mobiel apparaat het verzoek afkomstig is. Op basis daarvan wordt de gebruiker omgeleid naar de bijbehorende mobiele versie.
Om dit 100% effectief te maken, moet elk apparaat zijn eigen ontwerp van de website hebben die er speciaal voor is gebouwd; fof bijvoorbeeld,een ander specifiek ontwerp voor Blackberry, iPhone, iPad, enz. rekening houdend met hun schermgrootte en resoluties.
Een verschillende webversie voor elke resolutie en elk apparaat is echter niet praktisch. De Ethan Marcotte kwam met een nieuwe aanpak: Responsive Web Design ( Achterwielaandrijving ) - dat lost dit probleem op.
Onze aanbeveling
# 1) LT-browser
LT-browser helpt gebruikers bij het testen en debuggen van hun website op meer dan 45 apparaatviewports. Test uw website op verschillende vooraf geïnstalleerde weergavepoorten voor mobiele apparaten en desktops met LT Browser, een ontwikkelvriendelijke browser voor foutopsporing in mobiele weergaven.
Voer gewoon uw website-URL in en selecteer het apparaat waarop u uw website wilt testen. U kunt tegelijkertijd twee apparaten kiezen voor vergelijking van zij aan zij.
Niet alleen testen, maar gebruikers kunnen ook onderweg hun website debuggen met behulp van ingebouwde DevTools aangeboden door LT Browser.
Het beste is dat gebruikers een aangepast apparaat kunnen maken op basis van hun vereisten, waardoor LT Browser onze eerste keuze is voor responsief testen.
Bezoek LT BrowserWat is responsive webdesign?
Achterwielaandrijvingdoelen voor websites om te reageren op hun apparaat, resolutie en in staat te zijn om correct weer te geven en aan te passen. Bijvoorbeeld als de gebruiker overschakelt van desktop / laptop naar iPad, dan moet de website automatisch de resolutiewijzigingen aanpassen, zoals de beeldgrootte enz. volgens de respectieve apparaatmogelijkheden.
In het kort,Reagerend ontwerpis 'Eén website voor elk scherm'
Het onderstaande scherm is eenvoorbeeldvan RWD:
Notitie: Echte tijdvoorbeeldvan een responsive website is www.fpl.com
In RWD is een website ontworpen om een superieure gebruikerservaring te bieden door gemakkelijke navigatie, duidelijke en eenvoudige gebruikersinterface, enz. Responsieve websites passen zich gemakkelijk aan en werken in alle resoluties, browsers, schermformaten, hardware en besturingssystemen.
- Responsive websites zijn gecodeerd in PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) en vele nieuwe frameworks die erg handig zijn om responsive designs te ontwikkelen.
- CSS- en HTML-functies worden gebruikt om schermresoluties en afbeeldingen automatisch te verkleinen.
- RW-ontwerp gebruikt breekpunten om de lay-out van een site te identificeren. Elk ontwerp wordt op verschillende breekpunten gebruikt. Het ene ontwerp wordt toegepast op een breekpunt, terwijl een ander ontwerp onder het breekpunt wordt gebruikt. Deze breekpunten zijn over het algemeen gebaseerd op de breedte van de browsers.
- Bij het ontwerpen van een responsive website houden de ontwikkelaars rekening met de inhoud, het ontwerp en de prestaties van de site op alle apparaten zorgen voor bruikbaarheid
Het diagram is een nauwkeurige vergelijking van hoe de inhoud zich aanpast aan de omgeving en het gedrag van het apparaat.
Notitie Behalve RWD is er nog een andere benadering genaamd Adaptief webdesign ( AWD Bij de AWD-benadering zal er voor elk apparaat een specifiek ontwerp zijn. AWD is echter mogelijk niet altijd geschikt. Bovendien kost het ontwerpen van AWD-sites meer tijd en geld in vergelijking met de RWD-sites.
Voordelen van responsief ontwerp:
# 1) Gebruikerservaring: Gebaseerd op het apparaat van waaruit we toegang krijgen tot een RW, verbergt het de ongebruikelijke elementen en helpt het de gebruikers hun doelen sneller te bereiken.Bijvoorbeeld:als we een RW openen vanaf mobiel, verbergt het de onbelangrijke elementen en versnelt het het laden van webpagina's.
#twee) Delen of koppelen: Voor een RW wordt slechts één URL gebruikt voor verschillende apparaten. Aangezien slechts een enkele URL alle gegevens en informatie van verschillende apparaten verzamelt, geeft dit een betere gebruikerservaring voor gebruikers.
# 3) Weinig of minimaal onderhoud vereist voor een RW.
# 4) RW-lay-outs zijn vloeiend.
Verschillen tussen responsief webontwerp en adaptief webontwerp:
RWD & AWD zijn nauw met elkaar verbonden.
- RWD reageert snel en positief op de veranderingen, terwijl AWD gemakkelijk kan worden aangepast voor een nieuw doel.
- RWD heeft meerdere vloeiende rasterlay-outs en AWD heeft meerdere lay-outs met vaste breedte.
- Afbeeldingen in RWD worden contextbewust genoemd.
Hoofdcomponenten van responsief websiteontwerp:
Responsive Web Design heeft drie hoofdcomponenten:
# 1) Flexibele lay-outs: Een website bouwen met een flexibel raster dat eenvoudig dynamisch kan worden aangepast aan elke breedte.
#twee) Mediaquery's: Bied verschillende stijlen voor de browsers en apparaten op basis van de context, zoals de oriëntatie van het apparaat, viewport, enz.
# 3)Flexibel medium: Naarmate de grootte van de viewports verandert, moeten de media (afbeeldingen, video's enz.) Ook hun grootte of resolutie aanpassen aan de vereisten.
Notitie 'Viewport' is het gedeelte van de browser waar de feitelijke inhoud van de website wordt weergegeven. Viewport bevat niet de werkbalken, tabbladen enz.
Voorbeelden van responsief webontwerp
Voorbeeld 1)
Open de link www.fpl.com vanaf verschillende apparaten en bekijk de URL. De URL van een responsieve website blijft voor alle apparaten hetzelfde.
naar) Weergave van de RW vanaf een desktop of laptop (groot schermformaat)
b) Zicht op de RW vanaf een tablet (middelgroot scherm)
c) Weergave van de RW vanaf een mobiel (klein schermformaat)
Voorbeeld # 2)
Open de site www.yepme.com vanaf een laptop en ook vanaf een mobiel en vergelijk de URL's. Dit yepme.com link is geen responsieve link.
naar) Weergave van een niet-responsieve website vanaf een desktop of laptop
beste vr-apps voor vr-box
b) Weergave van een niet-responsieve website vanaf een mobiel
Hoe u een responsieve website test
De responsieve ontwerptest betekent het testen van de website of URL van verschillende apparaten. In de praktijk is het niet mogelijk om de responsive website volledig te testen omdat we hiervoor verschillende systemen moeten opzetten voor verschillende schermformaten.
Een mogelijke manier voor de responsieve test is door de grootte van het browservenster aan te passen volgens het testscenario.
Sommige browsers, zoals IE en Safari, bieden plug-ins of browserextensies waarmee u het viewport-gebied in pixels kunt bekijken. Dit maakt het testen eenvoudig door de gewenste schermgrootte te krijgen door de pixels aan te passen.
Andere browsers zoals Chrome bieden software of een programma met de naam 'Emulator' waardoor de schermfuncties en -omgeving kunnen worden gewijzigd volgens het gewenste apparaat dat nodig is voor het testen.
Notitie: 'Emulator' is software of programma dat wordt geleverd binnen de browser en die ervoor zorgt dat het hostsysteem (huidige browser) zich gedraagt als het gastsysteem (browser van het gewenste apparaat dat moet worden getest op de gewenste schermgrootte).
Hoewel de emulators u niet de exacte omgeving kunnen bieden die nodig is om te testen, zijn ze een kosteneffectieve oplossing om een RW op hoog niveau te testen.
Voorbeeldtestscenario's voor het testen van responsieve websites:
De responsive webdesign-tester moet ervoor zorgen dat responsive design voldoet aan al het onderstaande test scenario's om ervoor te zorgen dat het een foutvrij responsief ontwerp is.
# 1) Responsieve websitelink of URL moet hetzelfde zijn voor alle browsers op elk apparaat, ongeacht de schermresolutie.
Veronderstellen www.abc.com is een responsive website. Als we het openen op een laptop en op een mobiele telefoon, moet de URL op beide apparaten hetzelfde zijn. De website die in de mobiele browser wordt geopend, mag niet beginnen met www.m.abc.com of www.mobile.abc.com
Voorbeeld: Open de website www.kotak.com vanaf een laptop en open hetzelfde ook vanaf mobiel en bekijk de URL op beide apparaten. De URL is niet hetzelfde voor beide apparaten.
Onderstaande momentopname laat zien hoe de URL verandert voor een niet-responsieve website op verschillende apparaten zoals laptop en mobiel.
Open de website www.w3schools.com vanaf een laptop en vanaf mobiel en controleer de URL's. Het moet voor beide apparaten hetzelfde zijn.
Onderstaande momentopname laat zien dat de URL hetzelfde blijft voor een responsieve website op verschillende apparaten:
#twee) De weergavelocatie van de inhoud (afbeeldingen, sublinks, menu's, enz.) Van een responsieve website moet dynamisch veranderen volgens de verandering in de schermresolutie. Dat wil zeggen, als we de schermresolutie veranderen van de grootte van de laptop naar een mobiel, dan zou de weergave van menu-opties dynamisch moeten veranderen.
Voorbeeld: Open de link www.fpl.com vanaf een laptop en klik op het menu in de rechterbovenhoek van het venster. Menu-opties worden weergegeven zoals hieronder weergegeven:
Rustful Web Services Java sollicitatievragen
Open www.fpl.com vanaf mobiel en klik op het menu in de rechterbovenhoek van het venster. De menu-opties zijn als volgt:
Notitie: Dit scenario kan ook worden getest met browseremulators (Voormalig:chroom).
Open de website www.fpl.com via een bureaublad en kijk hoe de menu-opties worden weergegeven. Zie onderstaande momentopname:
Pas nu de grootte van het browservenster aan naar de grootte van het mobiele scherm en controleer vervolgens de weergave van de menu-opties. Zie onderstaande momentopname:
# 3) URL's van een responsieve website moeten ook resolutiespecifiek zijn.
Voorwaarde om dit scenario te testen: Vraag de ontwikkelaar om een sublink in te voegen in de Responsive testing-website waar de sublink niet reageert.
Bijvoorbeeldkan de ontwikkelaar een link invoegen www.snapdeal.com naar onze testwebsite.
Open nu de responsieve testwebsite vanaf een mobiele telefoon en klik op de sublink die wordt vermeld in de vereiste. Dan moet de URL van de sublink veranderen in https://m.snapdeal.com
# 4) Hetzelfde scenario kan ook vanaf een laptop worden getest. Open de RW vanaf een desktop of laptop en klik op de sublink (vermeld in de eerste vereiste van testscenario drie) die niet reageert. De URL van de sublink mag niet veranderen (aangezien we dit scenario testen vanaf de laptop, moet de URL hetzelfde blijven).
# 5) Voorwaarde om dit scenario te testen: Vraag de ontwikkelaar om een sublink in te voegen,bijvoorbeeld, www.paytm.com naar de testsite. Op het mobiele apparaat waarop u dit scenario gaat uitvoeren, moet de respectieve toepassing van Paytm op de mobiele telefoon zijn geïnstalleerd.
Open nu onze test-responsieve website vanaf een mobiele telefoon en klik op de 'paytm' -sublink. Vervolgens moet de Paytm-applicatie die op de mobiel is geïnstalleerd worden geopend. (De gebruiker mag niet worden omgeleid naar de website in de browser of een ander venster; alleen de app mag geopend zijn.)
# 6) De afbeeldingen op de responsive website zijn resolutiespecifiek. Dit betekent dat de resolutie van de afbeelding die is ingevoegd in de code van een responsieve website die is ontworpen voor mobiele compatibiliteit, anders is dan die van een desktop of tablet. Elke schermgrootte moet zijn specifieke afbeelding in het ontwerp hebben.
Voorwaarde om dit scenario te testen: Het testen en controleren van de resolutie van de afbeeldingen kan een zware taak zijn. Vraag de ontwikkelaar om drie verschillende afbeeldingen in de responsive website afzonderlijk in te voegen voor mobiel, tablet en desktop.
Open de website voor het testen van responsive design vanaf een desktop, tablet en mobiel. De afbeeldingen op de responsieve webpagina moeten voor alle drie de apparaten anders zijn.
(OF)
Open de test-RW vanaf een desktop en controleer de afbeelding op de webpagina. Verander nu het formaat van het venster naar dat van een tablet en controleer de afbeelding. Dit moet anders zijn dan de afbeelding die wordt weergegeven voor de grootte van het bureaublad. Nu kunt u het formaat van het venster wijzigen naar een mobiel scherm en de afbeelding controleren. Deze afbeelding moet ook verschillen van de bovenstaande twee afbeeldingen.
Voorbeeld: Open de responsieve site www.fpl.com vanaf een desktop; klik met de rechtermuisknop op de afbeelding op het startpagina -> selecteer 'Inspecteren' uit het menu. Controleer de afbeeldingsresolutie (controleer de bestandsextensie van de afbeelding .jpg) aan de hand van de code. Zie de onderstaande screenshot:
Verander nu het formaat van hetzelfde venster naar dat van de schermgrootte van een tablet en controleer de beeldresolutie. (De extensie van de afbeelding is medium.jpg)
Verander ten slotte de grootte van het venster naar die van een mobiel scherm en controleer de afbeelding. (De extensie van de afbeelding is small.jpg)
# 7) Klik willekeurig ergens op de webpagina en controleer of gegevens of tekst zonder hyperlink worden geïnitieerd en omgeleid naar een andere pagina of inhoud. Hiermee wordt getest of een woord of tekst is gemarkeerd als de hyperlink in het achterkant
Notitie In een paar projecten spreken de vereisten over de pixelgrootte en resolutie van het scherm voor bepaalde apparaten.Bijvoorbeeld, een tabletweergave voor hun RW moet om 15:15 pixels zijn en voor een mobiel moet deze om 10:10 zijn, enz.)
Testen op de dynamische veranderingen die zouden moeten plaatsvinden voor de RW-weergave wanneer we de pixelgrootte wijzigen, is het belangrijkste scenario.
# 8) Open onze test-RW in een browser en bekijk de inhoud en weergave van hoofdafbeeldingen. Verander nu het formaat van het venster tot het breekpunt van de tabletgrootte en controleer de veranderingen die zouden moeten gebeuren aan de beeldresolutie en alle andere inhoud. Bij breekpunten moeten de wijzigingen dynamisch plaatsvinden (soms vinden de wijzigingen niet plaats bij de breekpunten en kunnen ze veranderen bij een andere pixelgrootte, wat een defect is).
Tools om een responsieve website te testen
Er zijn enkele tools (websites) waarmee u een voorbeeld van de webpagina's van onze responsieve website kunt bekijken.
Bijvoorbeeld,we kunnen onze responsive site testen op verschillende voorgedefinieerde schermresoluties (smartphones, tablets, etc.) en ook aanpassen aan elke gewenste resolutie. Deze tools maken testactiviteiten eenvoudiger en sneller. Dergelijke in-browser-tools kunnen worden aangeduid als Verantwoordelijke
Sommige tools bieden ook een belangrijke functie voor het vastleggen van de responsieve schermafbeelding waarmee we de website-ontwerpen, HTML, lay-outs, CSS enz. Van de responsieve website kunnen testen.
Deze tools zijn geweldige alternatieven wanneer de daadwerkelijke apparaten niet beschikbaar of gereed zijn.
Hier is een snelle lijst met tools:
# 1) Responsieve ontwerpchecker
Voer de URL van de responsive website die moet worden getest in het bovenstaande veld 'Voer hier uw URL in' in en klik op 'GO'. U kunt zelfs het apparaat en de resolutie selecteren waarmee u de responsieve site wilt bekijken.
Ga nu naar binnen www.fpl.com selecteer in het veld de lay-out “Nexus 7 PORTRAIT” en klik op GO. De site wordt weergegeven in de resolutie van het geselecteerde formaat.
#twee) Screenfly
Ga naar de testsite www.fpl.com en klik op GO.
Verander de lay-out naar desktop, tablet, mobiel, etc. en test de site. Met deze tool kun je zelfs de resolutie aanpassen.
Bijvoorbeeld, stel de schermresolutie in op 512 x 256 en test de site.
Notitie Met deze tool kun je zelfs testen scenario 6 eenvoudig door de resoluties te wijzigen en de naam van de afbeelding te verifiëren.
# 3) Designmodo
Voer een URL in, www.makemytrip.com en klik op Enter.
Aan de rechterkant van de browser heeft u de mogelijkheid om de lay-out van de website te wijzigen naar die van een specifiek mobiel model of apparaat enz.
Notitie Deze tool heeft nog een andere functie, zoals het scherm slepen en de resolutie aanpassen aan de door ons gewenste resolutie.
# 4) isResponsive
Voer de test-URL in, www.fpl.com in het veld en klik op de knop 'Test'.
Notitie: Deze tool heeft slechts een paar vaste lay-outopties waarop onze site kan worden getest.
# 5) Mattkersley
Als u uw RW op meerdere schermformaten tegelijk wilt zien, dan is deze tool mattkersley is wat je nodig hebt.
Voer nu uw test-URL in de adresbalk in en klik op Enter. U kunt de RW op meerdere schermformaten tegelijk bekijken.
# 6) Standaard, chrome heeft weinig Dev Tools waarmee we de apparaatmodus en hun mogelijkheden kunnen simuleren.
hoe u een firewall op een netwerk instelt
Om deze functie van Chrome te gebruiken, opent u een testwebsite voor responsief ontwerp, zoals www.fpl.com in Chrome en klik met de rechtermuisknop op de webpagina en selecteer de optie 'Inspecteren' in het menu of druk op Ctrl + Shift + I. Het onderstaande venster wordt onder aan de webpagina geopend.
Klik nu op het pictogram zoals weergegeven in de onderstaande schermafbeelding.
De mobiele modus van de webpagina wordt geopend. Van daaruit kunt u de resolutie wijzigen in elke specifieke pixel en ook in elk vooraf gedefinieerd mobiel model dat wordt weergegeven in het vervolgkeuzemenu. Bekijk de onderstaande snapshot om een duidelijk idee te krijgen:
Notitie: We kunnen de webpagina ook wijzigen in staande of liggende weergave.
Andere goede tools om responsive design te testen:
7) Reagerend ontwerp
8) BrowserStack
9) Troy
10) AmIResponsiveDesign
elf) Verantwoordelijke
12) Studiopress
13) Responsieve test
14) Voor MAC-machines hebben we een aparte applicatie genaamd ' FIT ”Om een RW te testen. Met deze applicatie kun je verschillende breekpunten op verschillende apparaten instellen om te testen. APTUS is geen gratis applicatie en we moeten het kopen in de Mac App Store.
Uitdagingen bij het testen van responsief ontwerp en mogelijke oplossingen
Dynamische teststrategie
Door van 320 × 480 (de resolutie van de iPhone4) naar 2048 × 2048 (een grote monitor) te gaan, blijven er meer dan 4 miljoen mogelijke browsergroottes over. De meeste testgroepen beperken de lijst met testapparaten tot een handvol. Zelfs dan is het handmatige testprobleem moeilijk of onmogelijk te benaderen.
Ontwikkelaars kunnen onmogelijk alle platformproblemen voorzien en testers kunnen ze niet opmerken voordat ze worden uitgebracht. Daarom vinden we af en toe een probleem met de gebruikersinterface in de productie.
Misschien heeft iemand de grootte van zijn browser verkleind, waardoor belangrijke tekstvelden onder een paginalabel vallen. Misschien dat een code die is ontworpen om dynamische paginagrootte af te handelen, modale datumkiezers onderbreekt en nooit wordt opgemerkt door een normale test die is gebouwd op WebDriver. Er zijn te veel weergave-opties om tests voor te bouwen en er is te weinig tijd.
Laten we eens kijken naar eenrealistisch voorbeeldom het probleem te illustreren.
Dynamische pagina's, zaken als advertentieschuifregelaars en inhoud die wordt gestreamd van gebruikers in verschillende paginaformaten, vormen een hoofdbestanddeel van veel softwareproducten. Voeg daarbij het feit dat we niet kunnen voorspellen hoe de pagina zal worden weergegeven en veel automatiseringsinspanningen beginnen met een mislukking.
Ik zie twee populaire oplossingen voor dit probleem: een gestandaardiseerde of baseline dataset gebruiken en elke keer dat de testsuite wordt uitgevoerd vernieuwen, en de dingen één omgeving of platform tegelijk nemen.
Standaardgegevens zorgen ervoor dat de pagina-inhoud er elke keer hetzelfde uitziet als we de testomgeving laden. Die strategie gecombineerd met zoiets als Sauce Labs dat mensen toegang geeft tot veel platforms en je komt behoorlijk ver.
Deze aanpak kost tijd en middelen. U hebt tijd nodig van iemand met databasetoegang, meestal een DBA, om database-exporten te maken en bij te werken. En iemand moet scripts maken om scripts op te zetten en te verwijderen om de testomgeving te onderhouden. Na al deze inspanningen zou je kunnen eindigen met het soort opgeschoonde omgevingsbugs die je graag verstopt.
Als alternatief kunt u Visual Testing-technologie gebruiken om tests te automatiseren op webpagina's met verschillende lay-out en inhoud. Met behulp van deze tooling kunt u tests maken zonder wijzigingen in uw testomgeving en zonder dat u vaardigheden nodig hebt van mensen buiten uw testgroep.
Laten we een voorbeeld bekijken.
Overweeg de mobiele Twitter-app.
Dit product is een combinatie van continu veranderende gebruikersinhoud en advertenties. Er zijn ook enkele kernonderdelen van de gebruikersinterface, zoals de nieuwsfeed en meldingen, in de koptekst.
Als u een visuele testtool gebruikt, kunt u beginnen met het maken van een schermopname van de hele pagina waarop u kunt scrollen, niet alleen het zichtbare gebied. U kunt een vergelijkingsoptie kiezen die tekstinhoud negeert, maar zich richt op elementen op de pagina.
Bijvoorbeeld je zou kunnen zien dat de velden voor tweets bestaan, dat elke tweet een naamelement en een datum / tijd-element heeft, zonder je zorgen te maken over wat er in de elementen zit.
Het zoeken naar elementen op volledige pagina's verlicht ook de onderhouds- en complexiteitsbelasting die we bij veel geautomatiseerde tests zien. In plaats van gegevens op een pagina te manipuleren, op te slaan, te scrollen en vervolgens te verifiëren, krijgt u alles in één keer. Dit betekent dat er minder code moet worden geschreven, minder code moet worden onderhouden en minder valse positieven tijdens de nachtelijke testruns.
Responsieve tests voor responsief ontwerp:
Responsief ontwerp heeft het combinatorische probleem toegevoegd aan elk beschikbaar platform. De vraag is; van al deze mogelijke platforms en schermformaten, die we selecteren voor de beste testdekking.
Door het aantal omgevingen dat we dekken terug te brengen tot alleen de meest populaire, wordt de technische taak eenvoudiger en wordt ook het dekkingsprobleem genegeerd.
Het vergroten van het aantal omgevingen met alleen een automatiseringsraamwerk creëert een nachtmerrie voor onderhoud en voegt mogelijk een onoplosbaar testprobleem toe.
De combinatie van goede visuele testtools met een flexibel UI-automatiseringsraamwerk, zoals een webstuurprogramma, kan de technische aspecten van dit probleem niet alleen gemakkelijker maken, maar ook oplosbaar maken.
Het doel is een goede dekking van de gebruikersinterface met een redelijke onderhoudslast. Visueel testen is uw enige robuuste en schaalbare optie.
Tips voor responsieve webtests
# 1) Bij het testen van een RW moet u rekening houden met de consistentie van het ontwerp, zoals de uitlijning van afbeeldingen, teksten, opvulling rond de randen, enz. In alle browsers en besturingssystemen.
#twee) Tijdens het testen van een RW moet de tester weten wat hij moet testen en hoe hij op meerdere apparaten op verschillende breekpunten moet testen. Anders kan het behoorlijk uitputtend en desoriënterend zijn.
# 3) Voor het grondig testen van een responsive website is de coördinatie tussen tester en ontwikkelaar een must. De ontwikkelaar moet testers helpen bij het creëren van de voorwaarden die worden genoemd in de voorwaarden van de testcases.
# 4) Controleer of de webpagina's leesbaar zijn bij alle resoluties, d.w.z. dat de inhoud leesbaar moet zijn, zelfs als we de grootte van de browser aanpassen naar een mobiel scherm.
# 5) De belangrijke inhoud van de RW moet zichtbaar zijn voor alle breekpunten, d.w.z. als we de browsergrootte wijzigen van desktopscherm naar mobiel scherm, moeten de hoofdafbeeldingen, hoofdtekst, menu, enz. Hetzelfde blijven.
# 6) Als de grootte van de browser wordt aangepast om te testen, dan zou elk klikgebied (zoals knoppen, menu's, sublinks, enz.) Van de RW geschikt moeten zijn om op te klikken.
# 7) Het aanpassen van het formaat van de browser en het testen van de responsieve website kunnen slechts een paar grote problemen identificeren, terwijl er op mobiele apparaten een paar andere problemen kunnen zijn met betrekking tot vingerbewegingen, tikken, enz. Het testen van deze specifieke functies op de daadwerkelijke apparaten kan leiden tot een betere opsporing en verwijdering van defecten.
Gevolgtrekking
Wanneer we aan het testen zijn, zal responsief ontwerp veel uitdagingen met zich meebrengen. U moet op een efficiënte manier denken om de uitdagingen te overwinnen.
Het testen van een responsive website is erg belangrijk voor een succesvolle toekomst van velen mobiele applicaties. Mobiele gebruikers zullen alleen maar toenemen en hun verwachtingen verschillen sterk van die van desktopgebruikers. Implementatie en grondig testen van RWD is een geweldige manier om uw site in te richten om aan de verwachtingen te voldoen.
Implementatie en grondig testen van RWD is een geweldige manier om uw site in te richten om aan de verwachtingen te voldoen.
We hopen dat de informatie, tips en testscenario's die in dit artikel worden besproken, zeker zullen helpen bij het testen van uw responsieve website.
Over de auteur: Dit is een gastpost van Laxmi. Ze heeft meer dan 7 jaar ervaring in het testen van software en werkt momenteel als senior software test engineer.
Probeer alle voorbeelden in dit artikel en laat het ons weten als u vragen / opmerkingen heeft.
Aanbevolen literatuur
- Alfatesten en bètatesten (een complete gids)
- Build Verification Testing (BVT Testing) Complete Guide
- Functioneel testen versus niet-functioneel testen
- Soorten softwaretests: verschillende testtypen met details
- Beste softwaretesttools 2021 (QA Test Automation Tools)
- ETL-testen Tutorial datawarehouse-testen (een complete gids)
- Handleiding voor het testen van webapplicaties
- Beste QA-softwaretestservices van SoftwareTestingHelp