6 видів тестування web-сайтів: особливості та з чого почати

Перед тим як випускати розроблений web-сайт у «вільне плавання» необхідно провести ряд заходів, спрямованих на пошук і виправлення помилок у веб-дизайні, верстці та покращення користувацького досвіду. Без всього цього не добитися хороших показників, а значить проекту складно буде потрапити в топ пошукової видачі.

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

Уявіть ситуацію: ви звернулися в професійне весільне агентство, щоб вони організували ваше весільне свято, обговорили з ним декоративне і музичне оформлення, програму. Обіцяна чарівна атмосфера повинна подарувати гостям і молодятам незабутні миті, але подія вийшла «незабутньою» в переносному плані цього слова. Вона не відповідала вашим очікуванням, і ви розчарувалися в ньому.

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

З чого почати тестування

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

Основні види або роботи при тестуванні:

• Співвідношення фактичного і дизайну затвердженому в ТЗ;
• Перевірка верстки на валідність;
• Функціональне тестування;
• Тестування навантаження;
• Тестування безпеки сайту;
• Тестування сумісності;

Співвідношення фактичного і дизайну затвердженому в ТЗ

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

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

• Шрифти.
• Колір. Перевірте на відповідність плану колірну гамму сайту - шрифтів, іконок, ліній, кнопок, фону різних блоків і навігаційних панелей.
• Заголовок (h1). Він повинен виділятися від тексту, щонайменше, збільшеним розміром і бути унікальним і єдиним для кожної сторінки. Заголовок h1 служить темою сторінки, припустимо, для блогу таким заголовком буде назва статті.
• Підзаголовки (h2-h3). Вони також зазвичай відрізняються від абзаців, але можуть повторюватися і бути на сторінці в будь-якій необхідній кількості. Приклад - підтема статті блогу.
• Посилання. Перевірте, щоб гіперпосилання на сайті відрізнялися оформленням від основного тексту. Найпопулярніший варіант - суцільне або пунктирне підкреслення і контрастний колір шрифту. При наведенні мишкою також має відбуватися зміна кольору (зазвичай в меню) або тільки декорування тексту посилання. Це обов'язково для поліпшення поведінкових характеристик - при перегляді сторінки і побачивши посилання, відвідувач визначить можливість переходу по ній.
• Списки. Щоб пункти списку ефектно виглядали на сторінці, виділіть маркери кольором відмінним від текстового.
• Абзаци і відступи. Відстань між будь-якими елементами сильно впливає на враження, які отримає користувач при контакті з вашим контентом і сайтом в цілому. Приділіть цьому увагу. Перевірте відстань між абзацами, списком і абзацами, заголовком і абзацом, відступи блокових елементів і так далі.
• Таблиці. Якщо ви збираєтеся подавати інформацію на web-сайті у вигляді таблиць - стилізуйте її під загальний дизайн.
• Цитати. Для блогу актуальна наявність контрастного фону або зміна тільки розміру і кольору тексту цитат з вертикальною лінією з лівого боку. Не обов'язково виділяти цитату. Наприклад, на початку цієї статті ми акцентували увагу на важливій на нашу думку інформації.
• Розташування. Може бути так, що один з блоків на сайті не відцентрований або навпаки знаходиться посередині, а на макеті візуалізовано інше положення. Перевірте відстані, як по горизонталі, так і вертикалі.
• Наявність блоків. Перевірте присутність іконок соціальних мереж, кнопок для шарінгу, карти розташування, кнопки «наверх» після скролінгу та інших допоміжних елементів.

Перевірка верстки на валідність

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

Існує стандарт, який визначає норми і правила сайтобудування - Консорціум Всесвітньої павутини (W3C). На його основі розроблений сервіс W3C Markup Validation. Перевірте в ньому свій сайт. Якщо «вилізло» багато помилок, зверніться до веб-майстра для їх усунення. Частина з них може залишитися навіть після виправлень, але не бути критичними.

Функціональне тестування

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

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

• Тестування користувацьких форм (наприклад, залишити заявку, написати у формі зворотного зв'язку, залишити коментар або відгук);
• Перевірка працездатності пошуку та релевантності результатів видачі;
• Тестування навігації - переходи по посиланнях для виявлення неробочих;
• Перевірки підвантаження файлів на сервер;
• Випробування реєстраційної форми та авторизації.

Тестування навантаження

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

Тестування безпеки сайту

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

Щоб по-справжньому захистити ваш інтернет-ресурс, потрібно звертатися до програмістів для детального тестування.

Основні об'єкти перевірки на вразливість:

• Контроль доступу
• Діагностика аутентифікації
• Валідація вхідних значень
• Криптографія
• Механізми обробки помилок
• Інтеграція зі сторонніми сервісами
• Перевірка стійкості сайту до Dos/DDos атак
• Конфігурація сервера

Тестування сумісності

1366x768, 1920x1080, 1600x900 - напевно, ви знаєте, що означають всі ці комбінації цифр. Правильно, розширення моніторів або екранів, на які ми щодня дивимось. Так ось тут можна побачити «картинку», скільки відсотків користувачів мають пристрій з тією чи іншою кількістю пікселів. Подивіться як багато різних форматів. Як же веб-сайт виглядає на кожному з них? На це питання і про рівень кросбраузерності відповість тестування сумісності з наступними видами робіт:

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

Висновок

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

Щоб провести деякі види тестування потрібно мати компетентність в технічних питаннях та інтернет-маркетингу. Однак частину робіт ви можете зробити самі - досить витратити трохи часу на вивчення.