Test di responsive web design: la guida completa per principianti

responsive web design testing

Nell'era odierna, l'uso di dispositivi mobili per accedere a Internet è cresciuto ed è diventato molto popolare. Quasi ogni utente di Internet desidera una versione mobile del sito web.

Tuttavia, la maggior parte dei siti Web non è ottimizzata come dovrebbe essere per i dispositivi mobili. I tester devono eseguire un test reattivo mobile su progetti reattivi.

I prodotti software tradizionali rendono essenzialmente lo stesso su qualsiasi dispositivo.

Microsoft Office, per esempio , ha lo stesso aspetto su tutti i personal computer. Immagina di prendere Microsoft Word esattamente come viene eseguito sul desktop e di visualizzarlo su un iPhone4. O i menu e i pulsanti appariranno minuscoli, oppure vedrai solo un angolo dello schermo e dovrai utilizzare ampie barre di scorrimento. In ogni caso, l'applicazione diventa essenzialmente inutilizzabile.

Questa esperienza frustrante è esattamente ciò che ogni designer attraversa quando cerca di progettare per il web.

La soluzione al problema è qualcosa chiamato 'design reattivo', una tecnica per fare in modo che le pagine web chiedano al browser qual è la risoluzione, quindi riprogetta con grazia l'esperienza dell'utente in base allo spazio disponibile sullo schermo. All'improvviso, è impossibile sapere esattamente come apparirà il software in produzione.

Ciò significa una strategia di test (e una strategia di automazione) che deve essere in grado di sperimentare e apprendere cosa 'sembra giusto' e cosa no, a varie risoluzioni.

Cosa imparerai:

• Guida per principianti per testare progetti di siti web reattivi
  • Cos'è il responsive web design?
  • Vantaggi del responsive design:
  • Componenti principali del responsive website design:
  • Esempi di responsive web design
  • Come testare un sito Web reattivo
  • Scenari di test di esempio per test di siti Web reattivi:
  • Strumenti per testare un sito Web reattivo
  • Sfide di testare il responsive design e le possibili soluzioni
  • Suggerimenti per il test Web reattivo
• Conclusione
  • Lettura consigliata

Guida per principianti per testare progetti di siti web reattivi

Quando proviamo ad aprire un sito web, il server legge ' m. sottodomini 'Per identificare il tipo di dispositivo mobile da cui ha avuto origine la richiesta. Sulla base di ciò, reindirizza l'utente alla versione mobile corrispondente.

Per renderlo efficace al 100%, ogni dispositivo dovrebbe avere il proprio design del sito web costruito appositamente per esso; fo esempio,un design specifico diverso per Blackberry, iPhone, iPad, ecc. tenendo conto delle dimensioni e delle risoluzioni dello schermo.

Tuttavia, una versione web diversa per ogni risoluzione e dispositivo non è pratica. Il Ethan Marcotte ha escogitato un nuovo approccio: Responsive Web Design ( RWD ) - che risolve questo problema.

La nostra raccomandazione

# 1) Browser LT

Browser LT aiuta gli utenti a testare ed eseguire il debug del proprio sito Web su oltre 45 visualizzazioni di dispositivi. Testa il tuo sito web su diverse porte di visualizzazione per dispositivi mobili e desktop preinstallate con LT Browser, un browser intuitivo per il debug della visualizzazione mobile.

Basta inserire l'URL del tuo sito web, selezionare il dispositivo su cui testare il tuo sito web. È possibile scegliere contemporaneamente due dispositivi per il confronto della vista laterale.

Non solo i test, ma gli utenti possono anche eseguire il debug del proprio sito Web in movimento con l'aiuto di DevTools integrati offerti da LT Browser.

La parte migliore è che gli utenti possono creare un dispositivo personalizzato in base alle loro esigenze, rendendo LT Browser la nostra prima scelta per i test reattivi.

Cos'è il responsive web design?

RWDobiettivi per i siti Web di reagire al loro dispositivo, risoluzione ed essere in grado di renderizzare e adattarsi correttamente. Per esempio, se l'utente passa dal desktop / laptop all'iPad, il sito Web dovrebbe adattare automaticamente le modifiche alla risoluzione come la dimensione dell'immagine ecc. in base alle rispettive capacità del dispositivo.

