Статьи

тестування верстки

  1. Навіщо тестувати верстку?
  2. Як тестувати зовнішній вигляд сторінок?
  3. Як перевірити адаптованість сторінки?
  4. Копаємо вглиб сторінки!
  5. Додаткові можливості тестування верстки
  6. висновки

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

Навіщо тестувати верстку?

«Якщо зірки запалюють - значить - це кому-небудь потрібно»? Якщо макет відмалювали до дрібниць - здавалося б, так і повинно вийти в результаті! Але є один нюанс: сторінка повинна не тільки відповідати макету, але і працювати.

Отже, можна розділити тестування верстки на дві важливі частини:

  • тестування зовнішнього вигляду;
  • тестування адаптованості сторінки.

Виникає питання: а чи так важливо тестування інтерфейсу Виникає питання: а чи так важливо тестування інтерфейсу? Адже це не функціонал і не безпека. Хіба не може верстальник порівняти задану картинку з тим, що вийшло в результаті? Може! Але помічати деталі - це все-таки доля тестування. Крім того, не варто забувати і про людський фактор: у верстальника часто просто «змальовується очей» в процесі роботи. Хочете перевірити свою уважність? Подивіться це невелике відео , І Ви здивуєтеся, скільки всього очевидного можна не помітити.

Як тестувати зовнішній вигляд сторінок?

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

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

На представленому офіційному сайті можна скачати розширення для робочого браузера.

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

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

Як перевірити адаптованість сторінки?

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

Для перевірки здатності сторінки до трансформування під різні екрани було створено розширення Window Resizer .

У розширенні присутні популярні розміри вікон комп'ютерів, ноутбуків і смартфонів. Внести наші специфічні вимоги, а також видалити непотрібні варіанти завжди можна через настройки.

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

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

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

Переходячи до наступного пункту тестування, ми згадуємо про такий підступний понятті, як кроссбраузерность . Одна і та ж сторінка в різних браузерах може виглядати по-різному. Це зумовлено відмінностями движків, на яких ці браузери працюють. Безсумнівно, при тестуванні верстки важливо перевірити відображення сторінок хоча б в найпопулярніших браузерах. Як правило, вид інтерфейсу в різних версіях одного браузера не сильно відрізняється, якщо тільки мова не йде про Internet Explorer. На зображенні нижче представлено відмінність однієї і тієї ж сторінки в версіях IE 8, 10 і 11. По кліку на картинку відкриється повна версія. Ще одна особливість тестування верстки - облік наявності всіляких розширень, які часом істотно впливають на зовнішній вигляд сторінки. Одне з найпопулярніших на даний момент - розширення для блокування реклами Adblock . І якщо наш сайт підтримує чужу рекламу, то ми просто зобов'язані перевірити його роботу із застосуванням такого розширення.

Копаємо вглиб сторінки!

Чи можемо ми після обліку всіх перерахованих раніше перевірок зупинитися і видихнути? Ні! Отже, курсор на клікабельних елементах з'являється. Тепер прийшов час перевіряти посилання, адже вони можуть відкрити як закладену в логіку програми інформацію, так і всім нам сумнозвісну сторінку 404. Посилання на наш чи чужий контент може застаріти, а відстежити такі моменти допоможе додаток Black Widow . Періодично запускаючи перевірку сайту з його допомогою, ми отримаємо можливість відстежити биті посилання раніше, ніж їх знайдуть користувачі.

Важливо пам'ятати, що сторінка повинна відповідати технічним стандартам:

  • кодування UTF-8 (або інша обумовлена ​​в ТЗ);
  • стандарт HTML ;
  • стандарт CSS (Варто зазначити, що в цій перевірці попередження допустимі, а помилки - немає).

Перший пункт можна легко перевірити в самому браузері за допомогою інструментів розробника на вкладці Elements.

У правильності дотримання стандарту написання коду ми можемо переконатися за допомогою сервісів від w3.org : Досить написати адресу сторінки в спеціально відведене поле і запустити перевірку. Все, що не підпадає під «стандарти», буде позначено словом ERROR.

