Урок за тестване на GUI: Пълно ръководство за тестване на потребителския интерфейс (UI)

gui testing tutorial

Пълно ръководство за тестване на GUI: Урок за тестване на потребителски интерфейс

Какво е тестване на GUI?

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

как да тествате скриптове между сайтове

Визуалната динамика на уеб приложение играе ключова роля в приемането на приложение с потребителя.

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

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

• Тестване на потребителския интерфейс
• Подход за тестване на потребителския интерфейс
• Често възникващи дефекти на потребителския интерфейс
• Основни изисквания за потребителски интерфейс и използваемост
• Някои основни компоненти
• Някои разширени компоненти
• Състояния на компонентите на потребителския интерфейс
• Инструменти за тестване на GUI
• Примерни случаи за тестване на GUI
• Заключение
• Препоръчително четене

Тестване на потребителския интерфейс

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

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

Тестването на браузъра се състои от по-долу два вида:

Тестване на функционалността

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

Тестване на потребителския интерфейс

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

• Областите, обхванати от тестването на потребителския интерфейс, са използваемост, външен вид и усещане, навигационни контроли / навигационни ленти, инструкции и стил на техническа информация, изображения, таблици, достъпност и др.
• За да тестваме за достъпност, трябва да проверим с указанията за достъпност на W3C-Web.

Щракнете тук за да получите насоките за W3C.

Подход за тестване на потребителския интерфейс

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

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

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

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

Например, падащото меню в windows-firefox ще бъде различно от mac-firefox. Такива проблеми са приемливи, тъй като това са помощни програми на операционната система и ние трябва да ги приемем като такива.

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

Често възникващи дефекти на потребителския интерфейс

• Проблеми с подравняването на бутоните
• Несъответстващо пространство между етикети или текстови полета
• Счупени етикети, т.е. едноредов етикет се показва в два реда
• Несъответствие между текстови полета, информационни икони, етикети или падащи менюта
• Припокриване на полета
• Непълни полета
• Данните на страницата са неправилно подравнени; изместено време нагоре или надолу
• Във всеки браузър, докато избирате някакво действие, съответното действие не се случва
• Преоразмеряването не работи според очакванията
• Времето за изтичане на сесията е много кратко или много дълго за някои браузъри
• Проблеми, специфични за браузъра - Малко полета не могат да се редактират след въвеждане на данни в един браузър, но могат да се редактират в друг браузър

Основни изисквания за потребителски интерфейс и използваемост

Основните изисквания за тестване на потребителския интерфейс на уеб приложението са:

1. Наличност на различни компоненти в потребителски интерфейс
2. Различни състояния на UI компонента

Съставна част:

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

Примерите за компонент включват бутон, текстово поле, автосугестиране, отметка, падащо меню и др.

Някои основни компоненти

Поле за отметка: Една или повече опции могат да бъдат избрани от полето за отметка

Радио бутони: Когато трябва да бъде избрана само една опция, радио бутоните са полезни

Някои разширени компоненти

1. Акордеон: С помощта на този компонент могат да се подреждат вертикално множество елементи. Всеки елемент може да бъде разширен, за да видите съдържанието в него. Повече от един елемент също могат да бъдат разширени.

2. Галета: Това е много полезен компонент, който помага при навигацията в уебсайта. Потребителят може да идентифицира текущото си местоположение в уебсайта от този компонент.

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

Щракнете тук за да получите повече полезна информация за компонентите на потребителския интерфейс

Състояния на компонентите на потребителския интерфейс

Наличността на компоненти се базира изцяло на указанията за изискванията на проекта. Тя ще варира при различните проекти.

Различните състояния на потребителския интерфейс за основен компонент са:

1. Незапълнена държава
2. Изпълнена държава и на фокус
3. Нормално състояние и състояние по подразбиране
4. Hover State
5. Инвалидна държава
6. Маскирана държава

Незапълнена държава:

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

Изпълнено състояние:

Компонент със стойност, въведена от потребителя, е запълнен.

Състояние на фокус:

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

Нормално състояние:

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

Състояние по подразбиране:

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

Hover State:

Задръжте курсора на мишката върху компонента, за да подчертаете компонента, показващ действието на курсора.

Преди задържане:

На мишката:

кои са най-добрите аниме уебсайтове

Инвалидно състояние:

Компонентът е деактивиран и потребителят не може да редактира полетата.

Активирано състояние

Инвалидна държава

Маскирано състояние:

Чувствителни данни като паролата могат да бъдат скрити с помощта на този компонент.

Основните изисквания на USABILITY за тестване на уеб приложението са:

1. Шрифтово семейство
2. Размер на шрифта
3. Цвят
4. Разстояние между буквите
5. Височина на линията
6. Основна проверка
7. Попълване / непрозрачност
8. Измервания на компонентите като дължина, широчина и ширина
9. Разположение / Разстояние между компонентите на екрана

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

Подробности за различни добавки за браузър

Предимства на добавките:

• Спестява време
• Лесен за използване
• Това е рентабилно

Ограничение на добавките:

• Паралакс грешка при използване на измерване
• Съвместим с различни приложения
• Съвместим с множество браузъри

Референции за добавки:

• Уеб инспектор: Apple Dev Tools
• Firebug: Firebug Wiki
• Измерете го
• Colorzilla

Инструменти за тестване на GUI

В света на технологиите се предлагат няколко инструмента, които биха помогнали на тестерите при тестване на потребителския интерфейс.

• Селен
• Унифицирано функционално тестване на HP
• Краставица
• Кодиран потребителски интерфейс
• Всъщност

Подробен списък с GUI инструменти е достъпен в самия софтуер testinghelp.com! Моля, кликнете тук .

Примерни случаи за тестване на GUI

1) Проверете работата на стрелките за въртене и търсачите на пътища
две) Проверете дали полето за парола приема стойности само в маскирано състояние
3) Уверете се, че бутонът „запазване“ остава неактивен, докато не бъдат въведени всички задължителни полета
4) Уверете се, че потребителят има право да навигира до горната част на страницата, използвайки лентата „Top“
5) Проверете дали правилното съобщение се показва, когато приложените филтри не извличат никакви резултати
6) Проверете навигацията от връзки, налични в Горни и долни колонтитули
7) Уверете се, че подравняването на радиобутоните е точно
8) Проверете дали едновременно могат да бъдат избрани множество опции в квадратчетата за отметка
9) Уверете се, че заглавието на всеки раздел е с удебелени букви
10) Проверете промяната на цвета на хипервръзките при щракване

Заключение

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

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

• Най-добри инструменти за тестване на софтуер 2021 г. (Инструменти за автоматизация на QA теста)
• Алфа тестване и бета тестване (Пълно ръководство)
• Изтегляне на eBook за тестване на Primer
• Функционално тестване срещу нефункционално тестване
• Пълно ръководство за тестване за проверка на компилация (BVT тестване)
• Какво е тестване на интерфейса? Познайте нейните видове, стратегия и инструменти
• Ръководство за аутсорсинг на QA: Тестване на софтуерни компании за аутсорсинг
• Видове тестване на софтуер: Различни видове тестване с подробности