У деяких тестах у вас буде можливість повідомляти про візуальні баги. Візуальні баги стосуються графічного інтерфейсу користувача на вебсайтах або в застосунках, наприклад:
Проблеми з макетом, наприклад, неправильне вирівнювання тексту або елементів
Проблеми адаптивного дизайну, наприклад, елемент відображається на одному мобільному пристрої, але не відображається на іншому
Текст або елементи випадково накладаються один на одного
Текст або елементи обрізані
Будь-які помилки, які можна виправити у файлах HTML або CSS
Проблеми, що повторюються
Коли візуальна проблема виникає повторно, її слід подавати лише один раз, навіть якщо кожен випадок має інший URL, посилання, зображення тощо. Це стосується як випадків на одній сторінці, так і на різних сторінках. У звіті про помилку слід зазначити, що проблема також стосується інших URL, посилань, зображень тощо.
Індивідуальні звіти про помилки для кожного окремого випадку проблеми не повинні подаватися — вони будуть відхилені. Замовнику достатньо одного звернення, щоб бути проінформованим про візуальну проблему. Він дослідить питання та усуне проблему для всіх випадків.
Приклади:
Деякі елементи показують ту саму графічну проблему, наприклад текст або зображення більші за рамки.
Поля введення замалі, щоб вмістити текст за замовчуванням, який через це відображається не повністю.
Тизери ненавмисно перекривають інші елементи.
Оновлення до функціональної помилки
Як тільки візуальна помилка перешкоджає функціональності, її слід повідомити як функціональну помилку, навіть якщо це не сама функція, яка є дефектною.
Якщо до функціоналу можна інтуїтивно та легко отримати доступ іншим шляхом або через інший варіант, це означає, що користувач фактично не позбавлений можливості скористатися функціоналом. У такому разі проблему не слід подавати як функціональну помилку — вона залишається візуальною проблемою.
Документування візуальних проблем
Звіти про візуальні проблеми обов’язково повинні містити скріншоти. Якщо візуальна проблема виникає внаслідок певної дії, може знадобитися додатковий відеозапис (screencast). Щоб дізнатися більше про вимоги до документування звітів про помилки, перегляньте нашу статтю Вимоги до звітів про помилки.
Адаптивний vs. Неадаптивний вміст сайту: Приховані візуальні баги
Адаптивні помилки можуть викликати сумніви щодо їх класифікації — контентні це чи візуальні помилки: йдеться про проблеми, спричинені адаптивним дизайном сайту.
Ці проблеми менш помітні під час швидкої навігації сайтом, аж раптом ми натрапляємо на сторінку з усією необхідною інформацією, але відображеною некоректно. У такому випадку ми можемо не надати цьому значення — і не подати помилку!
Приклад ситуації:
Під час тестування адаптивного дизайну ви можете зіткнутися з ситуацією, коли одна сторінка відображається ідеально на смартфоні (наприклад, сторінка «Popular TV Show and Movie Genres»), але при переході на сторінку категорії (наприклад, «COMEDY») вміст стає майже невидимим, оскільки елементи надто малі.
Як виявити
Зверніть увагу на неконсистентне масштабування між сторінками
Перевірте, чи текст залишається читабельним на вашому розмірі екрана
Слідкуйте, чи навігаційні елементи не стали надто дрібними для натискання
Перевірте, чи з’являється горизонтальна прокрутка на одних сторінках, але відсутня на інших
Безкоштовне онлайн-тестування адаптивності
Google Chrome Lighthouse (раніше відомий як Google Mobile Friendly Test) — корисний інструмент для перевірки оптимізації веб-сторінок під мобільні пристрої. Цей інструмент допомагає тестувальникам виявляти візуальні проблеми на сторінках, оцінюючи такі фактори мобільної зручності, як розмір шрифту, розмір натискних елементів і налаштування viewport (розділ SEO). Якщо ви натрапили на візуальну помилку, цей інструмент може допомогти визначити, чи пов’язана вона з адаптивністю сторінки. На відміну від попереднього Google Mobile-Friendly Test, який запускався на окремому сайті, Google Chrome Lighthouse потрібно встановити в браузер Google Chrome і запускати безпосередньо на тестованому сайті. Процес встановлення та детальний посібник доступні тут.