Отзивчиво тестване на уеб дизайн: Пълното ръководство за начинаещи

responsive web design testing

В днешната епоха използването на мобилни устройства за достъп до интернет нарасна и стана доста популярно. Почти всеки потребител на интернет желае мобилна версия на уебсайта.

Повечето уебсайтове обаче не са толкова оптимизирани, колкото би трябвало да бъдат за мобилни устройства. Тестерите трябва да извършат мобилен реагиращ тест на адаптивни дизайни.

Традиционните софтуерни продукти правят по същество едно и също на всяко устройство.

Microsoft Office, например , изглежда еднакво на всеки персонален компютър. Представете си, че приемате Microsoft Word точно както работи на вашия работен плот и го преглеждате на iPhone4. Или менютата и бутоните ще изглеждат малки, или ще видите само ъгъл на екрана и ще трябва да използвате обширни ленти за превъртане. Така или иначе приложението става по същество неизползваемо.

Това разочароващо преживяване е точно това, през което преминава всеки дизайнер, когато се опитва да проектира за мрежата.

Решението на проблема е нещо, наречено „отзивчив дизайн“, техника, при която уеб страниците да питат браузъра каква е разделителната способност, след което грациозно да препроектират потребителското изживяване въз основа на наличните недвижими имоти на екрана. Изведнъж е невъзможно да се знае как точно ще изглежда вашият софтуер в производството.

Това означава тестова стратегия (и стратегия за автоматизация), която трябва да може да експериментира и да научи какво „изглежда правилно“ и кое не, при различни резолюции.

Какво ще научите:

• Ръководство за начинаещи за тестване на отзивчиви дизайни на уебсайтове
  • Какво е отзивчив уеб дизайн?
  • Предимства на отзивчивия дизайн:
  • Основни компоненти на отзивчивия дизайн на уебсайтове:
  • Отзивчиви примери за уеб дизайн
  • Как да тествате отзивчив уебсайт
  • Примерни тестови сценарии за отзивчиво тестване на уебсайт:
  • Инструменти за тестване на отзивчив уебсайт
  • Предизвикателства при тестване на отзивчив дизайн и възможни решения
  • Съвети за адаптивно уеб тестване
• Заключение
  • Препоръчително четене

Ръководство за начинаещи за тестване на отзивчиви дизайни на уебсайтове

Когато се опитваме да отворим уебсайт, сървърът изписва „ m.sub-домейни ”, За да идентифицирате от какъв тип мобилно устройство произхожда искането. Въз основа на това той пренасочва потребителя към съответната мобилна версия.

За да направи това 100% ефективно, всяко устройство трябва да има собствен дизайн на уебсайта, специално създаден за него; еили пример,различен специфичен дизайн за Blackberry, iPhone, iPad и др., като се вземат предвид размерът на екрана и резолюциите им.

Различната уеб версия за всяка резолюция и устройство обаче не е практична. The Итън Маркот излезе с нов подход - отзивчив уеб дизайн ( RWD ) - това решава този проблем.

Нашата препоръка

# 1) LT браузър

LT браузър помага на потребителите да тестват и отстраняват грешки в уебсайта си на 45+ екрана за преглед на устройства. Тествайте уебсайта си на различни предварително инсталирани портове за преглед на мобилни и настолни устройства с LT Browser, удобен за разработчици браузър за отстраняване на грешки в мобилен изглед.

Просто въведете URL адреса на уебсайта си, изберете устройството, на което да тествате уебсайта си. Можете едновременно да изберете две устройства за сравняване на изглед отстрани.

Не само тестването, но и потребителите могат да отстраняват грешки в уебсайта си в движение с помощта на вградени DevTools, предлагани от LT Browser.

Най-хубавото е, че потребителите могат да създадат персонализирано устройство въз основа на техните изисквания, което прави LT Browser нашият първи избор за отзивчиво тестване.

Какво е отзивчив уеб дизайн?

