Ви можете переглядати сайт, використовуючи останню версію Firefox, і він буде виглядати дивно. А після цього на сайт може зайти відвідувач, використовує Internet Explorer 9, і ресурс не тільки буде виглядати жахливо, але ще і не буде працювати належним чином. Вгадайте, що тоді відбудеться? Ви втратите відвідувача. Тому кросбраузерність так важлива:

Для чого мені тестувати сайт на сумісність з різними браузерами?

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

Ось що Seque Technologies, компанія, що розробляє технологічні рішення для федеральних, комерційних і некомерційних організацій, що говорить про кроссбраузерном тестуванні:

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

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

Кращі безкоштовні інструменти для тестування кроссбраузерного

Як виконати кроссбраузерное тестування?

Firefox, Internet Explorer, Safari, Chrome та Opera зазвичай можна без проблем завантажити і встановити. Але якщо у вас немає такої можливості, то існує безліч веб-інструментів, які імітують ці браузери.

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

Browsershots

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

Кращі безкоштовні інструменти для тестування кроссбраузерного

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

Spoon Browser Sandbox

Spoon пропонує більш грунтовний варіант перевірки кросбраузерності. Для Chrome, Firefox, Internet Explorer, Opera та Safari можна вибрати точну версію, яку потрібно протестувати.

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

Кращі безкоштовні інструменти для тестування кроссбраузерного

Після вибору браузера він відкривається в новому вікні. Потім потрібно ввести URL-адресу і протестувати сторінку.

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

Viewlike.us

Viewlike.us дозволяє переглядати сайт при різних дозволах. Це стане в нагоді для тестування зовнішнього вигляду сайту, а також дасть цінну інформацію, що стосується адаптивності ресурсу:

Кращі безкоштовні інструменти для тестування кроссбраузерного

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

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

IE NetRenderer

IE NetRenderer показує досліджуваний сайт тільки в Internet Explorer, але зате дозволяє вибрати версію від IE 5.5 до IE 11. Це ще один простий інструмент, який підходить тільки для тестування зовнішнього вигляду сайту:

Кращі безкоштовні інструменти для тестування кроссбраузерного

Browsera

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

Коли тест на кросбраузерність завершиться, ви отримаєте на електронну пошту лист з результатами, а у вікні Browsera буде виведений докладний звіт.

Якщо на сайті будуть виявлені помилки JavaScript, Browsera надасть детальну інформацію за ним, включаючи тип і версію браузера, сторінки, або елементи сайту, рядок коду, що містить помилку, її опис. Наприклад, недопустиме значення властивості«:

Кращі безкоштовні інструменти для тестування кроссбраузерного

Також можна переглянути відмінності відображення макета в різних версіях Firefox і Internet Explorer. Так ви зможете побачити, як досліджуваний сайт виглядає в кожному із цих браузерів, щоб згодом внести необхідні зміни.

Для використання Browsera потрібно створення облікового запису. Доступно кілька тарифів, а безкоштовного цілком достатньо для тестування невеликих сайтів.

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

Який з інструментів використовувати?

Spoon Browser Sandbox — єдиний безкоштовний інструмент з розглянутих у цій статті, дозволяє провести повну перевірку ресурсу. Так що, якщо ви не хочете встановлювати всі браузери або платити за послугу, це найкращий варіант для тестування інтерактивних елементів сайту.

Для тестування зовнішнього вигляду сайту підійде Browsershots. Він пропонує на безкоштовній основі можливість перевірити відображення ресурсу в більшості стаціонарних браузерів:

Кращі безкоштовні інструменти для тестування кроссбраузерного

Чи використовуєте ви вже ці інструменти?

Чи використовували ви якісь з описаних у цій статті інструментів для перевірки кросбраузерність? Або ви знаєте про будь-яких інших безкоштовних веб-інструменти, якими хотіли б поділитися і запропонувати іншим читачам? Не забудьте, що мова йшла саме про тестування в стаціонарних браузерах, а не в мобільних.

Поділіться своїми думками у коментарях!

Переклад статті «Ultimate Free Tools for Cross-Browser Testing» був підготовлений дружною командою проекту Сайтостроение від А до Я.