Початківці інколи недооцінюють важливість кросбраузерного тестування, і це помилково. До цієї задачі варто підходити не менш серйозно і якісно, ніж до функціонального тестування.
Розібратися в нюансах кросбраузерного тестування допоможе Тетяна Шанайда, Manual QA в ІТ-команді NIX.
Навіщо потрібне кросбраузерне тестування
Користувачі взаємодіють із сайтами з комп’ютерів, смартфонів, планшетів, ТВ, навіть холодильників. І на кожному пристрої є різні браузери. В результаті будь-яка комбінація браузера, девайса й ОС може не реагувати відповідно до очікувань юзера або вимог замовника.
Макет, доступність, якість і продуктивність можуть сильно відрізнятися в кожній ситуації. Більшість браузерів базуються на різних рушіях (layout engine), тому ці програми по-різному відтворюють CSS, HTML та JavaScript. І проблема може виникати не лише в різних браузерах, а й в одному, але для різних пристроїв. Це пов’язано з інтеграцією з ОС того чи іншого рушія.
Як відповідь на все це багато років тому з’явилось кросбраузерне тестування. Його мета – переконатися, що сайт чи вебзастосунок коректно працюють і відображаються на різних браузерах та пристроях із різними ОС. Кросбраузерне тестування можна проводити як окремий вид тестування, так і комбінуючи з іншими видами тестування.
Щодо проблем через відсутність кросбраузерності, то це може бути як відображення тексту не тим шрифтом, яким було задумано в одному із браузерів, не відцентрованість зображення відносно інших елементів на сторінці, так і більш негативні сценарії.
Припустимо, карусель товарів не відображається на вебсайті, тому що при розробці використали певну властивість, що не підтримується цим браузером або його версією. В цьому випадку маємо баг у застосунку, який впливає на зручність і можливість ним користуватися.
Інколи проблеми кросбраузерності можуть призводити до зниження продуктивності вебзастосунку. Наприклад, браузер не може відтворити потрібний сценарій JS чи HTML5 і повністю зависає.
Тестувальник не може закривати очі навіть на некритичні помилки. Будь-який дефект відображення сайту погіршуватиме користувацький досвід і, як наслідок, це може призвести до відтоку відвідувачів. Саме тому важливо проводити кросбраузерне тестування.
Що необхідно для старту кросбраузерного тестування
Вам треба серйозно підготуватися до перевірки коректності роботи сайту чи застосунку в різних браузерах. Для цього слід визначитися із трьома головними питаннями.
1. У яких браузерах тестувати
На сьогодні існують десятки браузерів і сотні їхніх версій: мобільні та десктопні, для Windows, MacOS чи Linux, для Android або iOS. Зрозуміло, що всі їх охопити немає потреби. Тому варто вибрати найбільш важливі для замовника. Для цього орієнтуйтесь на...
- Статистику популярності браузерів. Знайти її можна на різних ресурсах, але найбільш авторитетним є Statcounter. Він показує поширеність браузерів у різних регіонах світу. І там дійсно є відмінності. Наприклад, в Азії браузер Samsung Internet популярніший за Firefox, який частіше використовують у країнах ЄС.
- Вебаналітику. Якщо це наявний сайт із певною аудиторією, можна звернутися до його власної статистики щодо відвідувачів. Її можна знайти, наприклад, у звітах Google Analytics чи аналогічного сервісу. Звісно, аналітика має бути заздалегідь підключена та налаштована, щоб збирати необхідну вам інформацію.
- Індивідуальні особливості проєкту. Інколи замовники вказують цільові для їхнього сайту браузери. Також вибір може бути викликаний нюансами аудиторії. Наприклад, на сайті з продажу аксесуарів для iPhone відсоток користувачів мобільного Safari напевно буде вищий, аніж в середньому по тому ж регіону.
Крім основних варіантів, також необхідно пригадати й менш очевидні:
- Браузери на нетипових пристроях. Люди можуть переглядати сайти на різних ОС Smart TV чи Android TV, ігрових консолях на кшталт Sony PlayStation чи Nintendo Wii та навіть деяких смартгодинниках. Тож якщо ваш проєкт передбачає використання вебзастосунку на подібних пристроях хоча б мінімальною аудиторією, ці варіанти теж слід окремо перевірити.
- Попередні версії браузерів. Зазвичай тестування проводять на найбільш актуальних версіях браузерів. Однак варто виходити за межі. Наприклад, коли з’являється новий реліз браузера, не всі користувачі відразу оновлюються. Деякі юзери через технічні обмеження їхніх девайсів взагалі роками користуються застарілими браузерами. Тож варто перевіряти сайт і на більш ранніх збірках.
- Бета-версії для розробників. Вони є у кожного браузера, мають власні назви (наприклад, Chrome Canary чи Safari Technology Preview) і демонструють можливості, які згодом можуть з’явитися в загальних версіях. Завдяки цьому ви, так би мовити, зазирнете в майбутнє і спрогнозуєте, чи не виникне проблем із сайтом після оновлення браузера.
Загалом експерти радять закладати у план тестування мінімум 4-5 браузерів. Це мають бути 3-4 основних, популярних, і 1-2 рідкісних, старих чи специфічних (про всяк випадок). Але за наявності бюджету ці показники можна збільшити.
2. На чому тестувати
Комусь відповідь на це запитання може здатися очевидною, але насправді все не так просто. Існує одразу кілька варіантів, на чому перевіряють кросбраузерність:
- Реальні пристрої. Ідеальний сценарій, коли є кілька комп’ютерів, смартфонів і планшетів на різних ОС із повним набором браузерів. Це максимально надійні й наочні умови для тестів. Але мати всі комбінації неможливо, і навіть популярні варіації зустрічаються рідко. Адже це потребує відповідного бюджету у проєкті.
- Емулятори. Так називають десктопний софт, розширення для браузерів та онлайн-сервіси, які імітують поведінку різних браузерів. Вони можуть бути платними та безоплатними, мати різний набір доступних браузерів та перевірок. Емулятори оптимальні з огляду функціонала, ціни й простоти використання.
- Віртуальні машини. За допомогою спеціального ПЗ на одному комп’ютері встановлюється кілька окремих ОС зі своїм набором браузерів. Це надає трохи більше можливостей, ніж емулятори. Але віртуальні машини потребують ресурсів і знань та мають певні обмеження в тестах мобільних браузерів.
- Ферми девайсів. Це цілком реальні пристрої, до яких у вас віддалений доступ. Таке хмарне рішення є платним, проте воно надає більше можливостей, ніж емулятори, і не вимагає складного сетапу віртуальних машин. Просто заходите на сайт, обираєте ОС та браузер і запускаєте тестування. Прикладами таких ферм є LambdaTest і BrowserStack.
Також можна поєднувати кілька способів. Наприклад, критичні фічі тестувати в найбільш важливих для проєкту браузерах на кількох реальних девайсах. А все інше перевіряти за допомогою емуляторів або віртуальних машин. Це дасть змогу скоротити витрати на QA і пришвидшити вашу роботу.
3. Як тестувати
Фінальний крок підготовки до тестів – обрати підхід до цієї роботи. Варіантів є два:
- Мануальне тестування. Тестувальники послідовно перевіряють комбінації браузерів, операційних систем та девайсів, використовуючи техніки тест дизайну (наприклад, парне тестування). Тобто на власні очі оцінюють роботу застосунку за зазначеними користувацькими флоу. Це дозволяє реально побачити можливі дефекти, з якими стикаються юзери. Також мануальний підхід допомагає при перевірці нестандартних, унікальних флоу. З іншого ж боку, таке тестування може тривати довго і нести ризик помилок із категорії людського фактора.
- Автоматизоване тестування. Для перевірок використовуються спеціальні інструменти. Вони можуть бути готовими або створеними самим QA-інженером. Вибір перших великий: від простих тулзів, які роблять лише скриншоти сторінок, до фреймворків типу Selenium, які здатні опрацювати майже будь-які перевірки. Це пришвидшує тестування і позбавляє помилок людини. Але автоматизовані тести працюють за визначеними сценаріями, що не завжди добре. А ще для написання тестів і використання платних тулзів потрібен додатковий бюджет.
З огляду на переваги та недоліки різних шляхів тестування кросбраузерності на проєктах використовують той чи інший підхід. Для простих, повторюваних задач і юзер-сторі QA-фахівці запускають автотести. Більш нетипові таски поза межами визначених шаблонів, де треба імітувати дії реальних юзерів, проходять вже вручну.
Як проводиться кросбраузерне тестування
План і вибір конкретних перевірок залежать від особливостей проєкту, цілей тестування та бюджету. Наприклад, якщо ви перевіряєте новий сайт – це одна ситуація. А якщо лише окрему нову фічу, то це вимагає дещо іншого підходу. Але загалом тести завжди слід проводити за двома напрямами:
- Візуальне тестування. QA-спеціаліст має переконатися у відповідності вмісту та дизайну сторінок тому, що очікується. Тобто слід перевірити саме вигляд сторінки сайту: від відображення шрифтів і зображень до CSS-анімації й того, як виводяться елементи інтерфейсу типу кнопок меню (чи в потрібному вони місці, чи з правильним дизайном тощо). Все має бути саме таким, як на макеті. Сучасні стандарти HTML-верстки передбачають адаптивність сайтів під екран пристрою. Тому все має відображатися коректно на будь-якому за розміром та роздільною здатністю дисплеї. Але в деяких випадках може бути ще й мобільна версія сайту, тож її також необхідно оцінити візуально.
- Функціональне тестування. Цей пакет перевірок має показати: в будь-якому браузері сайт та його окремі елементи працюють саме так, як задумано. Таку задачу слід сприймати комплексно. По-перше, QA-фахівець має перевірити кожну кнопку та функцію в десктопному та сенсорному форматах управління. По-друге, слід переконатися, що не порушені інтеграції зі сторонніми сервісами. По-третє, інженер має звернути увагу на доступність сайту на кшталт альтернативного тексту для зображень чи субтитрів на відео. Адже без цього користуватися сайтом для деяких користувачів буде в принципі неможливо або як мінімум – дуже незручно.
Обидві категорії перевірок можна виконувати й мануально, і автоматично. Але все ж зазвичай для візуального тестування потрібно залучати саме людину. Навіть якщо програма для автоматизованого тестування зробить скриншоти по всім сторінкам сайту в різних браузерах і знайде відмінності, остаточне рішення, чи все виглядає коректно, має ухвалювати все ж реальний інженер. А ось функціональне тестування найчастіше довіряють спеціальним тулзам. Вони йдуть за прописаними користувацькими флоу та за будь-яких збоїв у функціонуванні сайту видають повідомлення про помилку. Це доволі рутинна робота, де цілком припустимо зменшити залучення QA-спеціаліста.
Можна дуже багато описувати, на що треба звернути увагу при кросбраузерному тестуванні. Перелік перевірок у деяких проєктах включає сотні позицій! Тому в межах оглядової статті для прикладу варто згадати лише кілька основних моментів:
- Проблеми скриптів. Передусім це стосується елементів на JavaScript. Це різні види анімації, відтворення дизайнерських ефектів, робота динамічних елементів інтерфейсу тощо. При збоях вони можуть порушувати дизайн сторінки та навіть викликати зависання. На деяких сайтах для схожих задач замість JS можуть використовувати технології HTML5 та CSS3. Ці рішення надійні та швидкі, але не всі браузери повною мірою підтримують їх. Тож це також слід перевірити.
- Коректність роботи інтерфейсу. Активних елементів меню може бути дуже багато. В ідеалі треба протестувати роботу всіх. Але особливу увагу варто приділити основним для юзер-флоу кнопкам, завантаженню зображень, аудіо та відео (особливо за наявності lazy loading), валідації даних у формах (логін, оформлення покупки, реєстрація, підписка тощо) та надсиланню цих форм. А ще варто перевірити роботу всіх попапів та банерів.
- Управління сайтом. Це дуже важливе питання, якому інколи не приділяють достатньої уваги. І дарма! В деяких випадках навіть скролинг може працювати некоректно чи неповноцінно (наприклад, є прокрутка по колесу мишки, але не за стрілочками на клавіатурі). Також варто перевірити способи вводу та виділення тексту, переміщення по сайту тощо. Окремо варто опрацювати управління на пристроях із сенсорним екраном, де можуть виникати певні труднощі та баги.
- Інтеграція зі сторонніми ресурсами. В різних браузерах по-різному працюють не тільки повноцінні сайти, але й окремі сервіси, які можна вбудовувати в ці сайти. Це можуть бути, наприклад, чати для спілкування користувачів зі службою підтримки, капчі для ідентифікації людей, інтерактивні мапи, платіжні сервіси, вбудовані клієнти YouTube тощо. Тож QA-спеціаліст має переконатися, що все це і виглядає адекватно, і працює нормально на будь-якій платформі.
Що ще важливо – не бійтеся спілкуватися з розробниками, які створили той чи інший елемент. Вони докладно пояснять особливості використаних технологій. Буває, що проблеми є не стільки багом, скільки специфічною поведінкою фічі. Спільно з розробниками можна оцінити критичність знайденої помилки. А іноді збій зовсім некритичний: лише в маловідомому браузері й за умов, які складно відтворити в житті.
Отже, ми розібралися, чому кросбраузерне тестування – це важливий етап в розробці вебзастосуків. Таким чином ви перевіряєте сумісність програми з різними браузерами та платформами. А разом із тим – можете підвищити якість продукту, забезпечуючи користувачам сталий інтерфейс та функціонал незалежно від обраного програмного забезпечення. Тож вкладаючи ресурси у кросбраузерне тестування, ви підтримуєте формування оптимального користувацького досвіду.
Підписуйтеся на ProIT у Telegram, щоб не пропустити жодної публікації!