RWDцели за уебсайтовете да реагират на тяхното устройство, разделителна способност и да могат да изобразяват и адаптират правилно. Например, ако потребителят премине от настолен компютър / лаптоп към iPad, тогава уебсайтът трябва автоматично да адаптира промените в разделителната способност като размера на изображението и т.н. според съответните възможности на устройството.

Накратко,Адаптивен дизайне „Един уебсайт за всеки екран“ .

Екранът по-долу епримерна RWD:

това е въпроси и отговори на интервю за бюрото

Забележка: Реално времепримерна отзивчив уебсайт е www.fpl.com

В RWD уебсайтът е създаден, за да осигури превъзходно потребителско изживяване чрез лесна навигация, ясен и опростен потребителски интерфейс и др.

• Отзивчивите уебсайтове са кодирани в PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) и много нови рамки, които са много удобни за разработване на адаптивни дизайни.
• CSS и HTML функциите се използват, за да направят разделителните способности на екрана и изображенията да се оразмеряват автоматично.
• Дизайнът на RW използва точки на прекъсване, за да идентифицира оформлението на даден сайт. Всеки дизайн се използва на различни точки на прекъсване. Един дизайн се прилага върху точката на прекъсване, докато друг дизайн се използва под точката на прекъсване. Тези точки на прекъсване обикновено се основават на ширината на браузърите.
• Докато проектират реагиращ уебсайт, разработчиците вземат предвид съдържанието, дизайна и ефективността на сайта на всички устройства осигурете използваемост .

Диаграмата е точно подобно на това как съдържанието се адаптира към околната среда и поведението на устройството.

Забележка : Освен RWD има и друг подход, наречен Адаптивен уеб дизайн ( AWD ) . В подхода AWD ще има специфичен дизайн за всяко устройство. AWD обаче може да не е подходящ през цялото време. Освен това проектирането на AWD сайтове отнема повече време и пари в сравнение с RWD сайтовете.

Предимства на отзивчивия дизайн:

# 1) Потребителски опит: Въз основа на устройството, от което имаме достъп до RW, той скрива необичайните елементи и помага на потребителите да постигнат целите си по-бързо.Например:ако отворим RW от мобилно устройство, тогава той скрива маловажните елементи и ускорява зареждането на уеб страниците.

# две) Споделяне или свързване: За RW се използва само един URL адрес за различни устройства. Тъй като само един URL адрес натрупва всички данни и информация от различни устройства, това дава по-добър UX за потребителите.

# 3) Необходима е малка или минимална поддръжка за RW.

# 4) Оформленията на RW са течни.

Разлики между адаптивния уеб дизайн и адаптивния уеб дизайн:

RWD и AWD са тясно свързани помежду си.

• RWD реагира бързо и положително на промените, докато AWD може лесно да бъде модифициран за нова цел.
• RWD има множество оформления на флуидна решетка, а AWD има множество оформления с фиксирана ширина.
• Изображенията в RWD се наричат ​​контекстно съобразени.

Основни компоненти на отзивчивия дизайн на уебсайтове:

Адаптивният уеб дизайн има три основни компонента:

# 1) Гъвкави оформления: Изграждане на уебсайт с гъвкава мрежа, която може лесно да се преоразмерява до всякаква ширина динамично.

# две) Медийни заявки: Осигурете различни стилове за браузърите и устройствата въз основа на контекста, като ориентацията на устройството, прозореца за преглед и т.н.

# 3)Гъвкава среда: Тъй като размерът на прозорците се променя, медиите (изображения, видеоклипове и т.н.) също трябва да променят своя размер или разделителна способност в съответствие с изискването.

Забележка : “Viewport” е областта на браузъра, където се показва действителното съдържание на уебсайта. Viewport не включва лентите с инструменти, разделите и т.н.

Отзивчиви примери за уеб дизайн

Пример # 1)

Отворете връзката www.fpl.com от различни устройства и наблюдавайте URL адреса. URL адресът на адаптивния уебсайт остава един и същ за всички устройства.

да се) Изглед на RW от настолен компютър или лаптоп (голям размер на екрана)

б) Изглед на RW от таблет (среден размер на екрана)

° С) Изглед на RW от мобилен телефон (малък размер на екрана)

