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

Як відомо, над дизайном сайту завжди працюють веб-дизайнери та верстальники, які шукають шляхи створення оригінального продукту з інтуїтивно зрозумілою структурою. Дизайнери розробляють дизайн, а шаблонізатор втілює ідеї та концепції в життя.

Ви можете подумати: що тут складного: одна людина малює, а друга пише код. І в чому сенс цього тестування?

Логіка тестування макетів

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

І тут з’являється процес тестування макета, який можна розділити на кілька частин:

• Тестування візуальної частини;
• Кросбраузерне та кросплатформенне тестування сайту.

Тож виникає питання: чи важливо тестувати візуальну частину сайту? Адже це не програмне забезпечення і навіть не блок безпеки.

Чому верстальник не може самостійно порівняти дизайн зі зробленим макетом? Звісно, може!

Але в цьому і полягає сенс тестування - шукати деталі. Також не забувайте про людський фактор: будь-якому, навіть найдосвідченішому, верстальнику може бракувати об’єктивності під час роботи.

Як правильно тестувати відображення веб-сторінок?

Кожен співробітник QA-відділу повинен мати величезний набір додаткових інструментів, критеріїв і гайдів по стилю (спеціальні інструкції для поширених кнопок і підписів на сайтах). Вони допоможуть вам повністю і максимально швидко протестувати продукт.

Отже, перш за все, перевірте візуальний інтерфейс сторінки. Передусім порівняйте його з макетом.

Всі блоки на сайті повинні накладатися на дизайн, а текстові поля повинні мати проміжок не більше 5 пікселів. Для таких речей є спеціальне розширення PerfectPixel: вам просто потрібно накласти напівпрозорий макет сайту на фінальний макет - і ви побачите, чи є якісь відмінності.

PerfectPixel

Якщо, окрім макета, у вас є ще й сітка сторінки, ви можете скористатися простим, але досить ефективним розширенням для браузерів - Page Ruler: графічна лінійка допоможе вам виміряти всю сторінку, а також окремий елемент або групу елементів.

Лінійка сторінки

Після тестування загального відображення зображення можна переходити до деталей.

Програма WhatFont допоможе перевірити правильність шрифту, а Color Zilla - різноманітність кольорів на сайті. Spell Checker або Орфограф Артемія Лебедєва допоможуть перевірити, чи немає в текстових блоках орфографічних помилок.

Тестування адаптивності сторінки

Просте вікно браузера - найкращий інструмент для такого тестування. Ви можете просто зменшити ширину або висоту вікна і подивитися, як зміниться розташування блоків.

Якщо ви помітили горизонтальну прокрутку або група елементів не поміщається у видимій частині сторінки, це означає, що є проблеми з макетом, які потрібно виправити.

Якщо ви хочете виконати це тестування за допомогою програми, то зверніть увагу на розширення Windows Resizer. Це розширення пропонує безліч розмірів вікон для настільних комп’ютерів, ноутбуків і смартфонів.

Ви також можете самостійно додати необхідні пропорції або видалити непотрібні конфігурації в меню налаштувань.

Зміна розміру Windows

Також слід зазначити, що будь-який текст на сторінці може виглядати дуже маленьким або дуже великим, а користувач може мати проблеми із зором. Для вирішення таких проблем у більшості сучасних браузерів є функція масштабування екрану.

Звичайно, десктопний масштаб змінюється не так часто, але мобільні пристрої дозволяють клієнтам безперервно збільшувати/зменшувати діалогове вікно, тому не забудьте протестувати мобільний зуммінг.

Візуально перевірте правильність відображення всіх доступних елементів навігації:

• Чи на всіх клікабельних елементах є курсор?
• Відсутність на неклікабельних елементах;
• Поява курсору і можливість вводити символи для введення тексту;
• Відображення іконки.

Кросбраузерне тестування

Одна й та сама сторінка може виглядати абсолютно по-різному в різних браузерах. Перш за все, це пов’язано зі спеціальними механізмами, запрограмованими в браузері. Тестуючи макет, потрібно обов’язково перевірити відображення сторінок хоча б у найпопулярніших браузерах. Зазвичай, відображення зображення не сильно відрізняється в популярних браузерах, окрім всім відомого IE.

