Основи web проектування (О.Герасимчук)

Тестування веб-сайту

Теоретичні відомості

Основні методи і цілі тестування веб-сайту

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

Етапи тестування веб-проектів:

• Тестування функціональності;
• Перевірка usability сайту (зручність користування);
• Тест продуктивності;
• Перевірка на безпеку;
• Тестінг інтерфейсу, UI Testing.

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

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

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

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

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

На об'ємних сайтах з десятками тисяч рядків вихідного коду HTML вичленувати проблемне місце досить складно, тому потрібно мати інструмент, який дозволяє показати код HTML і CSS вибраного фрагмента і провести над ним експерименти.

Більшість існуючих в Інтернеті сторінок, на жаль, не є валідними. Багато розробників вважають, що абсолютно суворе дотримання стандартів HTML - зовсім не обов'язкова умова того, щоб сайт вийшов якісним і ефективним.

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

1. Перевірка документів валідатором дозволяє уникнути дрібних прикрих помилок - неправильно вкладених тегів, пропущених дужок і лапок тощо.
2. Сучасні браузери підтримують стандарти W3C значно краще, ніж їх попередні версії. Ця тенденція зберігається, тому відповідність DTD набуває все більшої важливості для правильного відображення сторінок в браузерах.
3. Оскільки валідний код відповідає певним формальним правилам, його легше інтерпретувати й обробляти. Він швидше аналізується і відображається в браузері, з ним легше працювати пошуковикам і системам індексації.
4. Валідність коду гарантує сумісність сторінок не лише з існуючими, але і з майбутніми версіями браузерів. Тому, не доведеться переписувати ваші сторінки після виходу нової версії Internet Explorer або Opera.

Валідатор Консорціуму W3C

Валідатор Консорціуму W3C - кращий з існуючих. З його допомогою можна перевірити любий документ, що розташований в Інтернеті або на локальному комп'ютері.

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

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

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

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

• 

  Про Консорціум W3C

 
• 

  Онлайн валідатор від WebAim

 
• 

  Валідатор кода

 
• 

  Валідатор CSS

Інструменти розробника в браузері

• 

  Інструменти розробника Firefox

 
• 

  Консоль Chrome DevTools

 
• 

  Інструменти розробника Dev.Opera

 
• 

  Засоби розробника ІЕ

 
• 

  Microsoft Edge F12 Dev Tools

 
• 

  Інструменти розробника Firefox

 
• 

  Debugger.html

Перевірка сайту на безпеку

http://www.coolwebmasters.com/security/2833-8-useful-and-free-web-application-security-testing-tools.html

• 
 
• 

Observatory by Mozilla

Для покращення захисту сайтів та користувачів, Mozilla створила онлайновий сервіс Observatory by Mozilla, який сканує налаштування безпеки сайту і вказує на потенційно слабкі місця. Вихідний код інструменту відкритий. API та інструменти командного рядка доступні для всіх бажаючих розробників.

Observatory by Mozilla сканує широкий діапазон механізмів мережної безпеки і використовує стобалльную систему оцінювання.Результати тесту Observatory представляються у зрозумілому вигляді і доповнюються порадами щодо вдосконалення безпеки та посилання на корисні ресурси.

Перевірка сайту на кросбраузерність

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

На сьогоднішній день більше 95% користувачів користується браузерами Opera, Mozilla Firefox, Google Chrome і Internet Explorer. Не можна з впевненістю сказати, що кожна програма відтворює HTML код або компілює CSS по-своєму, бо вони мають дотримуються певних правил. Але іноді, розробник щось упускає і браузер не відображає властивості елементів або, ж відображає їх некоректно.

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

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

• 
 
• 

Порядок роботи

1. Встановити браузери Opera, Mozilla Firefox, Google Chrome і Internet Explorer. Ознайомитися з засобами відлагодження в різних браузерах (зазвичай, вони зашиті на F12).
2. Ознайомитися з засобами відлагодження в різних браузерах.
3. Додати до браузера Mozilla Firefox плагін Firebug. Дослідити його роботу на прикладі власного сайту. Розглянути код чужої сторінки, витягнути цікаві стилі чи HTML фрагменти, застосувати у власній розробці.
4. Протестувати тестові сторінки у валідаторі, виправити виявлені помилки.
5. Перевірити сторінки на кросбраузерність, зробити скріншоти сторінок в обраних браузерах. У разі виявлення недоречностей - виправити.

Адаптивність Вашого сайту

Адаптивний веб-дизайн  (англ. Responsive web design) - дизайн веб-сторінок, що забезпечує відмінне сприйняття на різних пристроях (комп'ютери, ноутбуки, смартфони, планшети) підключених до інтернету. Це спосіб зробити сайт зручним для сприйняття навіть на невеликому екрані телефону (без необхідності маcштабувати сторінку).

Сервіси, які допоможуть побачити, як виглядає Ваш сайт на HTC, LG, BlackBerry і Samsung :

• • • Screenfly - www.quirktools.com

Швидкість сприйняття

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

Сервіси, які допоможуть перевірити швидкість завантаження Вашого сайту:

• • pr-cy.ru - www.pr-cy.ru  -  Щоб полегшити й максимально прискорити перевірку, у оптимізатора є можливість одночасно перевірити швидкість завантаження відразу декількох сайтів. В результаті перевірки кожен сайт буде виділений кольором відповідно до швидкості завантаження.

  • 5secondtest - www.fivesecondtest.com

Швидкість

Будь-яка дрібниця, навіть повільне завантаження сторінки, може змусити потенційного клієнта піти з сайту.  Дослідження , проведене в 2010 році, показало, що більше 30% користувачів залишають сторінку, якщо вона завантажується довше секунди. 37% з них більше ніколи не повертаються на цей сайт, а 27% йдуть на сайт конкурента.

PageSpeed ​​Insights  дозволяє не просто побачити час завантаження сторінки і порівняти її з оптимальним, але і дізнатися, в чому причина цієї помилки. Сервіс дає докладні рекомендації щодо оптимізації елементів сторінки. 

Тестування швидкості на сервісі Pingdom Website Speed Test - https://tools.pingdom.com/

Биті посилання

Гіперпосилання, які ведуть на неіснуючі сторінки і видають помилку 404, всіх дратують. Биті посилання з'являються з різних причин: минає термін зберігання або видаляються файли, вказуються неправильні URL, змінюються адреси сторінок. Найгірша риса битих посилань - непомітність: можна довго заходити на власний сайт, не звертаючи на них уваги. Тому варто час від часу перевіряти сайт на їх наявність.

Сервіс для перевірки битих посилань на Вашому сайті -  anybrowser.com

Орфографія 

Якщо власники сайту не можуть собі дозволити найняти коректора, ймовірність виникнення орфографічних помилок на ньому досить велика. Варто перевіряти сайт на орфографію. Для цього можна використовувати спеціальний сервіс на webmaster.yandex.ru. Досить ввести URL сайту, і він виділить слова, відсутні в словнику, жовтим кольором. Перевірка не буде працювати для сторінок, що вимагають авторизації. Можна також скористатися більш докладним і уважним до дрібниць сервісом перевірки   Quittance.ru. На всякий випадок можна також перевірити текст на читабельність на сайті  Juicy Studio.

Пошукова оптимізація

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