Proves de disseny web sensibles: la guia completa per a principiants

responsive web design testing

En l’era actual, l’ús de dispositius mòbils per accedir a Internet ha crescut i s’ha popularitzat força. Gairebé tots els usuaris d’Internet desitgen una versió mòbil del lloc web.

Tanmateix, la majoria de llocs web no estan tan optimitzats com haurien de ser per a dispositius mòbils. Els verificadors han de realitzar una prova de resposta mòbil en dissenys responsius.

Els productes de programari tradicionals són essencialment iguals en qualsevol dispositiu.

Microsoft Office, per exemple , té el mateix aspecte en tots els ordinadors personals. Imagineu-vos prendre Microsoft Word exactament com funciona a l’escriptori i veure’l en un iPhone4. Els menús i els botons apareixeran minúsculs o bé només veureu un racó de la pantalla i haureu d’utilitzar barres de desplaçament extenses. Sigui com sigui, l'aplicació es torna essencialment inutilitzable.

Aquesta frustrant experiència és exactament la que viu tot dissenyador quan intenta dissenyar per a la web.

La solució al problema és una cosa que s’anomena “disseny sensible”, una tècnica per fer que les pàgines web preguntin al navegador quina és la resolució i, després, redissenyar amb gràcia l’experiència de l’usuari en funció de la pantalla immobiliària disponible. De sobte, és impossible saber exactament com quedarà el vostre programari en producció.

Això significa una estratègia de prova (i una estratègia d'automatització) que ha de ser capaç d'experimentar i aprendre allò que 'sembla bé' i allò que no, en diverses resolucions.

Què aprendreu:

• Guia per a principiants per provar dissenys de llocs web sensibles
  • Què és el disseny web responsiu?
  • Avantatges del disseny sensible:
  • Components principals del disseny de llocs web responsius:
  • Exemples de disseny web sensible
  • Com provar un lloc web responsiu
  • Exemples d'escenaris de proves per a proves de llocs web responsius:
  • Eines per provar un lloc web sensible
  • Reptes de les proves de disseny sensible i possibles solucions
  • Consells per fer proves web sensibles
• Conclusió
  • Lectura recomanada

Guia per a principiants per provar dissenys de llocs web sensibles

Quan intentem obrir un lloc web, el servidor diu ' subdominis m ”Per identificar de quin tipus de dispositiu mòbil es va originar la sol·licitud. Basat en això, redirigeix ​​l'usuari a la versió mòbil corresponent.

Per fer-ho 100% efectiu, cada dispositiu ha de tenir el seu propi disseny del lloc web específicament dissenyat per a això; fo exemple,un disseny específic diferent per a Blackberry, iPhone, iPad, etc. tenint en compte la mida i la resolució de la pantalla.

Tanmateix, no és pràctica una versió web diferent per a cada resolució i dispositiu. El Ethan Marcotte es va plantejar un nou enfocament: Disseny web responsiu ( RWD ) - que resol aquest problema.

La nostra recomanació

# 1) Navegador LT

Navegador LT ajuda els usuaris a provar i depurar el seu lloc web en més de 45 finestres gràfiques del dispositiu. Proveu el vostre lloc web en diferents ports de visualització de dispositius mòbils i d'escriptori preinstal·lats amb LT Browser, un navegador fàcil de desenvolupar per a la depuració de visualitzacions mòbils.

Simplement introduïu l'URL del vostre lloc web, seleccioneu el dispositiu per provar-lo. Podeu triar simultàniament dos dispositius per a la comparació de visualitzacions de costat a costat.

No només les proves, sinó que els usuaris també poden depurar el seu lloc web sobre la marxa amb l'ajut de DevTools incorporats que ofereix LT Browser.

La millor part és que els usuaris poden crear un dispositiu personalitzat segons els seus requisits, cosa que fa que el navegador LT sigui la nostra primera opció per fer proves de resposta.

Què és el disseny web responsiu?

RWDobjectius perquè els llocs web reaccionin al seu dispositiu, la resolució i puguin renderitzar-se i adaptar-se correctament. Per exemple, si l'usuari canvia d'escriptori / portàtil a iPad, el lloc web hauria d'adaptar automàticament els canvis de resolució, com ara la mida de la imatge, etc., segons les capacitats del dispositiu respectives.

En resum,Disseny sensibleés 'Un lloc web per a cada pantalla' .

La pantalla següent és unexemplede RWD:

Nota: Temps realexempled'un lloc web sensible és www.fpl.com

A RWD, un lloc web està dissenyat per proporcionar una experiència d’usuari superior mitjançant una navegació fàcil, una interfície d’usuari clara i senzilla, etc. Els llocs web responsius s’adapten fàcilment i funcionen en totes les resolucions, navegadors, mides de pantalla, maquinari i sistemes operatius.

• Els llocs web responsius estan codificats en PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) i molts nous frameworks que són molt útils per desenvolupar dissenys responsius.
• Les funcions CSS i HTML s’utilitzen per fer que les resolucions de pantalla i les imatges es redimensionin automàticament.
• El disseny RW utilitza punts d'interrupció per identificar el disseny d'un lloc. Cada disseny s'utilitza en diferents punts d'interrupció. Un disseny s’aplica sobre un punt d’interrupció mentre que un altre s’utilitza per sota del punt d’interrupció. Aquests punts d'interrupció generalment es basen en l'amplada dels navegadors.
• En dissenyar un lloc web sensible, els desenvolupadors consideren el contingut, el disseny i el rendiment del lloc en tots els dispositius garantir la usabilitat .

