Responsive Web Design Testing: The Complete Beginner's Guide

responsive web design testing

V dnešní době používání mobilních zařízení pro přístup k internetu vzrostlo a stalo se docela populárním. Téměř každý uživatel internetu touží po mobilní verzi webu.

Většina webů však není tak optimalizována, jak by pro mobilní zařízení měla být. Testeři by měli provést mobilní responzivní test na responzivních vzorech.

Tradiční softwarové produkty se na libovolném zařízení vykreslují v podstatě stejně.

Microsoft Office, například , vypadá stejně na každém osobním počítači. Představte si, že vezmete Microsoft Word přesně tak, jak běží na ploše, a prohlížíte si jej na iPhonu4. Nabídky a tlačítka budou vypadat nepatrně, jinak uvidíte pouze roh obrazovky a budete muset používat rozsáhlé posuvníky. Ať tak či onak, aplikace se stane v podstatě nepoužitelnou.

Tato frustrující zkušenost je přesně to, čím prochází každý designér, když se pokouší navrhnout pro web.

Oprava problému je něco, čemu se říká „responzivní design“, což je technika, pomocí které se webové stránky zeptají prohlížeče, jaké je rozlišení, a poté elegantně přepracuje uživatelský zážitek na základě dostupné nemovitosti na obrazovce. Najednou je nemožné přesně vědět, jak bude váš software vypadat ve výrobě.

To znamená testovací strategii (a automatizační strategii), která musí být schopná experimentovat a učit se, co „vypadá dobře“ a co ne, v různých rozlišeních.

Co se naučíte:

• Průvodce pro začátečníky k testování návrhů responzivních webových stránek
  • Co je responzivní webový design?
  • Výhody responzivního designu:
  • Hlavní součásti responzivního designu webových stránek:
  • Příklady responzivního webdesignu
  • Jak otestovat responzivní web
  • Ukázkové testovací scénáře pro responzivní testování webových stránek:
  • Nástroje pro testování responzivního webu
  • Výzvy při testování responzivního designu a možných řešení
  • Tipy pro responzivní testování webu
• Závěr
  • Doporučené čtení

Průvodce pro začátečníky k testování návrhů responzivních webových stránek

Když se pokusíme otevřít web, server zobrazí „ m. subdomény „K identifikaci, z jakého mobilního zařízení požadavek pochází. Na základě toho přesměruje uživatele na odpovídající mobilní verzi.

Aby to bylo 100% efektivní, mělo by mít každé zařízení svůj vlastní design webu speciálně vytvořeného pro něj; Fnebo příklad,jiný specifický design pro Blackberry, iPhone, iPad atd. s přihlédnutím k jejich velikosti a rozlišení obrazovky.

Odlišná webová verze pro každé rozlišení a zařízení však není praktická. The Ethan Marcotte přišel s novým přístupem - Responsive Web Design ( RWD ) - který tento problém řeší.

Naše doporučení

# 1) LT prohlížeč

Prohlížeč LT pomáhá uživatelům testovat a ladit své webové stránky ve výřezech zařízení více než 45. Otestujte si svůj web na různých předinstalovaných portech pro zobrazení mobilních a stolních zařízení s LT Browser, prohlížečem vhodným pro vývojáře pro ladění mobilního zobrazení.

Jednoduše zadejte adresu URL svého webu, vyberte zařízení, na kterém chcete svůj web otestovat. Můžete si současně vybrat dvě zařízení pro porovnání pohledu vedle sebe.

Nejen testování, ale uživatelé mohou své webové stránky ladit i na cestách pomocí vestavěných nástrojů DevTools, které nabízí LT Browser.

Nejlepší na tom je, že uživatelé mohou vytvořit vlastní zařízení na základě jejich požadavků, díky nimž je LT Browser naší první volbou pro responzivní testování.

Co je responzivní webový design?

RWDcíle pro webové stránky, aby reagovaly na své zařízení, rozlišení a dokázaly se správně vykreslit a přizpůsobit. Například, pokud uživatel přepne z počítače / notebooku na iPad, měl by web automaticky přizpůsobit změny rozlišení, jako je velikost obrázku atd., podle schopností příslušného zařízení.