In breve,Design reattivoè 'Un sito web per ogni schermo' .

La schermata sottostante è un fileesempiodi RWD:

Nota: Tempo realeesempiodi un sito Web reattivo è www.fpl.com

In RWD, un sito Web è progettato per offrire un'esperienza utente superiore attraverso una facile navigazione, un'interfaccia utente chiara e semplice, ecc. I siti Web reattivi si adattano facilmente e funzionano con tutte le risoluzioni, browser, dimensioni dello schermo, hardware e sistemi operativi.

• I siti Web reattivi sono codificati in PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) e molti nuovi framework che sono molto utili per sviluppare progetti reattivi.
• Le funzionalità CSS e HTML vengono utilizzate per ridimensionare automaticamente le risoluzioni dello schermo e le immagini.
• Il design RW utilizza punti di interruzione per identificare il layout di un sito. Ogni disegno viene utilizzato in diversi punti di interruzione. Un disegno viene applicato su un punto di interruzione mentre un altro disegno viene utilizzato sotto il punto di interruzione. Questi punti di interruzione sono generalmente basati sulla larghezza dei browser.
• Durante la progettazione di un sito Web reattivo, gli sviluppatori considerano il contenuto, il design e le prestazioni del sito su tutti i dispositivi garantire l'usabilità .

Il diagramma è una similitudine accurata di come il contenuto si adatta all'ambiente e al comportamento del dispositivo.

Nota : Oltre a RWD esiste un altro approccio chiamato Adaptive Web Design ( AWD ) . Nell'approccio AWD, ci sarà un design specifico per ogni dispositivo. Tuttavia, AWD potrebbe non essere sempre adatto. Inoltre, la progettazione di siti AWD richiede più tempo e denaro rispetto ai siti RWD.

Vantaggi del responsive design:

# 1) Esperienza utente: Basato sul dispositivo da cui accediamo a un RW, nasconde gli elementi insoliti e aiuta gli utenti a raggiungere i loro obiettivi più velocemente.Per esempio:se apriamo un RW da mobile nasconde gli elementi non importanti e velocizza il caricamento delle pagine web.

#Due) Condivisione o collegamento: Per un RW viene utilizzato un solo URL per vari dispositivi. Poiché solo un singolo URL sta accumulando tutti i dati e le informazioni da vari dispositivi, offre una migliore UX per gli utenti.

# 3) Manutenzione minima o minima richiesta per un RW.

# 4) I layout RW sono fluidi.

Differenze tra Responsive Web Design e Adaptive Web Design:

RWD e AWD sono strettamente correlati l'uno all'altro.

• RWD reagisce rapidamente e positivamente ai cambiamenti mentre AWD può essere modificato facilmente per un nuovo scopo.
• RWD ha più layout a griglia fluida e AWD ha più layout a larghezza fissa.
• Le immagini in RWD vengono chiamate sensibili al contesto.

Componenti principali del responsive website design:

Il Responsive Web Design ha tre componenti principali:

# 1) Layout flessibili: Creazione di un sito Web con una griglia flessibile che può essere facilmente ridimensionata a qualsiasi larghezza in modo dinamico.

#Due) Query multimediali: Fornire vari stili per i browser e i dispositivi in ​​base al contesto, come l'orientamento del dispositivo, la visualizzazione, ecc.

# 3)Mezzo flessibile: Man mano che le dimensioni dei viewport cambiano, anche i media (immagini, video ecc.) Devono cambiare la loro dimensione o risoluzione in base ai requisiti.

Nota : 'Viewport' è l'area del browser in cui viene visualizzato il contenuto effettivo del sito web. Viewport non include le barre degli strumenti, le schede ecc.

Esempi di responsive web design

Esempio 1)

Apri il link www.fpl.com da vari dispositivi e osservare l'URL. L'URL di un sito Web reattivo rimane lo stesso per tutti i dispositivi.

per) Vista dell'RW da un desktop o laptop (dimensioni dello schermo di grandi dimensioni)

b) Vista della RW da un tablet (schermo di medie dimensioni)

c) Vista del RW da un cellulare (dimensioni dello schermo ridotte)

Esempio # 2)

Apri il sito www.yepme.com da un laptop e anche da un cellulare e confronta gli URL. Questo yepme.com il collegamento non è un collegamento reattivo.

