7 інструментів для тестування кросбраузерності сайту в 2016

23

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

7 інструментів для тестування кросбраузерності сайту в 2016

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

Browsershots

7 інструментів для тестування кросбраузерності сайту в 2016

Browsershots – простий і дуже корисний сервіс. Сервіс безкоштовний, але в ньому є такий функціонал, який ви не зможете знайти в інших додатках, навіть у платних.

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

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

Якщо вам потрібно більше функцій і можливість розставляти пріоритети при тестуванні, ви можете придбати підписку на місяць за $29.

Browser Sandbox

7 інструментів для тестування кросбраузерності сайту в 2016

Browser Sandbox – ще один сервіс для тестування кросбраузерності з великим списком підтримуваних браузерів. Істотний мінус полягає в тому, що даний сервіс доступний тільки користувачам Windows. Користувачам Linux і Mac OS не пощастило, проте розробники обіцяють версію для Mac в недалекому майбутньому.

До плюсів можна віднести великий список підтримуваних браузерів, серед яких IE, Firefox, Chrome, google chrome Canary, Firefox Mobile, Safari, Opera і Firefox Nightly. У безкоштовної версії сервісу можна робити тести тільки в останніх версіях браузерів.

За доступ до старих версіях браузерів доведеться заплатити. На щастя тарифи дешеві і починаються від $4.95 на місяць.

IE Testers

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

Netrenderer

7 інструментів для тестування кросбраузерності сайту в 2016

В Net Renderer можна проводити тести в версіях IE від 5.5 до 11. Швидкий і простий інструмент, але функціонал залишає бажати кращого.

Microsoft Edge

7 інструментів для тестування кросбраузерності сайту в 2016

Microsoft Edge – ціла платформа, яка виходить далеко за межі тестів для IE. Власне кажучи, браузер дозволяє створювати скріншоти роботи сайту в інших браузерах і з-під різних мобільних пристроїв. Причина, по якій я виніс даний браузер в групу тестувальників IE, в тому, що в браузері є віртуальні машини для різних версій IE, а також у браузері є Microsoft Remote App, за допомогою якого можна віддалено проводити тести в IE.

My Debugbar

7 інструментів для тестування кросбраузерності сайту в 2016

І останній сервіс для тіста IE — My DebugBar, також відомий як IETester. На відміну від Net Renderer, My Debugbar – десктопное додаток вагою 60Мб. Його потрібно завантажити, і працює програма тільки в Windows.

У IETester є кілька відомих мінусів. Перш, ніж грішити на жахливі результати тестів, вам необхідно почитати про баги даного додатка.

Webshot by Mobile Ready

7 інструментів для тестування кросбраузерності сайту в 2016

Відмінність Webshot в тому, що цей сервіс тільки для тестування кросбраузерності на мобільних пристроях. Сервіс безкоштовний, але вам доведеться зареєструватися.

На момент написання статті на сайті Webshot не працював, принаймні у мене. При спробі зареєструватися я отримував помилку Internal Server Error. Пару тижнів тому я писав розробникам даного сервісу про проблему, відповіді досі немає, та і в майбутньому не очікується.

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

Browsera

7 інструментів для тестування кросбраузерності сайту в 2016

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

Установка не потрібна. Даний сервіс можна безкоштовно випробувати протягом 30-ти днів. У безкоштовному акаунті майже немає функцій, а платні тарифи йдуть від $39 до $99.

CrossBrowserTesting

7 інструментів для тестування кросбраузерності сайту в 2016

В цьому сервісі мені найбільше подобається те, що він використовує справжні пристрої для запуску веб-браузерів. Емулятори цілком справляються зі своєю роботою, але немає нічого краще, ніж запустити сайт на реальному пристрої. Список можливостей досить вражаючий, і CrossBrowserTesting точно коштує своїх грошей. Я думаю, що список підтримуваних браузерів і ОС найбільший в мережі – 900 браузерів в більш ніж 40 операційних системах, в тому числі iOS, Android, Windows, Mac і т. д.

Мені також сподобалася функція тесту в реальному часі. З її допомогою можна тестувати веб-сторінки на реальному обладнанні. Тестувати можна AJAX і HTML форми, JavaScript, Flash. Серед інших можливостей – локальні тести, Selenium тести (пише автоматизовані скрипти), а також порівняння скріншотів. Мінімальний тариф коштує $29 в місяць, але можна взяти семиденний тріал.

BrowserStack

7 інструментів для тестування кросбраузерності сайту в 2016

BrowserStack – ще один великий гравець в індустрії. Відмінно підходить для тіста мобільних пристроїв (справжні пристрою), проте також є 700+ десктопних браузерів.

За допомогою даного сервісу можна також проводити локальні тести, робити швидкі скріншоти з дозволами від 800×600 до 2048×1536. Так само як і у CrossBrowserTesting, тарифи починаються від $29 в місяць, але BrowserStack також пропонує обмежені пропозиції за $12.50 на місяць для фрілансерів. Також для проектів з відкритим вихідним кодом у них є безкоштовні сервіси.

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

Висновок

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

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

Але коли друг відкрив сайт на своєму комп’ютері, він сказав мені, що в IE сайт виглядає дуже погано. І так, я не тестував його на роботу в IE перед відправкою – проект був попереднім і з таким відмінним кодом, що він просто не міг не працювати у якому-небудь браузері.

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

Але якщо б у нього не було під рукою ще одного ПК з робочим IE, було б складно переконати його, що проблема в його браузері, а не в моєму коді.

Ось саме для таких випадків, коли потрібно швидко накидати приблизний проект, вам підійдуть BrowserShots або інші IE тестувальники. Ну і природно, якщо вам потрібні більш надійні гарантії, то тут вам не допоможуть безкоштовні рішення. Ось чому важко виділити якийсь один сервіс і назвати його кращим – все залежить від конкретного випадку.