Ve zkratce,Citlivý designje „Jeden web pro každou obrazovku“ .

Níže uvedená obrazovka jepříkladRWD:

Poznámka: Reálný časpříkladresponzivního webu je www.fpl.com

V RWD je web navržen tak, aby poskytoval vynikající uživatelský komfort díky snadné navigaci, jasnému a jednoduchému uživatelskému rozhraní atd. Responzivní weby se snadno přizpůsobují a fungují ve všech rozlišeních, prohlížečích, velikostech obrazovky, hardwaru a operačních systémech.

• Responzivní weby jsou kódovány v jazycích PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) a mnoha nových rámcích, které jsou velmi užitečné pro vývoj responzivních návrhů.
• Funkce CSS a HTML jsou využívány k automatické změně rozlišení obrazovky a velikosti obrázků.
• RW design používá zarážky k identifikaci rozložení webu. Každý návrh se používá v různých zarážkách. Jeden návrh se použije přes zarážku, zatímco jiný design se použije pod zarážkou. Tyto zarážky jsou obecně založeny na šířce prohlížečů.
• Při navrhování responzivního webu vývojáři berou v úvahu obsah, design a výkon webu napříč všemi zařízeními zajistit použitelnost .

Diagram je přesnou simulací toho, jak se obsah přizpůsobuje prostředí a chování zařízení.

Poznámka : Kromě RWD existuje ještě další přístup Adaptivní webový design ( AWD ) . V přístupu AWD bude existovat specifický design pro každé zařízení. AWD však nemusí být vždy vhodné. Kromě toho navrhování webů AWD vyžaduje více času a peněz ve srovnání s weby RWD.

Výhody responzivního designu:

# 1) Uživatelská zkušenost: Na základě zařízení, ze kterého přistupujeme k RW, skrývá neobvyklé prvky a pomáhá uživatelům rychleji dosáhnout jejich cílů.Například:pokud otevřeme RW z mobilu, skryje nedůležité prvky a zrychlí načítání webových stránek.

#dva) Sdílení nebo propojení: U RW se pro různá zařízení používá pouze jedna URL. Protože pouze jedna adresa URL shromažďuje všechna data a informace z různých zařízení, poskytuje uživatelům lepší UX.

# 3) RW vyžaduje minimální nebo minimální údržbu.

# 4) RW rozložení jsou plynulá.

Rozdíly mezi responzivním webovým designem a adaptivním webovým designem:

RWD a AWD spolu úzce souvisí.

• RWD reaguje rychle a pozitivně na změny, zatímco AWD lze snadno upravit pro nový účel.
• RWD má více rozvržení fluidní mřížky a AWD má několik rozvržení s pevnou šířkou.
• Obrázky na RWD se nazývají kontextové.

Hlavní součásti responzivního designu webových stránek:

Responzivní webový design má tři hlavní součásti:

# 1) Flexibilní rozvržení: Vytváření webových stránek s flexibilní mřížkou, kterou lze snadno dynamicky měnit na libovolnou šířku.

#dva) Dotazy na média: Poskytněte různé styly pro prohlížeče a zařízení na základě kontextu, například orientaci zařízení, výřez atd.

# 3)Flexibilní médium: Jak se mění velikost výřezů, média (obrázky, videa atd.) Také potřebují změnit svou velikost nebo rozlišení podle požadavku.

Poznámka : „Výřez“ je oblast prohlížeče, kde se zobrazuje skutečný obsah webové stránky. Výřez nezahrnuje panely nástrojů, karty atd.

Příklady responzivního webdesignu

Příklad č. 1)

Otevřete odkaz www.fpl.com z různých zařízení a sledujte adresu URL. URL responzivního webu zůstává pro všechna zařízení stejná.

na) Pohled na RW z počítače nebo notebooku (velká obrazovka)

b) Pohled na RW z tabletu (střední velikost obrazovky)

C) Pohled na RW z mobilu (malá obrazovka)

Příklad č. 2)

Otevřete web www.yepme.com z notebooku a také z mobilu a porovnejte adresy URL. Tento yepme.com odkaz není citlivý odkaz.

na) Pohled na nereagující web z počítače nebo notebooku