Пример # 2)

Отворете сайта www.yepme.com от лаптоп, а също и от мобилен телефон и сравнете URL адресите. Това yepme.com link не е отзивчива връзка.

да се) Изглед на уеб сайт, който не реагира, от настолен компютър или лаптоп

б) Изглед на уеб сайт, който не реагира от мобилен телефон

Как да тествате отзивчив уебсайт

Тестът за реагиращ дизайн означава тестване на уебсайта или URL от различни устройства. На практика не е възможно да се тества напълно адаптивният уебсайт, защото за да го направим, трябва да настроим различни системи за различни размери на екрана.

Възможният начин за реагиращ тест е чрез преоразмеряване размера на прозореца на браузъра според тестовия сценарий.

Някои браузъри, като IE и Safari, ще предоставят приставки или разширения на браузъра, които ще ви помогнат да видите областта на изгледа в пиксели. Това прави тестването лесно чрез получаване на желания размер на екрана чрез модифициране на пикселите.

Други браузъри като Chrome предоставят софтуер или програма, наречена 'Съперник' което ще помогне за промяна на характеристиките на екрана и околната среда според желаното устройство, необходимо за тестване.

Забележка: 'Съперник' е софтуер или програма, която се предоставя в браузъра, което кара системата хост (текущ браузър) да се държи като системата за гости (браузър на желаното устройство, което трябва да бъде тествано за желания размер на екрана).

Въпреки че емулаторите не могат да ви дадат точната среда, необходима за тестване, те са рентабилно решение за тестване на RW на високо ниво.

Примерни тестови сценарии за отзивчиво тестване на уебсайт:

Тестерът за отзивчив уеб дизайн трябва да се увери, че отзивчивият дизайн удовлетворява всички споменати по-долу тестови сценарии за да се гарантира, че това е отзивчив дизайн без грешки.

# 1) Отзивчивата връзка към уебсайта или URL адресът трябва да са еднакви за всички браузъри във всяко устройство, независимо от разделителната способност на екрана.

Да предположим www.abc.com е отзивчив уебсайт. Ако го отворим на лаптоп и мобилен телефон, тогава URL адресът трябва да бъде еднакъв и на двете устройства. Уебсайтът, отворен в мобилния браузър, не трябва да започва с www.m.abc.com или www.mobile.abc.com

Пример: Отворете уебсайта www.kotak.com от лаптоп, а също така отворете същото и от мобилно устройство и наблюдавайте URL адреса в двете устройства. URL адресът не е еднакъв за двете устройства.

По-долу моментната снимка показва как се променя URL адресът за уеб сайт, който не реагира на различни устройства като лаптоп и мобилни устройства.

Отворете уебсайта www.w3schools.com от лаптоп и от мобилно устройство и проверете URL адресите. Трябва да е еднакво и за двете устройства.

По-долу моментна снимка показва, че URL адресът остава един и същ за реагиращ уебсайт на различни устройства:

# две) Показваното местоположение на съдържанието (изображения, под-връзки, менюта и т.н.) на отзивчив уебсайт трябва да се променя динамично според промяната в разделителната способност на екрана. Тоест, ако променим разделителната способност на екрана от размера на лаптопа на мобилен, тогава показването на опциите на менюто трябва да се променя динамично.

Пример: Отворете връзката www.fpl.com от лаптоп и кликнете върху менюто в горния десен ъгъл на прозореца. Опциите на менюто се показват, както е показано по-долу:

Отворете www.fpl.com от мобилен телефон и кликнете върху менюто в горния десен ъгъл на прозореца. Опциите на менюто са както по-долу:

Забележка: Този сценарий може да бъде тестван и с помощта на емулатори на браузър (Бившия:хром).

Отворете уебсайта www.fpl.com през десктоп и наблюдавайте как се показват опциите на менюто. Вижте снимка по-долу:

най-добрият блокиращ прозорец за хром

Сега преоразмерете прозореца на браузъра до този с размер на мобилния екран и след това проверете показването на опциите на менюто. Вижте снимка по-долу:

