1. Browsershots
2. Browser Sandbox
3. IE Testers
4. Netrenderer
5. Microsoft Edge
6. My Debugbar
7. Webshot by Mobile Ready
8. Browsera
9. CrossBrowserTesting
10. BrowserStack
11. висновок

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

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

Browsershots

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

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

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

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

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

Browser Sandbox

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

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

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

IE Testers

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

Netrenderer

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

Microsoft Edge

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

My Debugbar

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

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

Webshot by Mobile Ready

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

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

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

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

Browsera

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

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

CrossBrowserTesting

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

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

BrowserStack

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

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

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

висновок

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

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

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

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

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

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

Автор: Ada Ivanoff

джерело: https://www.sitepoint.com/

Редакція: Команда webformyself.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

Подивіться відео і дізнайтеся покроковий план по створенню сайту з нуля!