Особливості тестування верстки

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

• верстка може не відповідати макету;
• верстка може по-різному виглядати в різних браузерах та ОС;
• верстка може бути не валідною;

• верстка може не відповідати код-стайлу;
• верстка може некоректно працювати у найнесподіваніших місцях.

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

Тестування верстки сайту або мобільного додатка може виконуватись двома методами – вручну, або з використанням автоматичних тестів.

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

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

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

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

Тестування візуальної частини

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

• розбіжність макета та верстки в пікселях – за допомогою спеціального софту перевіряється розташування кожного елемента;
• коректність відображення верстки на різних дозволах екрану;
• сітка – вирівнювання полів та блоків по вертикалі та горизонталі;
• коректність відображення тексту;
• відповідність колірній гамі.

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

Робота у різних оточеннях

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

В рамках цього етапу тестується:

• Кросбраузерність – відображення продукту в популярних браузерах: Google Chrome, Mozilla Firefox, Safari, Internet Explorer, Opera.
• Коректність роботи на різних ОС – наприклад, у Windows, MacOS, Android, IOS.
• Коректність роботи верстки різних моделей пристроїв.
• Робота за умов поганого покриття.
• Область натискання кнопок – на тач-пристроях кнопки наживатимуться пальцями, тому інтерактивні елементи повинні мати оптимальний розмір.
• Коректність роботи за умови використання користувачем розширення AdBlock та його аналогів, оскільки можуть блокувати відображення частини контенту.

Перевірка функціональності

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

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

Перевірка надійності

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

• коректність роботи стилів;
• як поводяться блоки контенту при різній кількості вмісту;
• коректність мікророзмітки;
• місткість довгих назв;
• різна висота елементів у слайдерах та картках;
• орфографію в інтерфейсі.

Перевірка форм

Часто заповнення форми є цільовою дією клієнта на сайті, тому важливо переконатися, що вони коректно відображаються і працюють. На цьому етапі тестувальник перевіряє:

• правильність всіх заголовків у формах;
• стилі кнопок та полів введення;
• наявність атрибутів, що обмежують довжину введення кожного рядка;
• наявність та коректність роботи обов’язкових для заповнення полів;
• коректність атрибутів різних полів введення – мобільний телефон, email і т.д.
• коректність роботи великих форм мобільних браузерах.

У  AVADA MEDIA працює виділений QA-відділ, який займається тестуванням кожного продукту, що випускається, на різних етапах. Це дає можливість гарантувати коректність роботи своїх проєктів.

Якщо у вас залишилися питання щодо процесу тестування верстки — зв’яжіться з нами, заповнивши форму нижче.