# 3) URL адресите на отзивчив уебсайт също трябва да са специфични за разделителната способност.

Предварително условие за тестване на този сценарий: Помолете разработчика да вмъкне която и да е подвръзка в уеб сайта на Responsive testing, където подвръзката не реагира.

Например, разработчикът може да вмъкне връзка www.snapdeal.com към нашия уебсайт за тестване.

Сега отворете уебсайта за адаптивно тестване от мобилно устройство и кликнете върху подвръзката, спомената в предварително условието. Тогава URL адресът на подвръзката трябва да се промени на https://m.snapdeal.com .

# 4) Същият сценарий може да бъде тестван и от лаптоп. Отворете RW от настолен компютър или лаптоп и щракнете върху подвръзката (спомената в предпоставката на тестовия сценарий три), която не реагира. URL адресът на подвръзката не трябва да се променя (тъй като тестваме този сценарий от лаптопа, URL адресът трябва да остане същият).

# 5) Предварително условие за тестване на този сценарий: Помолете разработчика да вмъкне всяка подвръзка,например, www.paytm.com в сайта за тестване. Мобилното устройство, в което ще изпълнявате този сценарий, трябва да има съответното приложение на Paytm, инсталирано в мобилния телефон.

Сега отворете нашия тестващ реагиращ уебсайт от мобилно устройство и кликнете върху подвръзката „paytm“. След това трябва да се отвори приложението Paytm, което е инсталирано в мобилния телефон. (Потребителят не трябва да бъде пренасочен към уебсайта в браузъра или друг прозорец; само приложението трябва да е отворено.)

# 6) Изображенията в отзивчивия уебсайт имат специфична разделителна способност. Това означава, че разделителната способност на изображението, вмъкнато в кода на адаптивния уебсайт, предназначен за мобилна съвместимост, е различна от тази на настолен компютър или таблет. Всеки размер на екрана трябва да има специфично изображение в дизайна.

Предварително условие за тестване на този сценарий: Тестването и проверката на разделителната способност на изображенията може да бъде трудна задача. Помолете разработчика да вмъкне три различни изображения в отзивчивия уебсайт отделно за мобилни устройства, таблети и настолни компютри.

Отворете тестващия уебсайт за реагиращ дизайн от настолен компютър, таблет и мобилен телефон. Изображенията на адаптивната уеб страница трябва да са различни за трите устройства.

(ИЛИ)

Отворете тестовия RW от десктоп и проверете изображението на уеб страницата. Сега преоразмерете прозореца до този на таблет и проверете изображението. Това трябва да се различава от това на изображението, показано за размера на екрана на работния плот. Сега можете да промените размера на прозореца до размера на мобилния екран и да проверите изображението. Това изображение също трябва да се различава от горните две изображения.

Пример: Отворете отзивчивия сайт www.fpl.com от десктоп; щракнете с десния бутон върху изображението на начална страница -> изберете „Проверка“ от менюто. Проверете разделителната способност на изображението (проверете разширението на името на файла с изображение .jpg) от кода. Вижте екранната снимка по-долу:

Сега преоразмерете същия прозорец до този с размер на екрана на таблета и проверете за разделителна способност на изображението. (Разширението на името на изображението е medium.jpg)

И накрая, преоразмерете размера на прозореца до този на мобилния екран и проверете изображението. (Разширението на името на изображението е small.jpg)

# 7) Щракнете произволно навсякъде на уеб страницата и проверете дали някакви данни или текст, които не са хипервръзки, се инициират и пренасочват към друга страница или съдържание. Това проверява дали някоя дума или текст е маркирана като хипервръзка в заден край .

Забележка : В няколко проекта изискванията говорят за размера на пикселите и разделителната способност на екрана за определени устройства. (Например, изгледът на таблета за тяхното RW трябва да бъде на 15:15 пиксела, а за мобилен телефон - в 10:10 и т.н.)

Основният сценарий е тестването на динамичните промени, които трябва да се случат за RW дисплея, когато променим размера на пикселите.