per) Visualizzazione di un sito Web non reattivo da un desktop o laptop

implementazione dell'albero binario nel codice sorgente c ++

b) Visualizzazione di un sito Web non reattivo da un dispositivo mobile

Come testare un sito Web reattivo

Il test di responsive design significa testare il sito web o URL da diversi dispositivi. In pratica, non è possibile testare completamente il sito Web reattivo perché per farlo dobbiamo impostare vari sistemi per varie dimensioni di schermo.

Un modo possibile per il test reattivo è ridimensionare le dimensioni della finestra del browser in base allo scenario di test.

Alcuni browser, come IE e Safari, forniranno plug-in o estensioni del browser che ti aiuteranno a visualizzare l'area di visualizzazione in pixel. Ciò semplifica il test ottenendo la dimensione dello schermo desiderata modificando i pixel.

Altri browser come Chrome forniscono un software o un programma chiamato 'Emulatore' che aiuterà a cambiare le caratteristiche dello schermo e l'ambiente secondo il dispositivo desiderato necessario per il test.

Nota: 'Emulatore' è un software o un programma fornito all'interno del browser che fa sì che il sistema host (browser corrente) si comporti come il sistema guest (browser del dispositivo desiderato che deve essere testato per le dimensioni dello schermo desiderate).

Anche se gli emulatori non sono in grado di fornire l'ambiente esatto necessario per i test, sono una soluzione conveniente per testare un RW ad alto livello.

Scenari di test di esempio per test di siti Web reattivi:

Il tester del responsive web design dovrebbe assicurarsi che il responsive design soddisfi tutto quanto indicato di seguito scenari di prova per garantire che sia un design reattivo privo di bug.

# 1) Il collegamento o l'URL del sito Web reattivo deve essere lo stesso per tutti i browser in ogni dispositivo, indipendentemente dalla risoluzione dello schermo.

Supponiamo www.abc.com è un sito web reattivo. Se lo apriamo su un laptop e su un telefono cellulare, l'URL dovrebbe essere lo stesso su entrambi i dispositivi. Il sito web aperto nel browser del cellulare non dovrebbe iniziare con www.m.abc.com o www.mobile.abc.com

Esempio: Apri il sito web www.kotak.com da un laptop e apri lo stesso anche dal cellulare e osserva l'URL in entrambi i dispositivi. L'URL non è lo stesso per entrambi i dispositivi.

L'istantanea sottostante mostra come cambia l'URL per un file sito Web non reattivo su dispositivi diversi come laptop e dispositivi mobili.

Apri il sito web www.w3schools.com da un laptop e da un cellulare e controlla gli URL. Dovrebbe essere lo stesso per entrambi i dispositivi.

L'istantanea sottostante mostra che l'URL rimane lo stesso per un sito Web reattivo su dispositivi diversi:

#Due) La posizione di visualizzazione del contenuto (immagini, collegamenti secondari, menu, ecc.) Di un sito Web reattivo dovrebbe cambiare dinamicamente in base alla modifica della risoluzione dello schermo. Cioè, se cambiamo la risoluzione dello schermo dalle dimensioni del laptop a un cellulare, la visualizzazione delle opzioni di menu dovrebbe cambiare dinamicamente.

Esempio: Apri il link www.fpl.com da un laptop e fare clic sul menu nell'angolo in alto a destra della finestra. Le opzioni di menu vengono visualizzate come mostrato di seguito:

cosa fa il doppio in java

Aperto www.fpl.com dal cellulare e fare clic sul menu nell'angolo in alto a destra della finestra. Le opzioni del menu sono le seguenti:

Nota: Questo scenario può essere testato anche utilizzando emulatori di browser (Ex:cromo).

Apri il sito web www.fpl.com attraverso un desktop e osservare come vengono visualizzate le opzioni di menu. Vedi sotto l'istantanea:

Ora ridimensiona la finestra del browser a quella della dimensione dello schermo del cellulare e quindi controlla la visualizzazione delle opzioni di menu. Vedi sotto l'istantanea:

# 3) Anche gli URL di un sito Web reattivo dovrebbero essere specifici per la risoluzione.

Prerequisito per testare questo scenario: Chiedere allo sviluppatore di inserire qualsiasi collegamento secondario nel sito Web di test reattivo in cui il collegamento secondario non è reattivo.

