Додатки та сайти в різних браузерах можуть поводити себе по-різному. Це пов'язано з тим, що будь-який з браузерів має власні надбудови, плагіни, а також відмінності в десктопній і мобільній версіях. Кросбраузерне тестування покликане зменшити ці відмінності, зробивши розробку більш-менш універсальною.
Чому виникають кросбраузерні помилки:
- Іноді самі браузери містять баги або по-різному впроваджують функції. Часто це відбувається через спроби дістати конкурентну перевагу.
- Деякі браузери можуть мати різні рівні підтримки технологічних функцій для інших браузерів. JavaScript фічі, швидше за все, не будуть працювати на застарілих браузерах.
- Деякі девайси можуть містити обмеження, які можуть змусити веб-сайт працювати повільніше або некоректно відображатися. Наприклад, якщо сайт був спроєктований під десктоп, то цілком ймовірно, що його контент буде складно читати на мобільному пристрої.
- Приступати до тестування сайту в популярних браузерах слід вже після того, як він перевірився на дефекти іншими видами тестування. Тільки в цьому випадку можна буде сказати, що виявлені некоректні сценарії мають відношення саме до особливостей браузера, а не були пропущені на інших стадіях. Зрозуміло, що при цьому помилка повинна виявлятися не в усіх браузерах. Увагу потрібно також приділити поєднанню операційної системи і браузера, вибравши найбільш поширені з них.
Кросбраузерне тестування починається з вибору браузерів. Як правило, замовник сам визначає, з якими саме веб-оглядачами буде працювати його ПЗ. Але завдання розробника і тестувальника – підказати клієнтові, який браузер буде головним; слід вивчити статистику відвідувань подібних додатків, визначити якими браузерами користується така аудиторія.
Втім, можна скористатися і загальносвітовою статистикою використання браузерів (http://gs.statcounter.com):
- Google Chrome (для тестування, як правило, береться остання версія), ним користуються 65,89% користувачів у світі;
- Safari, 16,65% користувачів (в США - 35,4%);
- Mozilla Firefox(останньої версії), 4,26% користувачів;
- Microsoft Edge, 16,74% користувачів;
- Opera 2,05% користувачів.
Колись популярна Opera скотилася до рейтингової оцінки «інші браузери» і, крім Східної Європи, використовується рідко. Найпопулярнішим ж за статистикою є Google Chrome, тому, як правило, він приймається за основний браузер для тестів.
Після того, як знайдені в процесі попереднього тестування баги були виправлені, тестувальникам слід розширити список тестованих браузерів, щоб охопити всю цільову аудиторію, і постаратися сконцентруватися на усуненні кросбраузерних проблем, наприклад:
- спробуйте протестувати останні зміни всіх сучасних десктопних браузерів (на Mac, Windows, і в ідеалі Linux);
- перевірте систему на найпоширеніших телефонних і планшетних браузерах (наприклад, iOS Safari на iPhone/iPad, Chrome і Firefox на iPhone/iPad/Android);
- також проведіть тести в будь-якому браузері, який не входить в список обов'язкових за проєктом.
Якщо немає можливості або коштів для того, щоб протестувати всі комбінації браузерів, ОС і девайсів на фізичному обладнанні, то завжди можна скористатися емуляторами (зімітувати девайс, використовуючи спеціальний інструмент/софт на вашому ПК) або ж віртуальними машинами (ПЗ, яке дозволяє імітувати безліч ОС/ПЗ комбінацій на десктопному комп'ютері).
Також дуже корисно перевірити систему на "до релізних" версіях браузерів (Firefox Developer Edition, Edge Insider Preview, Safari Technology Preview, Chrome Canary, Opera Developer). Це популярна процедура, якщо розробляється сайт із застосуванням новітніх технологій і потрібно перевірити його функціональність на відповідність з останніми нововведеннями.
В першу чергу при кросбраузерному аналізі ПЗ перевіряються характеристики верстки – шрифти, розташування окремих елементів, функціональність кнопок, тобто те, що помітно неозброєним поглядом. Потім кросбраузерне тестування задіє аналіз сценарію JavaScript, який також веде себе по-різному в різних браузерах.
У наш час в сучасних браузерах ми можемо створювати різні ефекти і речі, які раніше ніяк не можна було робити за допомогою HTML і CSS, та й взагалі складно було реалізувати. Останнім часом стало популярним використовувати нові можливості HTML і CSS для створення різних ефектів і елементів, які ми можемо побачити на сторінці. Великою перевагою використання HTML і CSS є практично миттєве відпрацювання і широкий спектр можливостей. Все добре і швидко працює. Навіть якщо у людини відключений JavaScript – це не є перешкодою для відображення цих самих ефектів і елементів. Але є і один великий недолік використання можливостей HTML5 та CSS3 – це кросбраузерність, так як HTML5 та CSS3 не є загальноприйнятими стандартами і не всі їхні можливості працюють без особливих браузерних ідентифікаторів або використання фільтрів. Суть цього недоліку можна зрозуміти, якщо працювати з іноземними замовниками, клієнти яких до цих пір використовують різні версії Internet Explorer. Саме в цьому браузері відтворюється велика кількість дефектів, яких ви ніколи не знайдете в інших популярних браузерах.
Переваги кросбраузерного тестування
Сайт, який пройшов кросбраузерне тестування і придатний до використання на широкому спектрі пристроїв, має довший життєвий цикл і швидше досягає потрібної споживчої ніші.
Після завершення тестування сайт буде коректно відображатися:
- у всіх необхідних спеціальних клієнтських конфігураціях;
- на екранах з будь-якою існуючою роздільною здатністю;
- незалежно від конфігурації машини і сервера.
До переліку популярний інстурментів для кросбраузерного тестування відносяться: CrossBrowserTesting.com, LambdaTest, Browsershots, Browserling, Ghostlab, BrowserStack, Sauce Labs, BitBar, Virtuoso, TestGrid, Selenium, Katalon Studio, Ranorex Studio. Більш детально про кожен з цих інструментів можна ознайомитись у статті.
Тестування сайтів на мобільних пристроях за допомогою емуляторів
Можливим способом вирішення проблеми відсутності реальних пристроїв є використання спеціальних інструментів, які емулюють або імітують його функціональність. Використання таких інструментів дає вам можливість виявляти проблеми з веб-сайтом і дозволяє приймати коригувальні заходи, щоб зробити сайт привабливим і функціональним на мобільних пристроях.
Opera Mobile Emulator – це жива демонстрація браузера мобільного телефону Opera, яка функціонує так само, як під час встановлення на телефон. Також доступні додаткові інструменти для налагодження, такі як поєднання клавіш, селектор профілів і різні прапори командного рядка.
Основні переваги Opera Mobile Emulator:
- він простий при встановленні та простий у використанні. Вам не потрібно встановлювати будь-які складні SDK або щось у цьому стилі;
- доступні три режими введення: сенсорний, клавіатурний і планшетний;
- він поставляється з попередньо сконфігурованим набором профілів телефону і планшета;
- всі режими можуть бути активовані і контролюватися посиланнями і елементами управління;
- віддалене налагодження за допомогою реальних пристроїв.
Деякі слабкі місця Opera Mobile Emulator:
- ви можете перевірити, як сторінки виглядають тільки в браузері Opera;
- менше підтримки медіа.
Приклади багів:
- У браузері Internet Explorer при виході з повноекранного режиму не змінюється верстка сайту.
- Скролл бар списку НЕ прокручується в Internet Explorer.
- Немає повідомлення з помилкою, що введено меншу кількість обов'язкових символів в поле "Пароль".
- Картинки або елементи сторінки обрізаються в конкретному браузері.
- Різне відображення шрифтів в браузерах.
- Назви чек-боксів відображаються не відцентрованими по вертикалі.