jaká je fáze implementace v sdlc?

b) Pohled na nereagující web z mobilu

Jak otestovat responzivní web

Zkouška responzivního designu znamená testování webu nebo URL z různých zařízení. Prakticky není možné responzivní web úplně otestovat, protože k tomu je potřeba nastavit různé systémy pro různé velikosti obrazovek.

Možným způsobem pro responzivní test je změna velikosti velikosti okna prohlížeče podle testovacího scénáře.

Některé prohlížeče, například IE a Safari, poskytují doplňky nebo rozšíření prohlížeče, které vám pomohou zobrazit oblast výřezu v pixelech. Díky tomu je testování snadné, protože úpravou pixelů získáte požadovanou velikost obrazovky.

Jiné prohlížeče, jako je Chrome, poskytují software nebo program s názvem „Emulátor“ což pomůže změnit funkce obrazovky a prostředí podle požadovaného zařízení potřebného pro testování.

Poznámka: „Emulátor“ je software nebo program poskytovaný v prohlížeči, díky kterému se hostitelský systém (aktuální prohlížeč) chová jako systém hosta (prohlížeč požadovaného zařízení, které má být testováno na požadovanou velikost obrazovky).

I když vám emulátory nemohou poskytnout přesné prostředí potřebné pro testování, jsou nákladově efektivním řešením pro testování RW na vysoké úrovni.

Ukázkové testovací scénáře pro responzivní testování webových stránek:

Tester responzivního webového designu by se měl ujistit, že responzivní design splňuje všechny níže uvedené testovací scénáře zajistit, aby se jednalo o bezchybný responzivní design.

# 1) Odkaz nebo adresa URL responzivního webu by měla být stejná pro všechny prohlížeče v každém zařízení bez ohledu na rozlišení obrazovky.

Předpokládat www.abc.com je responzivní web. Pokud jej otevřeme na notebooku a na mobilním telefonu, měla by být adresa URL na obou zařízeních stejná. Web otevřený v mobilním prohlížeči by neměl začínat www.m.abc.com nebo www.mobile.abc.com

Příklad: Otevřete web www.kotak.com z notebooku a také jej otevřít z mobilu a sledovat adresu URL v obou zařízeních. Adresa URL není pro obě zařízení stejná.

Níže snímek ukazuje, jak se URL mění pro nereagující web v různých zařízeních jako jsou notebooky a mobilní zařízení.

Otevřete web www.w3schools.com z notebooku a z mobilu a zkontrolujte adresy URL. Mělo by to být stejné pro obě zařízení.

Níže uvedený snímek ukazuje, že adresa URL zůstává stejná pro responzivní web v různých zařízeních:

#dva) Umístění zobrazení obsahu (obrázků, podřízených odkazů, nabídek atd.) Responzivního webu by se mělo měnit dynamicky podle změny rozlišení obrazovky. To znamená, že pokud změníme rozlišení obrazovky z velikosti notebooku na mobilní, pak by se zobrazení možností nabídky mělo dynamicky měnit.

Příklad: Otevřete odkaz www.fpl.com z notebooku a klikněte na nabídku v pravém horním rohu okna. Možnosti nabídky se zobrazují takto:

různé typy testování v qa

Otevřeno www.fpl.com z mobilu a klikněte na nabídku v pravém horním rohu okna. Možnosti nabídky jsou uvedeny níže:

Poznámka: Tento scénář lze také otestovat pomocí emulátorů prohlížeče (Bývalý:chrom).

Otevřete web www.fpl.com přes plochu a sledujte, jak jsou zobrazeny možnosti nabídky. Viz níže snímek:

Nyní změňte velikost okna prohlížeče na velikost obrazovky pro mobilní zařízení a poté zkontrolujte zobrazení možností nabídky. Viz níže snímek:

# 3) Adresy URL responzivního webu by měly mít také konkrétní rozlišení.

Předpoklad k otestování tohoto scénáře: Požádejte vývojáře, aby vložil jakýkoli podřízený odkaz na web pro responzivní testování, kde podřízený odkaz nereaguje.

Například, může vývojář vložit odkaz www.snapdeal.com na náš testovací web.