Per esempio, lo sviluppatore può inserire il collegamento www.snapdeal.com al nostro sito web di test.

Ora, apri il sito Web di test reattivo da un cellulare e fai clic sul collegamento secondario menzionato nel prerequisito. Quindi l'URL del collegamento secondario dovrebbe cambiare in https://m.snapdeal.com .

# 4) Lo stesso scenario può essere testato anche da un laptop. Aprire l'RW da un desktop o laptop e fare clic sul collegamento secondario (menzionato nel prerequisito dello scenario di test tre) che non risponde. L'URL del collegamento secondario non dovrebbe cambiare (poiché stiamo testando questo scenario dal laptop, l'URL dovrebbe rimanere lo stesso).

# 5) Prerequisito per testare questo scenario: Chiedi allo sviluppatore di inserire qualsiasi collegamento secondario,per esempio, www.paytm.com nel sito di test. Il dispositivo mobile in cui eseguirai questo scenario dovrebbe avere la rispettiva applicazione di Paytm installata nel cellulare.

Ora apri il nostro sito Web reattivo di test da un cellulare e fai clic sul collegamento secondario 'paytm'. Quindi dovrebbe essere aperta l'applicazione Paytm installata nel cellulare. (L'utente non deve essere reindirizzato al sito Web nel browser o in un'altra finestra; deve essere aperta solo l'app.)

# 6) Le immagini nel sito Web reattivo sono specifiche della risoluzione. Significa che la risoluzione dell'immagine inserita nel codice del sito responsive progettato per la compatibilità mobile è diversa da quella di un desktop o tablet. Ogni dimensione dello schermo dovrebbe avere la sua immagine specifica nel design.

Prerequisito per testare questo scenario: Testare e controllare la risoluzione delle immagini potrebbe essere un compito difficile. Chiedi allo sviluppatore di inserire tre diverse immagini nel sito Web reattivo separatamente per dispositivi mobili, tablet e desktop.

Apri il sito web di test responsive design da desktop, tablet e dispositivo mobile. Le immagini sulla pagina Web reattiva dovrebbero essere diverse per tutti e tre i dispositivi.

(O)

Apri il test RW da un desktop e controlla l'immagine sulla pagina web. Ora ridimensiona la finestra a quella di un tablet e controlla l'immagine. Dovrebbe essere diverso da quello dell'immagine mostrata per le dimensioni dello schermo del desktop. Ora puoi ridimensionare la finestra alle dimensioni dello schermo del cellulare e controllare l'immagine. Anche questa immagine dovrebbe essere diversa dalle due immagini precedenti.