El diagrama és un símil precís de com s’adapta el contingut a l’entorn i al comportament del dispositiu.

Nota : A part de RWD, hi ha un altre enfocament anomenat Disseny web adaptatiu ( AWD ) . En l'enfocament AWD, hi haurà un disseny específic per a cada dispositiu. Tanmateix, és possible que AWD no sigui adequat tot el temps. A més, dissenyar llocs AWD requereix més temps i diners en comparació amb els llocs RWD.

Avantatges del disseny sensible:

# 1) Experiència d'usuari: Basat en el dispositiu des del qual accedim a un RW, amaga els elements inusuals i ajuda els usuaris a assolir els seus objectius més ràpidament.Per exemple:si obrim un RW des del mòbil, amaga els elements poc importants i accelera la càrrega de les pàgines web.

# 2) Compartir o enllaçar: Per a un RW, només s'utilitza un URL per a diversos dispositius. Com que només un únic URL acumula totes les dades i informació de diversos dispositius, proporciona una UX millor per als usuaris.

# 3) Poc o mínim manteniment necessari per a un RW.

# 4) Els dissenys de RW són fluids.

Diferències entre disseny web adaptatiu i disseny adaptatiu:

RWD i AWD estan estretament relacionats entre si.

• RWD reacciona de forma ràpida i positiva als canvis, mentre que AWD es pot modificar fàcilment per a un nou propòsit.
• RWD té diversos dissenys de quadrícula fluida i AWD té diversos dissenys d’amplada fixa.
• Les imatges en RWD s’anomenen sensibles al context.

Components principals del disseny de llocs web responsius:

El disseny web sensible té tres components principals:

# 1) Dissenys flexibles: Construir un lloc web amb una quadrícula flexible que es pot canviar fàcilment de forma dinàmica a qualsevol amplada.

# 2) Mitjana Queries: Proporcioneu diversos estils per als navegadors i els dispositius en funció del context, com ara l'orientació del dispositiu, la finestra gràfica, etc.

# 3)Flexible Mitjana: A mesura que canvia la mida de les finestres gràfiques, els mitjans (imatges, vídeos, etc.) també han de canviar la seva mida o resolució segons el requisit.

Nota : 'Vista' és l'àrea del navegador on es mostra el contingut real del lloc web. La finestra gràfica no inclou les barres d'eines, les pestanyes, etc.

Exemples de disseny web sensible

Exemple 1)

Obriu l'enllaç www.fpl.com des de diversos dispositius i observeu l’URL. L'URL d'un lloc web responsiu continua sent el mateix per a tots els dispositius.

a) Vista de la RW des d'un escriptori o portàtil (mida de pantalla gran)

b) Vista de la RW des d'una tauleta (mida de pantalla mitjana)

c) Vista del RW des d'un mòbil (mida de pantalla petita)

Exemple 2)