Для прикладу візьмемо всім відому сторінку yandex.ru. Здавалося б, такий гігант повинен бути ідеальний як зовні, так і зсередини. перевіряємо:

Як ми можемо помітити по скриншотам перевірки, валідатор видає повідомлення про помилки, так як він спирається на найсвіжіші правила і стандарти. На жаль, це не завжди можна сказати про ПО: при появі змін код далеко не завжди переглядається і переписується (тим більше, якщо за фактом він залишається робочим). Крім того, нерідко при створенні програми застосовуються «авторські» рішення, абсолютно правильні з точки зору роботи сторінки, але невалидность для загальноприйнятих стандартів. Чи зможе сам тестувальник визначити, наскільки критичні знайдені помилки? Швидше за все, буде потрібно консультація фахівця, який вміє писати код. Деякі помилки спричинять за собою серйозні виправлення, в інших же випадках цілком достатнім буде «причесати» елементи коду або теги до їх оновленої версії. Після коригування код стане ідеальним, стандартизованим і не викликає жодного підозри ... До наступного оновлення стандартів.

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

  • при відключених картинках;
  • при вимкненому Flash;
  • при вимкненому JavaScript.

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

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

Погодьтеся, спочатку все виглядало простіше, ніж виявилося насправді. Але і це ще не все! Маючи деякі резерви бюджету і часу, ми можемо, заглибившись в код, протестувати ще кілька параметрів (за умови, що вони дійсно потрібні для конкретного проекту):

  • Веб-аналітика (Гугл-аналітика, Яндекс-метрика і ін.). Потрібно переконатися в наявності самого лічильника в нашому коді і перевірити коректність ID лічильника.
  • SEO. В цьому випадку ми звертаємо увагу на теги. На всіх сторінках, які індексуються, повинні бути прописані теги «keywords» і «description»; на які не піддаються індексації сторінках або конкретних елементах повинен бути тег «noindex».
  • Електронна комерція. Мета тестування - перевірити інформацію про завершені покупках. Наприклад, при перегляді раніше купленого товару повинна виводитися інформація про те, що даний продукт ми вже купували. Інша можливість - перегляд усієї попередньої історії замовлень: починаючи з інформації про номер і вартості замовлення і закінчуючи видом і кількістю товарів і адресою доставки (набір обов'язкових параметрів задає замовник на свій розсуд).
  • Інтеграція з соцмережами. Для відстеження відповідей, перепис і лайків розробник прописує в коді певний метод. Наша мета - знайти цей метод, щоб переглянути його на працездатність. Наприклад, зовнішній вигляд кнопок для шаринга або відображаються блоків для підписки повинен бути пізнаваний і візуально відрізняється від стилю інший соцмережі. Інший важливий момент: ми повинні переконатися, що при появі інформації про будь-якому співтоваристві або людині контент відобразиться коректно (пост буде виглядати постом, а картинка - картинкою).

висновки

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

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

Незабаром нова версія програми була підготовлена, рядок «адреса клієнта» збільшили до попереднього значення. Відділ тестування приготувався до своєї безпосередньої роботи, але керівництво вирішило відмовитися від перевірки, грунтуючись на думці працівників технічної підтримки, змучених постійними дзвінками: «Та там тільки адреса збільшили, подумаєш! Поки перевіримо - наші телефони вибухнуть. Запускайте оновлення! »

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

У цій статті ми коротко розглянули необхідність тестування верстки і деякі методи цього тестування. Всі вони - прості або більш складні - послужать на користь продукту. Вибір же оптимального набору методів в кожному конкретному випадку залишається за Вами!

Навіщо тестувати верстку?
Як тестувати зовнішній вигляд сторінок?
Як перевірити адаптованість сторінки?
При чому тут тестування?
Навіщо тестувати верстку?
«Якщо зірки запалюють - значить - це кому-небудь потрібно»?
Виникає питання: а чи так важливо тестування інтерфейсу?
Хіба не може верстальник порівняти задану картинку з тим, що вийшло в результаті?
Хочете перевірити свою уважність?
Як тестувати зовнішній вигляд сторінок?

Новости