Nyní otevřete mobilní testovací web z mobilu a klikněte na podřízený odkaz uvedený v předpokladě. Pak by se adresa URL podřízeného odkazu měla změnit na https://m.snapdeal.com .

# 4) Stejný scénář lze otestovat také z notebooku. Otevřete RW z počítače nebo notebooku a klikněte na podřízený odkaz (uvedený v předpokladu testovacího scénáře tři), který nereaguje. Adresa URL vedlejšího odkazu by se neměla měnit (protože tento scénář testujeme z notebooku, adresa URL by měla zůstat stejná).

# 5) Předpoklad k otestování tohoto scénáře: Požádejte vývojáře o vložení jakéhokoli podřízeného odkazu,například, www.paytm.com do testovacího místa. Na mobilním zařízení, ve kterém se chystáte tento scénář provést, by měla být v mobilu nainstalována příslušná aplikace Paytm.

Nyní otevřete náš testovací responzivní web z mobilu a klikněte na podřízený odkaz „paytm“. Poté by měla být otevřena aplikace Paytm nainstalovaná v mobilu. (Uživatel by neměl být přesměrován na web v prohlížeči nebo v jiném okně; měla by být otevřena pouze aplikace.)

# 6) Obrázky na responzivním webu jsou specifické pro konkrétní rozlišení. To znamená, že rozlišení obrázku vloženého do kódu responzivního webu navrženého pro mobilní kompatibilitu se liší od rozlišení stolního počítače nebo tabletu. Každá velikost obrazovky by měla mít v designu svůj konkrétní obrázek.

Předpoklad k otestování tohoto scénáře: Testování a kontrola rozlišení obrázků může být obtížným úkolem. Požádejte vývojáře, aby na responzivní web vložil tři různé obrázky zvlášť pro mobily, tablety a počítače.

Otevřete web s responzivním designem testování z počítače, tabletu a mobilu. Obrázky na responzivní webové stránce by se měly u všech tří zařízení lišit.

(NEBO)

Otevřete testovací RW z plochy a zkontrolujte obrázek na webové stránce. Nyní změňte velikost okna na velikost tabletu a zkontrolujte obrázek. To by se mělo lišit od obrázku zobrazeného pro velikost obrazovky na ploše. Nyní můžete změnit velikost okna na velikost obrazovky pro mobilní zařízení a zkontrolovat obrázek. Tento obrázek by se měl také lišit od výše uvedených dvou obrázků.

Příklad: Otevřete responzivní web www.fpl.com z počítače; klikněte pravým tlačítkem na obrázek na domovská stránka -> vyberte možnost „Zkontrolovat“ z nabídky. Zkontrolujte rozlišení obrázku (zkontrolujte příponu názvu souboru obrázku .jpg) z kódu. Viz následující snímek obrazovky:

Nyní změňte velikost stejného okna na velikost obrazovky tabletu a zkontrolujte rozlišení obrazu. (Přípona názvu obrázku je medium.jpg)

Nakonec změňte velikost okna na velikost mobilní obrazovky a zkontrolujte obrázek. (Přípona názvu obrázku je small.jpg)

# 7) Náhodně klikněte kdekoli na webové stránce a zkontrolujte, zda jsou iniciována nějaká data nebo text, který není hypertextový odkaz, a přesměrován na jinou stránku nebo obsah. Toto testuje, zda je nějaké slovo nebo text označen jako hypertextový odkaz v souboru zadní konec .

Poznámka : V několika projektech hovoří požadavky o velikosti pixelu a rozlišení obrazovky pro konkrétní zařízení. (Například, zobrazení tabletu pro jejich RW by mělo být 15:15 pixelů a pro mobilní zařízení by to mělo být 10:10 atd.)

Hlavním scénářem je testování dynamických změn, ke kterým by mělo dojít na displeji RW, když změníme velikost pixelu.

# 8) Otevřete náš testovací RW v prohlížeči a zobrazte obsah a zobrazení hlavních obrázků. Nyní změňte velikost okna až k zarážce velikosti tabletu a ověřte změny, ke kterým by mělo dojít v rozlišení obrazu a jakémkoli jiném obsahu. U zarážek by se změny měly provádět dynamicky (někdy ke změnám nedojde u zarážek a mohou se změnit u jiné velikosti pixelu, což je vada.)