Obriu el lloc www.yepme.com des d’un ordinador portàtil i també des d’un mòbil i compareu els URL. Això yepme.com link no és un enllaç responsiu.

a) Vista d'un lloc web que no respon des d'un ordinador de sobretaula o portàtil

exemples d'aplicacions de servidor client i d'aplicacions basades en web

b) Vista d'un lloc web que no respon des d'un mòbil

Com provar un lloc web responsiu

La prova de disseny sensible significa provant el lloc web o URL des de diferents dispositius. Pràcticament, no és possible provar completament el lloc web responsiu perquè, per fer-ho, hem de configurar diversos sistemes per a diverses mides de pantalla.

Una manera possible de fer la prova sensible és canviar la mida de la finestra del navegador segons l’escenari de prova.

Alguns navegadors, com IE i Safari, proporcionaran connectors o extensions de navegador que us ajudaran a visualitzar l'àrea de visualització en píxels. Això facilita les proves obtenint la mida de pantalla desitjada modificant els píxels.

Altres navegadors com Chrome proporcionen programari o programa anomenat 'Emulador' cosa que ajudarà a canviar les funcions de la pantalla i l’entorn segons el dispositiu desitjat necessari per a la prova.

Nota: 'Emulador' és un programari o programa que es proporciona al navegador que fa que el sistema amfitrió (navegador actual) es comporti com el sistema convidat (navegador del dispositiu desitjat que s'ha de provar de la mida de pantalla desitjada).

Tot i que els emuladors no us poden proporcionar l'entorn exacte necessari per provar-los, són una solució rendible per provar un RW a un nivell alt.

Exemples d'escenaris de proves per a proves de llocs web responsius:

El verificador de disseny web responsiu s'ha d'assegurar que el disseny sensible compleixi tot el que s'esmenta a continuació escenaris de prova per assegurar-se que és un disseny sensible sense errors.

# 1) L'enllaç o l'URL del lloc web responsiu hauria de ser el mateix per a tots els navegadors de tots els dispositius, independentment de la resolució de la pantalla.

Suposem www.abc.com és un lloc web sensible. Si l’obrim en un ordinador portàtil i en un telèfon mòbil, l’URL hauria de ser la mateixa als dos dispositius. El lloc web obert al navegador mòbil no hauria de començar www.m.abc.com o bé www.mobile.abc.com

Exemple: Obriu el lloc web www.kotak.com des d’un portàtil i també obriu el mateix des del mòbil i observeu l’URL dels dos dispositius. L'URL no és el mateix per als dos dispositius.

A continuació, es mostra com canvia l'URL d'un fitxer lloc web que no respon en diferents dispositius com ara ordinadors portàtils i mòbils.

Obriu el lloc web www.w3schools.com des d’un ordinador portàtil i des del mòbil i comproveu les URL. Ha de ser el mateix per als dos dispositius.

A continuació es mostra la URL que continua sent la mateixa per a un lloc web responsiu en diferents dispositius:

# 2) La ubicació de visualització del contingut (imatges, subenllaços, menús, etc.) d’un lloc web responsiu hauria de canviar dinàmicament segons el canvi de resolució de pantalla. És a dir, si canviem la resolució de la pantalla de la mida del portàtil a un mòbil, la visualització de les opcions del menú hauria de canviar dinàmicament.

Exemple: Obriu l'enllaç www.fpl.com des d’un ordinador portàtil i feu clic al menú de l’extrem superior dret de la finestra. Les opcions del menú es mostren com es mostra a continuació:

millor lloc web per veure anime doblat

Obert www.fpl.com des del mòbil i feu clic al menú de l'extrem superior dret de la finestra. Les opcions del menú són les següents:

Nota: Aquest escenari també es pot provar mitjançant emuladors de navegador (ex:crom).

Obriu el lloc web www.fpl.com a través d’un escriptori i observeu com es mostren les opcions del menú. Vegeu la instantània següent:

Ara canvieu la mida de la finestra del navegador a la mida de la pantalla del mòbil i, a continuació, comproveu la visualització de les opcions del menú. Vegeu la instantània següent:

# 3) Els URL d'un lloc web responsiu també haurien de ser específics de la resolució.

Requisit previ per provar aquest escenari: Demaneu al desenvolupador que insereixi qualsevol subenllaç al lloc web de proves responsives on el subenllaç no respongui.

Per exemple, el desenvolupador pot inserir un enllaç www.snapdeal.com al nostre lloc web de proves.

Ara, obriu el lloc web de proves responsives des d’un mòbil i feu clic al subenllaç esmentat al requisit previ. A continuació, l'URL del subenllaç hauria de canviar a https://m.snapdeal.com .

# 4) El mateix escenari també es pot provar des d’un ordinador portàtil. Obriu el RW des d’un ordinador de sobretaula o portàtil i feu clic al subenllaç (esmentat al requisit previ de l’escenari de prova tres) que no respon. L'URL de l'enllaç secundari no hauria de canviar (ja que estem provant aquest escenari des del portàtil, l'URL hauria de seguir sent el mateix).

# 5) Requisit previ per provar aquest escenari: Demaneu al desenvolupador que insereixi qualsevol subenllaç,per exemple, www.paytm.com al lloc de proves. El dispositiu mòbil en què executareu aquest escenari hauria de tenir instal·lada al mòbil la respectiva aplicació de Paytm.

Ara obriu el nostre lloc web sensible a les proves des d’un mòbil i feu clic al subenllaç “paytm”. A continuació, s’hauria d’obrir l’aplicació Paytm instal·lada al mòbil. (L'usuari no s'hauria de redirigir al lloc web al navegador o a una altra finestra; només l'aplicació hauria d'estar oberta).

# 6) Les imatges del lloc web sensible són específiques de la resolució. Vol dir que la resolució de la imatge inserida al codi del lloc web responsiu dissenyat per a la compatibilitat mòbil és diferent de la d’un ordinador de taula o tauleta. Cada mida de pantalla ha de tenir la seva imatge específica al disseny.

Requisit previ per provar aquest escenari: Provar i comprovar la resolució de les imatges podria ser una tasca difícil. Demaneu al desenvolupador que insereixi tres imatges diferents al lloc web responsiu per separat per a mòbils, tauletes i ordinadors.

Obriu el lloc web de disseny sensible a les proves des d’un ordinador, una tauleta i un mòbil. Les imatges de la pàgina web responsiva haurien de ser diferents per als tres dispositius.

(O)

Obriu el RW de prova des d’un escriptori i comproveu la imatge a la pàgina web. Ara canvieu la mida de la finestra a la d’una tauleta i comproveu la imatge. Això hauria de ser diferent del de la imatge que es mostra per a la mida de la pantalla de l'escriptori. Ara podeu canviar la mida de la finestra a la mida de la pantalla del mòbil i comprovar la imatge. Aquesta imatge també ha de ser diferent de les dues imatges anteriors.

Exemple: Obriu el lloc responsiu www.fpl.com des d’un escriptori; Feu clic amb el botó dret a la imatge del fitxer pàgina inicial -> seleccioneu 'Inspecciona' des del menú. Comproveu la resolució de la imatge (comproveu l’extensió del nom del fitxer de la imatge .jpg) del codi. Vegeu la captura de pantalla següent:

Ara canvieu la mida de la finestra a la mida de la pantalla de la tauleta i comproveu la resolució de la imatge. (L'extensió del nom de la imatge és medium.jpg)

Finalment, canvieu la mida de la finestra a la mida de la pantalla del mòbil i comproveu la imatge. (L'extensió del nom de la imatge és small.jpg)

# 7) Feu clic a l’atzar en qualsevol lloc de la pàgina web i comproveu si s’inicia i es redirigeix ​​cap dada o text que no estigui enllaçat a cap altra pàgina o contingut. Això prova si alguna paraula o text està marcat com a hiperenllaç al fitxer final posterior .

Nota : En alguns projectes, els requisits parlen de la mida i la resolució de píxels de la pantalla per a determinats dispositius. (Per exemple, una visualització de tauleta per al seu RW hauria de ser a 15:15 píxels i per a un mòbil, a les 10:10, etc.)

L’escenari principal és provar els canvis dinàmics que haurien de succeir a la pantalla RW quan canviem la mida del píxel.

# 8) Obriu el nostre RW de prova en un navegador i visualitzeu el contingut i la visualització de les imatges principals. Ara canvieu la mida de la finestra fins al punt de ruptura de la mida de la tauleta i verifiqueu els canvis que haurien de passar a la resolució de la imatge i a qualsevol altre contingut. Als punts d’interrupció, els canvis haurien de produir-se dinàmicament (de vegades els canvis no es produiran als punts d’interrupció i poden canviar en alguna altra mida de píxel que sigui un defecte).

Eines per provar un lloc web sensible

Hi ha poques eines (llocs web) que us permetran previsualitzar les pàgines web del nostre lloc web sensible.

Per exemple,podem provar el nostre lloc responsiu en diferents resolucions de pantalla predefinides (telèfons intel·ligents, tauletes, etc.) i també personalitzar-les segons la resolució desitjada. Aquestes eines fan que les activitats de prova siguin més fàcils i ràpides. Aquestes eines del navegador es poden anomenar 'Responsinator' .

Algunes eines també ofereixen una característica important per capturar la captura de pantalla sensible que ens pot ajudar a provar els dissenys de llocs web, HTML, dissenys, CSS, etc. del lloc web responsiu.

Aquestes eines són bones alternatives quan els dispositius reals no estan disponibles o estan preparats.

Aquí teniu una llista d’eines ràpida:

# 1) Corrector de disseny sensible

Introduïu l'URL del lloc web responsiu que cal provar al camp 'Introduïu el vostre URL aquí' anterior i feu clic a 'VES'. Fins i tot podeu seleccionar el dispositiu i la resolució amb què voleu veure el lloc responsiu.

Ara entra www.fpl.com al camp, seleccioneu el disseny 'RETRAT de Nexus 7' i feu clic a ANA. El lloc es mostra a la resolució del format seleccionat.

# 2) Screenfly

Introduïu el lloc de proves www.fpl.com i feu clic a ANA.

Canvieu el disseny a l’escriptori, la tauleta, el mòbil, etc. i proveu el lloc. Amb aquesta eina, fins i tot podeu personalitzar la resolució.

Per exemple, configureu la resolució de la pantalla a 512 x 256 i proveu el lloc.

Nota : Amb aquesta eina, fins i tot podeu provar escenari 6 fàcilment canviant les resolucions i verificant el nom de la imatge.

# 3) Designmodo

Introduïu qualsevol URL, www.makemytrip.com i feu clic a Retorn.

A la part superior dreta del navegador, teniu l'opció de canviar el disseny del lloc web pel de qualsevol model o dispositiu mòbil específic, etc.

Nota : Aquesta eina té una altra característica com arrossegar la pantalla i modificar la resolució a la resolució desitjada.

# 4) ésResponsiu

Introduïu l'URL de prova, www.fpl.com al camp i feu clic al botó 'Prova'.

Nota: Aquesta eina només té algunes opcions de disseny fixes en què es pot provar el nostre lloc.

# 5) Mattkersley

Si voleu visualitzar la vostra RW en diverses mides de pantalla alhora, aquesta eina Mattkersley és el que necessites.

Ara introduïu l'URL de prova a la barra d'adreces i feu clic a Retorn. Podeu veure el RW en diverses mides de pantalla alhora.

# 6) Per defecte, Chrome té poques eines de desenvolupament a través del qual podem simular el mode del dispositiu i les seves capacitats.

eines de proves d'api de codi obert

Per utilitzar aquesta funció de Chrome, obriu qualsevol lloc web de disseny sensible a les proves, com ara www.fpl.com a Chrome i feu clic amb el botó dret a la pàgina web i seleccioneu l'opció 'Inspecciona' al menú o premeu Ctrl + Maj + I. La finestra següent s'obre a la part inferior de la pàgina web.

Ara feu clic a la icona com es mostra a la captura de pantalla següent.

S'obre el mode mòbil de la pàgina web. A partir d’això, podeu canviar la resolució a qualsevol píxel específic i també a qualsevol model de mòbil predefinit que es mostri al menú desplegable. Consulteu la instantània següent per obtenir una idea clara:

Nota: També podem canviar la pàgina web a la vista vertical o horitzontal.

Altres bones eines per provar el disseny sensible:

7) ResponsiveDesign
8) BrowserStack
9) Troia
10) AmIResponsiveDesign
11) Responsinator
12) Studiopress
13) ResponsiveTest
14) Per a màquines MAC, tenim una aplicació independent anomenada “ AJUSTAR ”Per provar un RW. Aquesta aplicació us permet configurar diversos punts d'interrupció en diversos dispositius per provar-los. APTUS no és una aplicació gratuïta i l’hem de comprar a la Mac App Store.