Esempio: Apri il sito reattivo www.fpl.com da un desktop; fare clic con il tasto destro sull'immagine nel file home page -> seleziona 'Ispeziona' dal menu. Verificare la risoluzione dell'immagine (controllare l'estensione del nome del file immagine .jpg) dal codice. Guarda lo screenshot qui sotto:

Ora ridimensiona la stessa finestra a quella dello schermo di un tablet e controlla la risoluzione dell'immagine. (L'estensione del nome dell'immagine è medium.jpg)

Infine, ridimensiona la dimensione della finestra a quella dello schermo di un cellulare e controlla l'immagine. (L'estensione del nome dell'immagine è small.jpg)

# 7) Fare clic in modo casuale in un punto qualsiasi della pagina Web e verificare se dati o testo che non sono collegati tramite collegamento ipertestuale vengono avviati e reindirizzati a qualsiasi altra pagina o contenuto. Verifica se una parola o un testo è contrassegnato come collegamento ipertestuale nel file back end .

Nota : In alcuni progetti, i requisiti parlano della dimensione dei pixel e della risoluzione dello schermo per dispositivi particolari. (Per esempio, una visualizzazione tablet per il loro RW dovrebbe essere a 15:15 pixel e per un cellulare, dovrebbe essere alle 10:10 ecc.)

Il test per i cambiamenti dinamici che dovrebbero verificarsi per il display RW quando cambiamo la dimensione dei pixel è lo scenario principale.

# 8) Apri il nostro test RW in un browser e visualizza i contenuti e la visualizzazione delle immagini principali. Ora ridimensiona la finestra fino al punto di interruzione della dimensione del tablet e verifica le modifiche che dovrebbero avvenire alla risoluzione dell'immagine e qualsiasi altro contenuto. Nei punti di interruzione, le modifiche dovrebbero avvenire dinamicamente (a volte le modifiche non avverranno nei punti di interruzione e potrebbero cambiare con altre dimensioni in pixel che rappresentano un difetto).

Strumenti per testare un sito Web reattivo

Esistono pochi strumenti (siti Web) che consentono di visualizzare in anteprima le pagine Web del nostro sito Web reattivo.

Per esempio,possiamo testare il nostro sito reattivo a diverse risoluzioni dello schermo predefinite (smartphone, tablet, ecc.) e anche personalizzarlo a qualsiasi risoluzione desiderata. Questi strumenti rendono le attività di test più facili e veloci. Tali strumenti nel browser possono essere definiti come Responsabile .

Alcuni strumenti offrono anche un'importante funzione di acquisizione dello screenshot reattivo che potrebbe aiutarci a testare i progetti del sito Web, HTML, layout, CSS, ecc. Del sito Web reattivo.

Questi strumenti sono ottime alternative quando i dispositivi effettivi non sono disponibili o pronti.

Ecco un rapido elenco di strumenti:

# 1) Controllo del design reattivo

Immettere l'URL del sito Web reattivo che deve essere testato nel campo 'Inserisci qui il tuo URL' sopra e fare clic su 'VAI'. Puoi anche selezionare il dispositivo e la risoluzione con cui desideri visualizzare il sito reattivo.

Adesso entra www.fpl.com nel campo, seleziona il layout 'RITRATTO Nexus 7' e fai clic su VAI. Il sito viene visualizzato nella risoluzione del formato selezionato.

#Due) Screenfly

Entra nel sito di test www.fpl.com e fai clic su VAI.

Modificare il layout in desktop, tablet, dispositivo mobile, ecc. E testare il sito. Con questo strumento puoi persino personalizzare la risoluzione.

Per esempio, imposta la risoluzione dello schermo su 512 x 256 e prova il sito.

Nota : Con questo strumento puoi persino testare scenario 6 facilmente modificando le risoluzioni e verificando la denominazione dell'immagine.

# 3) Designmodo

Inserisci un URL, www.makemytrip.com e fare clic su Invio.

Nella parte in alto a destra del browser, hai la possibilità di modificare il layout del sito Web in quello di qualsiasi modello o dispositivo mobile specifico, ecc.

Nota : Questo strumento ha un'altra funzionalità come trascinare lo schermo e modificare la risoluzione alla risoluzione desiderata.

# 4) isResponsive

Inserisci l'URL di test, www.fpl.com nel campo e fare clic sul pulsante 'Test'.

Nota: Questo strumento ha solo poche opzioni di layout fisse su cui è possibile testare il nostro sito.

# 5) Mattkersley

Se vuoi avere una visione del tuo RW su più dimensioni dello schermo contemporaneamente, questo strumento mattkersley è quello che ti serve.

Ora inserisci l'URL di test nella barra degli indirizzi e fai clic su Invio. È possibile visualizzare l'RW su più dimensioni dello schermo contemporaneamente.

# 6) Per impostazione predefinita, chrome ha pochi strumenti di sviluppo attraverso il quale possiamo simulare la modalità del dispositivo e le loro capacità.

le 5 migliori app spia per Android

Per utilizzare questa funzione di Chrome, apri un sito Web di test responsive design come www.fpl.com in Chrome e fare clic con il pulsante destro del mouse sulla pagina Web e selezionare l'opzione 'Ispeziona' dal menu o premere Ctrl + Maiusc + I. La finestra sottostante viene aperta nella parte inferiore della pagina web.

Ora fai clic sull'icona come mostrato nello screenshot qui sotto.

La modalità mobile della pagina web viene aperta. Da ciò, puoi modificare la risoluzione su qualsiasi pixel specifico e anche su qualsiasi modello di cellulare predefinito visualizzato nel menu a discesa. Visualizza l'istantanea di seguito per avere un'idea chiara:

Nota: Possiamo anche cambiare la pagina web in visualizzazione verticale o orizzontale.

Altri buoni strumenti per testare il responsive design:

7) ResponsiveDesign
8) BrowserStack
9) Troy
10) AmIResponsiveDesign
undici) Responsabile
12) Studiopress
13) ResponsiveTest
14) Per le macchine MAC abbiamo un'applicazione separata chiamata ' IN FORMA 'Per testare un RW. Questa applicazione consente di impostare vari punti di interruzione su vari dispositivi per il test. APTUS non è un'applicazione gratuita e dobbiamo acquistarla dal Mac App Store.