Nástroje pro testování responzivního webu

Existuje několik nástrojů (webů), které vám umožní zobrazit náhled webových stránek našeho responzivního webu.

Například,můžeme náš responzivní web otestovat v různých předdefinovaných rozlišeních obrazovky (smartphony, tablety atd.) a také přizpůsobit libovolnému požadovanému rozlišení. Tyto nástroje usnadňují a zrychlují testování. Tyto nástroje v prohlížeči lze označit jako Respondent .

Některé nástroje také nabízejí důležitou funkci zachycení responzivního snímku obrazovky, který nám může pomoci otestovat návrhy webových stránek, HTML, rozvržení, CSS atd. Responzivního webu.

Tyto nástroje jsou skvělou alternativou, když skutečná zařízení nejsou k dispozici nebo nejsou připravena.

Zde je rychlý seznam nástrojů:

# 1) Responzivní kontrola designu

Do výše uvedeného pole „Sem zadejte svou adresu URL“ zadejte adresu URL responzivního webu, který je třeba otestovat, a klikněte na „PŘEJÍT“. Můžete dokonce vybrat zařízení a rozlišení, ve kterém chcete zobrazit responzivní web.

Nyní zadejte www.fpl.com v poli vyberte rozložení „Nexus 7 PORTRÉT“ a klikněte na GO. Stránka se zobrazí v rozlišení vybraného formátu.

#dva) Screenfly

Vstupte na testovací web www.fpl.com a klikněte na GO.

Změňte rozložení na plochu, tablet, mobil atd. A web otestujte. Pomocí tohoto nástroje můžete dokonce upravit rozlišení.

Například, nastavte rozlišení obrazovky na 512 x 256 a web otestujte.

Poznámka : S tímto nástrojem můžete dokonce testovat scénář 6 snadno změnou rozlišení a ověřením pojmenování obrázku.

# 3) Designmodo

Zadejte libovolnou adresu URL, www.makemytrip.com a klikněte na Enter.

V pravé horní části prohlížeče máte možnost změnit rozložení webových stránek na jakékoli konkrétní mobilní modely nebo zařízení atd.

Poznámka : Tento nástroj má další funkci, jako je přetažení obrazovky a úprava rozlišení na požadované rozlišení.

# 4) odpovídá

Zadejte testovací URL, www.fpl.com v poli a klikněte na tlačítko „Testovat“.

Poznámka: Tento nástroj má jen několik možností pevného rozvržení, na kterých lze náš web otestovat.

# 5) Mattkersley

Pokud chcete mít přehled o vašem RW na více velikostech obrazovky najednou, pak tento nástroj mattkersley je to, co potřebujete.

Nyní zadejte do adresního řádku testovací URL a klikněte na Enter. RW můžete zobrazit na několika velikostech obrazovky najednou.

# 6) Ve výchozím stavu, chrome má několik nástrojů Dev pomocí kterého můžeme simulovat režim zařízení a jejich schopnosti.

čím otevřít soubory SWF

Chcete-li použít tuto funkci chromu, otevřete libovolný web s testovacím responzivním designem www.fpl.com v chromu a klikněte pravým tlačítkem na webovou stránku a v nabídce vyberte možnost „Zkontrolovat“ nebo stiskněte Ctrl + Shift + I. Níže se otevře okno ve spodní části webové stránky.

Nyní klikněte na ikonu, jak je znázorněno na následujícím snímku obrazovky.

Otevře se mobilní režim webové stránky. Z toho můžete změnit rozlišení na libovolný konkrétní pixel a také na jakýkoli předdefinovaný mobilní model, který se zobrazí v rozevírací nabídce. Podívejte se na níže uvedený snímek a získáte jasnou představu:

Poznámka: Můžeme také změnit webovou stránku na výšku nebo na šířku.

Další dobré nástroje k testování responzivního designu:

7) ResponsiveDesign
8) BrowserStack
9) Troy
10) AmIResponsiveDesign
jedenáct) Respondent
12) Studiopress
13) ResponsiveTest
14) Pro stroje MAC máme samostatnou aplikaci nazvanou „ VEJÍT SE „Otestovat RW. Tato aplikace umožňuje nastavit různé zarážky na různých zařízeních pro testování. APTUS není bezplatná aplikace a musíme si ji koupit v Mac App Store.

Výzvy při testování responzivního designu a možných řešení

Strategie dynamického testování

Přechod z 320 × 480 (rozlišení iPhone4) na 2048 × 2048 (velký monitor) ponechává přes 4 miliony možných velikostí prohlížeče. Většina testovacích skupin zúží seznam testovacích zařízení na hrst. I tehdy je problém s manuálním testováním obtížný nebo nemožný.

Vývojáři nemohou předvídat všechny problémy s platformou a testeři je nemohou chytit před vydáním. Z tohoto důvodu najdeme ve výrobě občasný problém s uživatelským rozhraním.

Možná někdo zmenšil velikost svého prohlížeče, což způsobilo, že důležitá textová pole byla pokryta štítkem stránky. Možná nějaký kód určený ke zpracování dynamické změny velikosti stránky rozbije modální výběr dat a nikdy si ho nevšimne normální test postavený na WebDriveru. Existuje příliš mnoho možností zobrazení pro sestavení testů a příliš málo času.

Pojďme se podívat narealistický příkladpro ilustraci problému.

Dynamické stránky, například posuvníky reklamy, a obsah streamovaný od uživatelů v různých velikostech stránek, jsou základem mnoha softwarových produktů. Přidejte k tomu skutečnost, že nemůžeme předpovědět, jak bude stránka zobrazena, a mnoho automatizačních snah začíná selháním.

Vidím dvě populární řešení tohoto problému - pomocí standardizované nebo základní datové sady a osvěžující, že pokaždé, když je spuštěna testovací sada, a brát věci do jednoho prostředí nebo platformy najednou.

Standardní data zajišťují, že obsah stránky bude vypadat stejně pokaždé, když načteme testovací prostředí. Tato strategie v kombinaci s něčím jako Sauce Labs, které lidem umožňuje přístup k mnoha platformám, a dostanete se docela daleko.

Tento přístup vyžaduje čas a prostředky. K vytvoření a aktualizaci exportu databáze budete potřebovat čas od někoho s přístupem k databázi, obvykle DBA. A někdo musí vytvořit skripty pro nastavení a odtržení skriptů, aby udržel testovací prostředí. Po tom všem úsilí byste mohli skončit s typem sanitovaného prostředí, ve kterém se chyby rádi skrývají.

Alternativně můžete použít technologii Visual Testing k automatizaci testů na webových stránkách, které se liší rozložením a obsahem. Pomocí tohoto nástroje můžete vytvářet testy bez jakýchkoli změn ve vašem testovacím prostředí a bez nutnosti jakýchkoli dovedností od lidí mimo vaši testovací skupinu.

Podívejme se na příklad.

Zvažte mobilní aplikaci Twitter.

Tento produkt je kombinací neustále se měnícího uživatelského obsahu a reklamy. V záhlaví je také několik základních částí uživatelského rozhraní, například zpravodajský kanál a oznámení.

Pomocí nástroje pro vizuální testování byste mohli začít tím, že provedete snímání obrazovky celé rolovatelné stránky, nejen viditelné oblasti. Můžete si vybrat možnost porovnání, která ignoruje textový obsah, ale zaměřuje se na prvky na stránce.

Například, viděli jste, že existují pole pro tweety, že každý tweet má prvek jména a prvek data / času, aniž byste se museli starat o to, co je v prvcích.

Hledání prvků napříč plnými stránkami také uvolňuje zátěž údržby a složitosti, kterou vidíme v mnoha automatizovaných testech. Spíše než manipulovat s daty na stránce, ukládat, posouvat a poté ověřovat, získáte vše najednou. To znamená méně kódu pro zápis, méně kódu pro údržbu a méně falešných poplachů při nočních testech.

Responzivní testování pro responzivní design:

Responzivní design přidal kombinatorický problém na každou dostupnou platformu. Otázkou je; ze všech těchto možných platforem a velikostí obrazovek, které vybereme pro nejlepší pokrytí testem.