Reptes de les proves de disseny sensible i possibles solucions

Estratègia de proves dinàmiques

Passar de 320 × 480 (la resolució de l'iPhone4) a 2048 × 2048 (un monitor gran) deixa més de 4 milions de mides de navegador possibles. La majoria de grups de prova reduirà la llista de dispositius de prova a un grapat. Tot i així, és difícil o impossible abordar el problema de les proves manuals.

Els desenvolupadors no poden anticipar-se a tots els problemes de la plataforma i els provadors no els poden detectar abans de la publicació. A causa d’això, trobem algun problema d’interfície d’usuari en producció.

Potser algú va reduir la mida del seu navegador fent que els camps de text importants estiguessin coberts per una etiqueta de pàgina. Potser algun codi dissenyat per manejar el canvi de mida dinàmic de la pàgina trenca els selectors de dates modals i mai no es fa notar per una prova normal basada en WebDriver. Hi ha massa opcions de visualització per crear proves i massa poc temps.

Fem una ullada aexemple realistaper il·lustrar el problema.

Les pàgines dinàmiques, com ara els lliscadors publicitaris i el contingut transmès pels usuaris amb diferents mides de pàgina, són un element bàsic de molts productes de programari. A això s’afegeix el fet que no podem predir com es mostrarà la pàgina i que molts esforços d’automatització comencen amb un error.

Veig dues solucions populars per a aquest problema: fer servir un conjunt de dades estandarditzat o de línia de base i refrescar que cada cop que s’executa el conjunt de proves i prendre les coses d’un entorn o plataforma alhora.

Les dades estàndard garanteixen que el contingut de la pàgina tindrà el mateix aspecte cada vegada que carreguem l’entorn de prova. Aquesta estratègia, combinada amb alguna cosa com Sauce Labs, permet que la gent accedeixi a moltes plataformes i arribi bastant lluny.

Aquest enfocament requereix temps i recursos. Necessiteu temps d'algú amb accés a la base de dades, normalment un DBA, per crear i actualitzar les exportacions de bases de dades. I algú ha de crear scripts de configuració i desglossament per mantenir l'entorn de prova. Després de tot aquest esforç, podríeu acabar amb el tipus d’entorn higienitzat que els encanten als errors als quals s’amaguen.

Alternativament, podeu utilitzar la tecnologia de proves visuals per ajudar a automatitzar les proves en pàgines web que varien en disseny i contingut. Mitjançant aquesta eina, podeu crear proves sense cap canvi en el vostre entorn de proves i sense requerir cap conjunt d’habilitats de persones alienes al vostre grup de proves.

Vegem un exemple.

Penseu en l'aplicació mòbil de Twitter.

Aquest producte és una combinació de contingut d’usuari i publicitat que canvia contínuament. També hi ha algunes parts bàsiques de la interfície d'usuari, com ara el canal de notícies i les notificacions, a la capçalera.

Mitjançant una eina de proves visuals, podeu començar fent una captura de pantalla de tota la pàgina desplaçable, no només de l'àrea visible. Podeu triar una opció de comparació que ignori el contingut de text, però que se centri en els elements de la pàgina.

Per exemple, es podia veure que existeixen els camps per als tuits, que cada tuit té un element de nom i un element de data / hora, sense preocupar-se del que hi ha als elements.

La cerca d’elements en pàgines completes també alleuja la càrrega de manteniment i complexitat que veiem en moltes proves automatitzades. En lloc de manipular les dades d'una pàgina, desar-les, desplaçar-les i verificar-les, s'obté tot en un sol tret. Això significa menys codi per escriure, menys codi per mantenir i menys falsos positius en les proves nocturnes.

Proves responsives per al disseny responsiu:

El disseny sensible ha afegit el problema combinatori a totes les plataformes disponibles. La pregunta és: de totes aquestes plataformes i mides de pantalla possibles, que seleccionem per obtenir la millor cobertura de proves.

La reducció del nombre d’entorns que cobrim només als més populars facilita la tasca tècnica i ignora el problema de cobertura.

L’augment del nombre d’entorns amb un marc d’automatització sol crea un malson de manteniment i pot afegir un problema de proves insoluble.

La combinació de bones eines de proves visuals amb un marc d’automatització d’interfície d’usuari flexible, com ara el controlador web, pot fer que els aspectes tècnics d’aquest problema no només siguin més fàcils de tractar, sinó que també es puguin solucionar.

L’objectiu és una bona cobertura de la interfície d’usuari amb una càrrega de manteniment raonable. Les proves visuals són l’única opció robusta i escalable.

Consells per fer proves web sensibles

# 1) Mentre proveu un RW, heu de tenir en compte la consistència del disseny, com ara l’alineació d’imatges, textos, farcit al voltant de les vores, etc. en tots els navegadors i sistemes operatius.

# 2) Durant la prova d’un RW, el comprovador ha de ser conscient de què s’ha de provar i de com es pot provar en diversos dispositius a diferents punts d’interrupció. En cas contrari, podria ser bastant exhaustiu i desorientador.

# 3) Per fer proves exhaustives d’un lloc web sensible, és imprescindible la coordinació del provador i del desenvolupador. El desenvolupador hauria d’ajudar els verificadors a crear les condicions esmentades als requisits previs dels casos de prova.

# 4) Comproveu si les pàgines web es poden llegir a totes les resolucions, és a dir, el contingut hauria de ser llegible fins i tot si redimensionem el navegador a la mida de la pantalla del mòbil.

# 5) L’important contingut de la RW hauria de ser visible per a tots els punts d’interrupció, és a dir, si canviem la mida del navegador de la pantalla de l’escriptori a la pantalla del mòbil, les imatges principals, el text principal, el menú, etc., haurien de ser les mateixes.

# 6) Si es redimensiona el navegador per provar-lo, qualsevol àrea de clic (com botons, menús, subenllaços, etc.) de la RW hauria de ser adequada per fer clic.

# 7) Canviar la mida del navegador i provar el lloc web sensible només pot identificar alguns problemes importants, mentre que pot haver-hi alguns altres problemes relacionats amb el lliscament dels dits, el toc, etc. als dispositius mòbils. Provar aquestes característiques particulars als dispositius reals pot conduir a una millor cerca i eliminació de defectes.

Conclusió

Quan estem provant el disseny sensible tindrà molts reptes. Hauríeu de pensar d’una manera eficient per superar els reptes.

Provar un lloc web sensible és molt important per a un futur reeixit per a molts aplicacions mòbils. Els usuaris de mòbils només augmentaran i les seves expectatives són molt variades de les dels usuaris d'escriptori. La implementació i les proves exhaustives de RWD són una bona manera de configurar el vostre lloc perquè compleixi les expectatives.

La implementació i les proves exhaustives de RWD són una bona manera de configurar el vostre lloc perquè compleixi les expectatives.

Esperem que la informació, els consells i els escenaris de proves que es comenten en aquest article segurament us ajudaran a provar les necessitats de proves del lloc web.

Sobre l'autor: Aquest és un missatge de convidat de Laxmi. Té més de 7 anys d’experiència en proves de programari i actualment treballa com a enginyer sènior de proves de programari.

Proveu tots els exemples que es proporcionen en aquest article i feu-nos-ho saber si teniu cap pregunta o comentari al respecte.

Lectura recomanada

• Proves alfa i proves beta (guia completa)
• Guia completa de proves de verificació de compilació (proves BVT)
• Proves funcionals contra proves no funcionals
• Tipus de proves de programari: diferents tipus de proves amb detalls
• Les millors eines de prova de programari 2021 (Eines d'automatització de proves de control de qualitat)
• Tutorial de proves de magatzem de dades de proves ETL (una guia completa)
• Guia de proves de seguretat d'aplicacions web
• Els millors serveis de proves de programari de control de qualitat de SoftwareTestingHelp