Sfide di testare il responsive design e le possibili soluzioni

Strategia di test dinamico

Passare da 320 × 480 (la risoluzione dell'iPhone4) a 2048 × 2048 (un monitor di grandi dimensioni) lascia oltre 4 milioni di possibili dimensioni del browser. La maggior parte dei gruppi di test restringe l'elenco dei dispositivi di test a una manciata. Anche allora, il problema del test manuale è difficile o impossibile da affrontare.

Gli sviluppatori non possono prevedere tutti i problemi della piattaforma e i tester non possono individuarli prima del rilascio. Per questo motivo, troviamo il problema occasionale dell'interfaccia utente in produzione.

Forse qualcuno ha ridotto le dimensioni del proprio browser facendo sì che i campi di testo importanti fossero coperti da un'etichetta di pagina. Forse qualche codice progettato per gestire il ridimensionamento dinamico delle pagine interrompe i selettori di date modali e non viene mai notato da un normale test costruito su WebDriver. Ci sono troppe opzioni di visualizzazione per cui creare test e troppo poco tempo.

Diamo un'occhiata a unesempio realisticoper illustrare il problema.

Le pagine dinamiche, cose come i cursori pubblicitari e il contenuto trasmesso in streaming dagli utenti in diverse dimensioni di pagina, sono un punto fermo di molti prodotti software. A questo si aggiunge il fatto che non possiamo prevedere come verrà visualizzata la pagina e molti tentativi di automazione iniziano con un fallimento.

Vedo due soluzioni popolari per questo problema: l'utilizzo di un set di dati standardizzato o di base e l'aggiornamento ogni volta che viene eseguita la suite di test e prendendo le cose un ambiente o una piattaforma alla volta.

I dati standard garantiscono che il contenuto della pagina avrà lo stesso aspetto ogni volta che cariciamo l'ambiente di test. Quella strategia combinata con qualcosa come Sauce Labs che offre alle persone l'accesso a molte piattaforme e tu vai abbastanza lontano.

Questo approccio richiede tempo e risorse. Avrai bisogno di tempo da qualcuno con accesso al database, di solito un DBA, per creare e aggiornare le esportazioni del database. E qualcuno deve creare la configurazione degli script e gli script di smontaggio per mantenere l'ambiente di test. Dopo tutto questo sforzo, potresti ritrovarti con il tipo di bug dell'ambiente disinfettato che amano nascondersi.

In alternativa, è possibile utilizzare la tecnologia Visual Testing per automatizzare i test su pagine Web che variano per layout e contenuto. Utilizzando questi strumenti, è possibile creare test senza alcuna modifica al proprio ambiente di test e senza richiedere alcun set di competenze da parte di persone esterne al proprio gruppo di test.

Diamo un'occhiata a un esempio.

Considera l'app mobile di Twitter.

Questo prodotto è una combinazione di contenuti e pubblicità degli utenti in continua evoluzione. Ci sono anche alcune parti principali dell'interfaccia utente, come il feed di notizie e le notifiche, nell'intestazione.

Utilizzando uno strumento di test visivo, è possibile iniziare eseguendo un'acquisizione dello schermo dell'intera pagina scorrevole, non solo dell'area visualizzabile. Puoi scegliere un'opzione di confronto che ignori il contenuto del testo ma si concentri sugli elementi della pagina.

Per esempio, potresti vedere che i campi per i tweet esistono, che ogni tweet ha un elemento nome e un elemento data / ora, senza preoccuparti di cosa c'è negli elementi.

La ricerca di elementi su pagine intere allevia anche il carico di manutenzione e complessità che vediamo in molti test automatizzati. Invece di manipolare i dati su una pagina, salvare, scorrere e quindi verificare, ottieni tutto in un colpo solo. Ciò significa meno codice da scrivere, meno codice da mantenere e meno falsi positivi durante i test notturni.

Test reattivo per il responsive design:

Il design reattivo ha aggiunto il problema combinatorio a ogni piattaforma disponibile. La domanda è; tra tutte queste possibili piattaforme e dimensioni dello schermo, che selezioniamo per la migliore copertura di test.

Ridurre il numero di ambienti che copriamo solo a quelli più popolari semplifica il compito tecnico ignorando anche il problema della copertura.

Aumentare il numero di ambienti con un solo framework di automazione crea un incubo di manutenzione e potenzialmente aggiunge un problema di test irrisolvibile.

La combinazione di buoni strumenti di test visivo con un framework di automazione dell'interfaccia utente flessibile, come il driver web, può rendere gli aspetti tecnici di questo problema non solo più facili da affrontare, ma risolvibili.

L'obiettivo è una buona copertura dell'interfaccia utente con un ragionevole onere di manutenzione. Il test visivo è la tua unica opzione affidabile e scalabile.

Suggerimenti per il test Web reattivo

# 1) Durante il test di un RW è necessario prestare attenzione alla coerenza del design come l'allineamento di immagini, testi, imbottitura attorno ai bordi, ecc. Su tutti i browser e sistemi operativi.

#Due) Durante il test di un RW, il tester deve essere consapevole di cosa testare e come testare su più dispositivi a diversi breakpoint. Altrimenti, potrebbe essere abbastanza esaustivo e disorientante.

# 3) Per un test approfondito di un sito Web reattivo, il coordinamento di tester e sviluppatori è un must. Lo sviluppatore dovrebbe aiutare i tester a creare le condizioni menzionate nei prerequisiti dei casi di test.

# 4) Controlla se le pagine web sono leggibili a tutte le risoluzioni, cioè il contenuto dovrebbe essere leggibile anche se ridimensioniamo il browser alle dimensioni dello schermo del cellulare.

# 5) Il contenuto importante dell'RW dovrebbe essere visibile per tutti i punti di interruzione, ovvero se cambiamo le dimensioni del browser dallo schermo del desktop allo schermo del cellulare, le immagini principali, il testo principale, il menu, ecc. Dovrebbero rimanere gli stessi.

# 6) Se il browser viene ridimensionato per il test, qualsiasi area di clic (come pulsanti, menu, collegamenti secondari, ecc.) Di RW dovrebbe essere adatta al clic.

# 7) Il ridimensionamento del browser e il test del sito Web reattivo possono identificare solo alcuni problemi principali, mentre potrebbero esserci alcuni altri problemi relativi allo scorrimento delle dita, al tocco, ecc. Sui dispositivi mobili. Il test di queste particolari caratteristiche sui dispositivi effettivi può portare a una migliore individuazione e rimozione dei difetti.

Conclusione

Quando stiamo testando il responsive design, ci saranno molte sfide. Dovresti pensare in modo efficiente per superare le sfide.

Testare un sito Web reattivo è molto importante per un futuro di successo di molti applicazioni mobili. Gli utenti di dispositivi mobili non faranno che aumentare e le loro aspettative sono molto diverse da quelle degli utenti desktop. L'implementazione e il test approfondito di RWD è un ottimo modo per impostare il tuo sito in modo che soddisfi le aspettative.

L'implementazione e il test approfondito di RWD è un ottimo modo per impostare il tuo sito in modo che soddisfi le aspettative.

Ci auguriamo che le informazioni, i suggerimenti e gli scenari di test discussi in questo articolo aiuteranno sicuramente le tue esigenze di test di siti Web reattivi.

Circa l'autore: Questo è un guest post di Laxmi. Ha più di 7 anni di esperienza nel test del software e attualmente lavora come ingegnere senior del test del software.

Prova tutti gli esempi forniti in questo articolo e facci sapere se hai domande / commenti sullo stesso.

Lettura consigliata

• Alpha test e beta test (una guida completa)
• Guida completa al test di verifica della costruzione (test BVT)
• Test funzionale vs test non funzionale
• Tipi di test del software: diversi tipi di test con dettagli
• Migliori strumenti di test del software 2021 (Strumenti di automazione del test QA)
• Esercitazione sul test del data warehouse di test ETL (una guida completa)
• Guida al test di sicurezza delle applicazioni Web
• I migliori servizi di test del software QA di SoftwareTestingHelp