# 8) Отворете нашия тестващ RW в браузър и прегледайте съдържанието и показването на основните изображения. Сега преоразмерете прозореца до точката на прекъсване на размера на таблета и проверете промените, които трябва да се случат при разделителната способност на изображението и всяко друго съдържание. В точките на прекъсване промените трябва да се случват динамично (понякога промените няма да се случат в точките на прекъсване и могат да се променят при някои други размери на пикселите, което е дефект.)

Инструменти за тестване на отзивчив уебсайт

Има малко инструменти (уебсайтове), които ще ви позволят да визуализирате уеб страниците на нашия реагиращ уебсайт.

Например,можем да тестваме нашия реагиращ сайт с различни предварително дефинирани резолюции на екрана (смартфони, таблети и т.н.) и също така да персонализираме до желаната резолюция. Тези инструменти правят дейностите по тестване по-лесни и бързи. Такива инструменти в браузъра могат да бъдат наречени като Отговорник .

Някои инструменти също предлагат важна функция за заснемане на адаптивната екранна снимка, която може да ни помогне да тестваме дизайна на уебсайта, HTML, оформления, CSS и др. На адаптивния уебсайт.

Тези инструменти са чудесна алтернатива, когато действителните устройства не са налични или са готови.

Ето списък с бързи инструменти:

# 1) Отзивчива проверка на дизайна

Въведете URL адреса на отзивчивия уебсайт, който трябва да бъде тестван в горното поле „Въведете URL адреса си тук“ и кликнете върху „GO“. Можете дори да изберете устройството и разделителната способност, при които искате да видите отзивчивия сайт.

Сега влезте www.fpl.com в полето изберете оформлението „Nexus 7 PORTRAIT“ и кликнете GO. Сайтът се показва в разделителната способност на избрания формат.

# две) Screenfly

Влезте в сайта за тестване www.fpl.com и щракнете GO.

Променете оформлението на настолен, таблет, мобилен и т.н. и тествайте сайта. С този инструмент можете дори да персонализирате разделителната способност.

Например, задайте разделителната способност на екрана на 512 x 256 и тествайте сайта.

Забележка : С този инструмент можете дори да тествате сценарий 6 лесно чрез промяна на разделителните способности и проверка на именуването на изображението.

# 3) Designmodo

Въведете произволен URL, www.makemytrip.com и натиснете Enter.

От дясната горна страна на браузъра имате възможност да промените оформлението на уебсайта на това на всеки конкретен мобилен модел или устройство и т.н.

Забележка : Този инструмент има още една функция като плъзгане на екрана и промяна на разделителната способност до желаната от нас разделителна способност.

# 4) isResponsive

Въведете URL за тестване, www.fpl.com в полето и кликнете върху бутона „Тест“.

Забележка: Този инструмент има само няколко опции с фиксирано оформление, на които нашият сайт може да бъде тестван.

# 5) Маткерсли

Ако искате да имате изглед на вашия RW на няколко размера на екрана наведнъж, тогава този инструмент mattkersley е това, от което се нуждаете.

Сега въведете URL адреса за тестване в адресната лента и щракнете върху Enter. Можете да преглеждате RW едновременно на няколко размера на екрана.

# 6) По подразбиране, chrome има няколко Dev Tools чрез които можем да симулираме режима на устройството и техните възможности.

За да използвате тази функция на chrome, отворете всеки уебсайт за адаптивен дизайн за тестване, като www.fpl.com в chrome и щракнете с десния бутон на мишката върху уеб страницата и изберете опцията “Inspect” от менюто или натиснете Ctrl + Shift + I. Долният прозорец се отваря в долната част на уеб страницата.

Сега кликнете върху иконата, както е показано на екрана по-долу.

Мобилният режим на уеб страницата се отваря. От това можете да промените разделителната способност на който и да е конкретен пиксел, а също и на всеки предварително дефиниран мобилен модел, който се показва в падащото меню. Вижте снимката по-долу, за да получите ясна представа:

Забележка: Също така можем да променим уеб страницата на портрет или пейзаж.

Други добри инструменти за тестване на отзивчив дизайн:

7) Адаптивен дизайн
8) BrowserStack
9) Троя
10) AmIResponsiveDesign
единадесет) Отговорник
12) Studiopress
13) ResponsiveTest
14) За MAC машини имаме отделно приложение, наречено „ FIT ”За тестване на RW. Това приложение ви позволява да настроите различни точки на прекъсване на различни устройства за тестване. APTUS не е безплатно приложение и трябва да го купим от Mac App Store.

Предизвикателства при тестване на отзивчив дизайн и възможни решения

Динамична тестова стратегия

Преминаването от 320 × 480 (разделителната способност на iPhone4) към 2048 × 2048 (голям монитор) оставя над 4 милиона възможни размера на браузъра. Повечето тестови групи ще ограничат списъка с тестови устройства до шепа. Дори тогава проблемът с ръчното тестване е трудно или невъзможно да се подходи.

Разработчиците не могат да предвидят всички проблеми на платформата и тестерите не могат да ги хванат преди пускането. Поради това откриваме случайни проблеми с потребителския интерфейс в производство.

Може би някой е намалил размера на браузъра си, причинявайки важни текстови полета да бъдат покрити с етикет на страница. Може би някакъв код, предназначен да се справи с динамичното преоразмеряване на страници, прекъсва модалните инструменти за избор на дата и никога не се забелязва от нормален тест, изграден на WebDriver. Има твърде много опции за показване за изграждане на тестове за и твърде малко време.

Нека да разгледамереалистичен примерза илюстриране на проблема.

Динамичните страници, неща като рекламни плъзгачи и съдържание, предавано от потребители с различни размери на страници, са основна част от много софтуерни продукти. Добавете към това факта, че не можем да предскажем как ще се показва страницата и много усилия за автоматизация започват с неуспех.

Виждам две популярни решения за този проблем - използване на стандартизиран или изходен набор от данни и освежаване, че всеки път, когато тестовият пакет се изпълнява, и вземане на нещата по една среда или платформа в даден момент.

Стандартните данни гарантират, че съдържанието на страницата ще изглежда еднакво всеки път, когато заредим тестовата среда. Тази стратегия, съчетана с нещо като Sauce Labs, което дава на хората достъп до много платформи и се стига доста далеч.

Този подход отнема време и ресурси. За създаването и актуализирането на експортирането на база данни ще ви е необходимо време от някой с достъп до база данни, обикновено DBA. И някой трябва да създаде скриптове за настройка и скриптове, за да поддържа тестовата среда. След всички тези усилия може да се окажете в типа на санирана среда, в която грешките обичат да се крият.

Като алтернатива можете да използвате технологията за визуално тестване, за да помогнете за автоматизирането на тестовете на уеб страници, които се различават по оформление и съдържание. Използвайки този инструментариум, можете да създавате тестове без никакви промени в тестовата среда и без да изисквате набори от умения от хора извън вашата тестова група.

Нека разгледаме един пример.

Помислете за мобилното приложение Twitter.

Този продукт е комбинация от непрекъснато променящо се потребителско съдържание и реклама. В заглавката има и няколко основни части на потребителския интерфейс, като емисия новини и известия.

Използвайки инструмент за визуално тестване, можете да започнете, като извършите заснемане на екрана на цялата скролираща се страница, а не само на видимата област. Можете да изберете опция за сравнение, която игнорира текстовото съдържание, но се фокусира върху елементите на страницата.

Например, можете да видите, че полетата за туитове съществуват, че всеки туит има елемент име и елемент дата / час, без да се притеснявате какво има в елементите.

Търсенето на елементи на цели страници също облекчава тежестта за поддръжка и сложност, която виждаме в много автоматизирани тестове. Вместо да манипулирате данни на страница, да запазвате, превъртате и след това проверявате, вие получавате всичко на един изстрел. Това означава по-малко код за писане, по-малко код за поддържане и по-малко фалшиви положителни резултати при нощните пробни тестове.

Отзивчиво тестване за отзивчив дизайн:

Отзивчивият дизайн добави комбинаторния проблем към всяка налична платформа. Въпросът е; от всички тези възможни платформи и размери на екрана, които ние избираме за най-добро тестово покритие.