На скріншоті показано різницю між однаковою формою входу в Facebook у версіях від 8 та 11 IE.

Форма входу на Facebook у версії від 8 до 11 IE

А зараз ми розповімо про три найбільш використовувані та популярні сервіси, які допоможуть вам протестувати візуальний дизайн сайту.

Кросбраузерне тестування

Знімки з браузера

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

Система Browsershots має багато вбудованих сучасних браузерів різних версій, де ви можете вручну вибрати розмір екрану, глибину кольору, ввімкнути або вимкнути Javascript, Java і навіть Flash.

На жаль, у безкоштовній версії немає можливості автоматизувати процес тестування, тому вам доведеться вручну обирати всі необхідні тести. Але, незважаючи на це, Browsershots користується великою популярністю, і ви можете використовувати його для ретельної перевірки проекту перед тим, як передати його клієнту.

Browsera

Це багатофункціональна (платна) платформа, яка повністю виправдовує витрачені на неї кошти. Browsera допоможе вам перевірити не тільки кросплатформеність макета, але й роботу підключених скриптів у різних ситуаціях, динамічне відображення веб-сторінок, рівень безпеки сайту.

Ви можете обрати 30-денну безкоштовну версію та платний функціонал з величезним набором параметрів та опцій.

BrowserStack

BrowserStack можна вважати провідним інструментом для ефективного кросбраузерного тестування. У його функціоналі є всі доступні реальні пристрої + можливість тестування макетів у більш ніж 700 браузерах.

Він має функції тестування безпосередньо з локального комп’ютера або створення набору скріншотів сторінки, що тестується (до 25 скріншотів). Безкоштовний тарифний план має обмежений час для тестування, а платні тарифні плани пропонують рівні функціональної доступності в залежності від вартості проекту.

Рухаємося далі

Чи можна сказати, що ми завершили тестування? Ні!

Тепер наше завдання - перевірити всі посилання, які відображають логіку сайту або можуть вести на відому сторінку 404.

Просте гіперпосилання на вміст веб-сайту може застаріти або змінитися, але ми неодмінно повинні знати, що воно працює на момент релізу. Для цього ми використовуємо додаток Black Widow.

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

Крім того, ми також повинні пам’ятати, що будь-яка веб-сторінка повинна відповідати наступним стандартам:

• Обов’язкове кодування у форматі UTF-8;
• Стандарт HTML;
• Стандарт CSS.

Перший пункт легко перевірити за допомогою кнопки [highlight dark=”no”]F 12[/highlight] (Elements - для браузерів Chrome).
та сервіс https://www.w3.org можна використовувати для перевірки правильності HTML та CSS коду. Достатньо лише написати назву сайту або певної країни і запустити перевірку.

Все, що потрібно виправити, буде виділено словом ERROR.

Додатковий набір для тестування

Якщо часовий ліміт проекту дозволяє протестувати його більш ретельно, то, аналізуючи програмний код, можна перевірити роботу ще деяких параметрів (у разі, якщо вони дійсно потрібні для створення такого сайту):

• Веб-аналітика (Яндекс метрика, Google аналітика). Ви можете перевірити наявність самого лічильника та функціонування лічильника ID.
• SEO. Нас цікавить таке поняття, як теги. Кожна сторінка сайту, яка індексується пошуковим ботом, повинна мати теги “keywords” та “description”. А закрита для індексації сторінка повинна мати тег “noindex”;

• Сумісність із соціальними мережами. Для перевірки роботи репостів, лайків та накрутки відповідей розробники пишуть спеціальний метод у програмному коді. Завдання співробітника QA-відділу - знайти цей метод і перевірити його працездатність. Наприклад, візуальний дизайн кнопок поширення повинен легко розпізнаватися і візуально відрізнятися від інших елементів соціальних мереж. Інше завдання - перевірити коректність інформації групи або користувача, коли ми завантажуємо її в обрану соціальну мережу (пост повинен виглядати як пост, а зображення - як зображення).

Ми коротко розглянули всю важливість тестування верстки, а також деякі методи такого тестування (логіки дій). Всі вони - прості і трохи складні - будуть дуже корисними для сервісів тестування веб-додатків і дозволять створити корисний продукт.