Приємно познайомитися, я Коваленко Дмитро, тест-інженер програмного забезпечення у найширшому значенні цієї професiї, бо в темі тестування вже понад 8 років.

Займаюсь автоматизованим та мануальним тестуванням на роботі, онлайн навчанням у якості хобі, бо тестування то моє ВСЕ.

Працював у таких компаніях: як Приватбанк, Wix.com, Chorus.ai.

Сьогодні я хочу з Вами по-глибше пірнути у тестування інтерфейсів програм — так зване UI (User Interface) тестування.

Термінологія: тестування інтерфейсів, веб інспектор, візуальне тестування

При вивченні тестування як дисципліни, зазвичай основну увагу приділяють функціональному виду тестування, вважається вкрай важливо щоб усе працювало. Втім не менш важливо щоби, те, що вже працює ще й добре виглядало. Чи не так?

І тоді у Вас виникне правдивий гнів, яке таке воно те добре? Як виміряти красу і на що слід заводити баги? На кшталт саме цього питання з’ясовуватимемо.

Розпочнемо з чек-ліста основних критеріїв якісного інтерфейсу:

Пройшовши всі ці пункти при тестуванні нової фічі, запевняю Ви будете знати напевне, що Ваш інтерфейс заслуговує поваги юзера:

  1. Інтерфейс готового ПЗ повністю відповідає прототипам. Перевіряємо відповідність як візуально, так і вимірюючи компоненти інтерфейсу та відступи.
  2. Відповідність фірмовому/глобальному стилю. Навіть якщо є документація, здоровій глузд ніхто не відміняв. Усі нові дизайни повинні вписуватися у існуючі: споріднена палітра кольорів, шрифти, стиль декорацій.
  3. Відповідність основним правилам дизайну:
    — Не робити більше ніж 3 різних шрифти на сторінці.
    — Не робити більше ніж 3 розміри шрифту на сторінці.
    — Використовувати однакові відступи для компонентів сторінки.
    — Намагатись не використовувати шрифт менший аніж 12 px, хіба якщо Ви не видаєте кредити під заставу душі 🙂
    — Не використовувати яскравих кольорів та анімацій що мерехтитять.
  4. Респонсивність дизайну до розмірів. Перевіряємо відображення сторінки при різних розмірах вікна та екрану (залежить від типу ПЗ). Для усіх основних сучасних розмірів, верстка інтерфейсу повинна виглядати однаково добре.
  5. Респонсивність дизайну до зума. Перевіряємо відображення сторінки при різних параметрах масштабу сторінки. Відповідність стандартам desktop/web/mobile розробки. Більш детально про це можна прочитати в гайдлайнах по розробці саме Вашого типу платформи. Приклад: в аплікаціях для iphone потрібна бути кнопка “Назад” бо фізично її немає, а для android вона не потрібна.
  6. Перевірка орфографії. Також відноситься до UI Testing (тестування інтерфейсів). Не забудьте її перевірити будь-яким доступним Вам програмним забезпеченням, якщо Ви не лінгвіст як і я.
  7. Спеціальні можливості. Якщо Ваша компанія міжнародна, то це може бути дуже важливо. До цього пункту відносяться можливості: зміни контрасту, перетворення тексту в мову, підписи до зображень та інше  До теми також буде допис QA у ролі Compliance Officer

Цей чек-ліст UI тестування містить глобальні перевірки, які стануть в пригоді при тестуванні будь-якого інтерфейсу. Але давайте далі зосередимся на конкретних компонентах, які частіше всього зустрічаються в роботі, значить:

UI компоненти

Навігація — тестувальнику потрібно перевіряти у інтерфейсі всі меню, пункти меню та панель інструментів для навігації. Це потрібно робити як для клавіатури, так і для миші, щоб перевірити повну сумісність.

Форматування даних — переконайтеся, що все форматування є правильним наприклад, маскування та валідація введення дати, часу. Також таблиці та випадаючі списки повинні мати відсортовані дані.

Прокрутки — всі вертикальні та горизонтальні смуги, що використовуються при прокручуванні, повинні з’являтися лише там, де це необхідно.

Стандартні та комбінації  та комбінації швидкого доступу — всі ярлики та клавіші швидкого доступу повинні бути визначені, слід переконатися, що вони працюють правильно.

Зі свого власного досвіду, повинен Вам сказати, що не треба максимально настирно вимірювати кожен піксель інтерфейсу, проводячи UI Testing, а висновки слід робити дивлячись на політику команції, в кожній ІТ компанії свої рамки допустимих погрішностей у UI. Тільки перфекціоністам все повинне бути ідеально виміряно, але звичайно похибка в 1-3 пікселя не є суттєвою, якщо візуально не ріже око.

З найпоширеніших помилок, які бувають у початківців тестувальників, хотілося би зазначити — міряння інтерфейсів власним смаком. Бо наші уподобання не є чітким критерієм, і ми як тестувальники не висуваємо власні вимоги до ПЗ, а лише перевіряємо наявні. І то дуже важливо розуміти! Моя перша рекомендація тут — при відкритті багів користуватися виключно вимогами, вище перелікованими стандартами, а не власним смаком, як би ми себе не любили.

UI Testing приклади

На останок хочу навести з деякі з цікавих багів UI тестування інтерфейсу з моєї  особистої практики тестувальника.

  1. На цьому скріншоті цілих 2 баги. Ім’я юзера, виконано меншим шрифтом ніж інші, шо є неповагою до користувачів. Також маємо 2 кольори для однакового шрифту в хедері й тілі сторінки, а бажано щоб вони були однакові.UI Testing site example bugs
  2. В даному випадку кнопка та компоненти підзаголовка не вирівняні між собою у інтерфейсі:

UI Testing site example bugs3. Застованні однакові дропдауни на одній сторінці, але  вони мають різний стиль:

UI Testing site example bugs4. Забагато, різних шрифтів в одному попапі. Також забагато застосовано жирного виділення.

UI Testing site example bugsЯкщо Вам сподобалась викладка матеріалу, та жага до знань у Вас не вщухає, приходьте вивчати тестування, до моєї онлайн школи Galaxy QA Academy. Там я намагаюся дати весь стек знань, що потрібен для роботи junior QA, в яскравому форматі коміксів Зоряних Воєн. Інша фішка — це практичні завдання. Кожна тема має власне завдання, яке перевіримо власноруч, та виставимо оцінки за виконані роботи.

Related posts

Leave a Comment

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.