c ++ вградени функции

Намаляването на броя среди, които обхващаме, само до най-популярните, улеснява техническата задача, като същевременно игнорира проблема с покритието.

Увеличаването на броя на средите само с рамка за автоматизация създава кошмар за поддръжка и потенциално добавя нерешим проблем за тестване.

Комбинацията от добри инструменти за визуално тестване с гъвкава рамка за автоматизация на потребителския интерфейс, като уеб драйвер, може да направи техническите аспекти на този проблем не просто по-лесни за справяне, но и разрешими.

Целта е добро покритие на потребителския интерфейс с разумна тежест за поддръжка. Визуалното тестване е единствената ви надеждна и мащабируема опция.

Съвети за адаптивно уеб тестване

# 1) Докато тествате RW, трябва да имате предвид последователността на дизайна, като например подравняване на изображения, текстове, подплата около ръбовете и т.н. във всички браузъри и операционни системи.

# две) По време на тестването на RW тестващият трябва да е наясно какво да тества и как да тества на множество устройства на различни точки на прекъсване. В противен случай може да бъде доста изчерпателно и дезориентиращо.

# 3) За задълбочено тестване на отзивчив уебсайт е необходима координацията на тестера и разработчика. Разработчикът трябва да помогне на тестерите при създаването на условията, посочени в предпоставките на тестовите случаи.

# 4) Проверете дали уеб страниците могат да се четат при всякакви разделителни способности, т.е.съдържанието трябва да се чете, дори ако преоразмерим браузъра до размера на мобилния екран.

# 5) Важното съдържание на RW трябва да бъде видимо за всички точки на прекъсване, т.е. ако променим размера на браузъра от екрана на работния плот на екрана на мобилния, тогава основните изображения, основният текст, менюто и т.н. трябва да останат същите.

# 6) Ако браузърът е преоразмерен за тестване, тогава всяка област на щракване (като бутони, менюта, под-връзки и т.н.) на RW трябва да е подходяща за щракване.

# 7) Преоразмеряването на браузъра и тестването на отзивчивия уебсайт може да идентифицира само няколко основни проблема, докато може да има няколко други проблема, свързани с прекарване на пръсти, почукване и т.н. на мобилни устройства. Тестването на тези специфични функции на действителните устройства може да доведе до по-добро откриване и отстраняване на дефекти.

Заключение

Когато тестваме Отзивчивият дизайн ще има много предизвикателства. Трябва да мислите по ефективен начин за преодоляване на предизвикателствата.

Тестването на отзивчив уебсайт е много важно за успешното бъдеще на мнозина мобилни приложения. Потребителите на мобилни устройства ще се увеличават само и техните очаквания са много различни от тези на потребителите на настолни компютри. Внедряването и задълбоченото тестване на RWD е чудесен начин да настроите сайта си да отговаря на очакванията.

Внедряването и задълбоченото тестване на RWD е чудесен начин да настроите сайта си да отговаря на очакванията.

Надяваме се, че информацията, съветите и тестовите сценарии, обсъдени в тази статия, със сигурност ще помогнат на вашите отзивчиви нужди от тестване на уебсайтове.

За автора: Това е гост публикация от Laxmi. Тя има 7+ години опит в тестването на софтуер и в момента работи като старши инженер по софтуерни тестове.

Изпробвайте всички примери, предоставени в тази статия, и ни уведомете, ако имате някакви запитвания / коментари по същото.

Препоръчително четене

• Алфа тестване и бета тестване (Пълно ръководство)
• Пълно ръководство за тестване за проверка на компилация (BVT тестване)
• Функционално тестване срещу нефункционално тестване
• Видове тестване на софтуер: Различни видове тестване с подробности
• Най-добри инструменти за тестване на софтуер 2021 г. [Инструменти за автоматизация на QA теста]
• Урок за тестване на хранилище на данни за ETL (Пълно ръководство)
• Ръководство за тестване на сигурността на уеб приложения
• Най-добрите услуги за QA софтуер за тестване от SoftwareTestingHelp