Snížení počtu prostředí, která pokrýváme, pouze na ty nejpopulárnější, usnadňuje technický úkol a zároveň ignoruje problém s pokrytím.

Samotné zvýšení počtu prostředí pomocí automatizačního rámce vytváří noční můru údržby a potenciálně přidává neřešitelný problém s testováním.

Kombinace dobrých nástrojů pro vizuální testování s flexibilním automatizačním rozhraním uživatelského rozhraní, jako je webový ovladač, může technické aspekty tohoto problému nejen usnadnit, ale také vyřešit.

Cílem je dobré pokrytí uživatelského rozhraní s rozumnou zátěží údržby. Vizuální testování je vaše jediná robustní a škálovatelná možnost.

Tipy pro responzivní testování webu

# 1) Při testování RW byste měli pamatovat na konzistenci designu, jako je zarovnání obrázků, textů, polstrování kolem okrajů atd. Napříč všemi prohlížeči a operačními systémy.

#dva) Během testování RW by si měl tester být vědom toho, co má testovat a jak testovat na více zařízeních v různých zarážkách. Jinak by to mohlo být docela vyčerpávající a dezorientující.

# 3) Pro důkladné testování responzivního webu je nutná koordinace testerů a vývojářů. Vývojář by měl pomoci testerům s vytvářením podmínek uvedených v předpokladech testovacích případů.

# 4) Zkontrolujte, zda jsou webové stránky čitelné ve všech rozlišeních, tj. Obsah by měl být čitelný, i když změníme velikost prohlížeče na velikost obrazovky pro mobilní zařízení.

# 5) Důležitý obsah RW by měl být viditelný pro všechny zarážky, tj. Pokud změníme velikost prohlížeče z obrazovky plochy na obrazovku mobilní, hlavní obrázky, hlavní text, nabídka atd. By měly zůstat stejné.

# 6) Pokud je pro testování změněna velikost prohlížeče, pak by pro kliknutí měla být vhodná jakákoli oblast kliknutí (například tlačítka, nabídky, pod odkazy atd.) RW.

# 7) Změnou velikosti prohlížeče a otestováním responzivního webu lze identifikovat pouze několik hlavních problémů, zatímco na mobilních zařízeních může být několik dalších problémů souvisejících s tahy prstů, poklepáním atd. Testování těchto konkrétních funkcí na skutečných zařízeních může vést k lepšímu nalezení a odstranění závady.

Závěr

Když testujeme, responzivní design bude mít mnoho výzev. Měli byste přemýšlet efektivním způsobem, abyste překonali výzvy.

Testování responzivního webu je pro úspěšnou budoucnost mnoha lidí velmi důležité mobilní aplikace. Uživatelé mobilních zařízení se budou jen zvyšovat a jejich očekávání se velmi liší od očekávání uživatelů počítačů. Implementace a důkladné testování RWD je skvělý způsob, jak nastavit vaše stránky tak, aby splňovaly očekávání.

Implementace a důkladné testování RWD je skvělý způsob, jak nastavit vaše stránky tak, aby splňovaly očekávání.

Doufáme, že informace, tipy a testovací scénáře popsané v tomto článku jistě pomohou vašim potřebám reagovat na testování webových stránek.

O autorovi: Toto je příspěvek od Laxmi. Má více než 7 let zkušeností s testováním softwaru a v současné době pracuje jako senior inženýrka v oblasti testování softwaru.

Vyzkoušejte všechny příklady uvedené v tomto článku a dejte nám vědět, pokud máte nějaké dotazy nebo komentáře ke stejnému tématu.

Doporučené čtení

• Alfa testování a beta testování (kompletní průvodce)
• Kompletní průvodce pro testování ověřování sestavení (testování BVT)
• Funkční testování vs. nefunkční testování
• Typy testování softwaru: Různé typy testování s podrobnostmi
• Nejlepší nástroje pro testování softwaru 2021 (QA Test Automation Tools)
• Výukový program pro testování datového skladu ETL (kompletní průvodce)
• Průvodce testováním zabezpečení webových aplikací
• Nejlepší služby testování softwaru QA od SoftwareTestingHelp