Статьи

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

  1. Безкоштовні інструменти тестування
  2. Adobe BrowserLab
  3. Browsershots
  4. SuperPreview (безкоштовна і комерційна версії)
  5. Lunascape 6
  6. IE Tester
  7. IE NetRenderer
  8. Spoon
  9. Sauce Labs (безкоштовна і комерційна версії)
  10. Browsera (безкоштовна і комерційна версії)
  11. Browserling (безкоштовна і комерційна версії)
  12. Комерційні інструменти тестування
  13. Mogotest
  14. Cloud Testing
  15. BrowserCam
  16. Multi-Browser Viewer
  17. CrossBrowserTesting
  18. Порівняння інструментів тестування
  19. висновок
  20. Обговорення уроку на форумі
  21. Автор перекладу

Оригінал статті англійською мовою: Review Of Cross-Browser Testing Tools

Коли-небудь прийде той час, коли буде стандартізровано відображення розмітки усіма основними браузерами і тоді в тестуванні верстки в різних браузерах не буде необхідності. У всякому разі, якщо розробник буде слідувати стандартам. Але оскільки цей день як і раніше далеко (якщо він взагалі коли-небудь настане), тестування сайту в сучасних, а також в застарілих, браузерах залишається обов'язковим в будь-якому проекті.

Старий спосіб перевірки коду полягає в завантаженні сайту на настільки великій кількості комп'ютерів, яке ви зможете знайти, використовуючи максимально можливе число комбінацій браузерів і операційних систем. Це прекрасне рішення, якщо у вас є доступ до купи різних комп'ютерів (і досить часу, яке можна вбити на тестування). Але є набагато більш ефективні способи тестування в різних браузерах, з використанням безкоштовних або комерційних веб-сервісів і програмного забезпечення. У цій статті ми розглянемо найбільш корисні з них.

Безкоштовні інструменти тестування

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

Adobe BrowserLab

Adobe BrowserLab - безкоштовний інструмент тестування кросбраузерності, що дозволяє протестувати сайт в сучасних і деяких застарілих браузерах, включаючи різні версії Chrome, Safari, IE і Firefox. Перегляд можливий в декількох режимах: повноекранному, в режимі порівняння, а також в режимі «накладених шарів». Сервіс может отримувати доступ до сторінок, розміщеним в інтернеті, або працювати локально як доповнення до Firebug або Adobe Dreamweaver CS5. Можливість створення наборів браузерів для тестування дуже корисна, якщо немає необхідності тестування в застарілих браузерах.

Browsershots

Browsershots , Ймовірно, має найширшим набором Бразер серед безкоштовних інструментів тестування. Він включає в себе браузери, що працюють в Linux, Windows і BSD. Серед них є такі, про яких ви, ймовірно, взагалі ніколи не чули (наприклад, Galeon, Iceape, Kazehakase або Epiphany). Browsershots дозволяє тестувати як в останніх версіях кожного браузера, так і в застарілих версіях.

Хоча Browsershots дозволяє тестувати в величезному «зоопарку» браузерів, варто пам'ятати, що чим більше набір браузерів для тестування, тим довше доведеться чекати результату. Так що варто зупинитися на основних браузерах.

Прим. перекладача. Крім можливості вибрати ОС і браузери, Browsershots дозволяє переглянути, як буде виглядати сайт при різних дозволах монітора - від 640 до 1600 пікселів по ширині.

SuperPreview (безкоштовна і комерційна версії)

SuperPreview: http: //expression.microsoft.com/en-us/dd565874.aspx - продукт Microsoft і працює тільки в Windows. Він дозволяє вам вказати власний «основний» браузер, здатний працювати з будь-яким браузером, встановленим на вашому комп'ютері (і поставляється з Втроенная движком рендеринга IE 6). З одного боку, робота з браузерами, установленимі в ОС забезпечує високу швидкість роботи (просто тому, що не потрібно чекати завантаження чого-небудь або чекати відповіді віддаленого сервера), з іншого боку це обмежує набір браузерів для порівняння.

Trial-версія SuperPreview надає 60 днів використання «хмарних» сервісів, після чого вам доведеться або купити його, або перейти в «урізання» режим роботи (тільки локально встановлені браузери і режим IE 6-9). «Хмарний» сервіс має підтримку Chrome, Safari (Mac) 4-й і 5-й версій, Firefox 3-й і 4-й версій. Також є можливість інтерактивного режиму входу на сайти, що вимагають авторизації. Є інструменти для налагодження DOM і доступ до режиму «накладених шарів» як в Adobe BrowserLab. На жаль, немає ніякої підтримки для Opera, ні для локальних версій браузера, ні в «хмарі». Щоб отримати доступ до «хмарних» сервісів вам потрібно встановити Expression Web, але безкоштовна версія забезпечує підтримку тестування в IE 6, IE7, IE 8 (і IE 8 в режимі IE 7), а також IE 9, якщо він встановлений у вашій ОС.

Щоб отримати доступ до «хмарних» сервісів вам потрібно встановити Expression Web, але безкоштовна версія забезпечує підтримку тестування в IE 6, IE7, IE 8 (і IE 8 в режимі IE 7), а також IE 9, якщо він встановлений у вашій ОС

Lunascape 6

Lunascape 6 об'єднує «Пошуку» трьох основних браузерів для Windows. Він може ісполльзовать Trident (IE), Gecko (Firefox) і WebKit (Chrome і Safari) таким чином, що ви зможете одночасно побачити, як виглядає ваш сайт у всіх трьох браузерах. Це не зовсім традиційний інструмент тестування кросбраузерності, але тим не менше він буде корисним інструментом для дизайнерів і розробників. Найважливішою перевагою звичайно є можливість одночасного перегляду результату відразу в трьох основних «движках» рендеринга. Таже підтримуються розширення і плагіни Firefox і ви можете використовувати інструменти для розробників, такі як Firebug для пошуку проблем сумісності.

IE Tester

IE Tester - безкоштовний (як для приватного, так і для професійного використання) браузер для Windows, що дозволяє тестувати сайт в IE 5.5, IE 6, IE 7, IE 8, IE 9 і IE 10 Previev. Можна тестувати як рендеринг HTML + CSS, так і JavaScript. Доступна тільки альфа-версія інструменту. Працює на Windows 7, Windows Vista і Windows XP c встановленим IE не нижче 7-й версії.

IE NetRenderer

IE NetRenderer дозволяє протестувати сторінки в Internet Explorer від версії 5.5 до IE 9. Для кожної версії потрібно робити окремий запит, але це можна пробачити безкоштовного інструменту.

Прим. перекладача. На сайті сервісу також є розширення «NetRenderer Toolbar», упрощаюещее тестування сторінок.

Spoon

Spoon сервіс емуляції програм. Надається безкоштовна можливість запуску Firefox, Chrome, Opera і Safari для користувачів Windows. Доступні різні версії браузерів: Firefox 2-5, 4-8 Chrome, Safari 3-5 і Opera 9-10. Технічно, Spoon підтримує віртуалізацію IE, але ця можливість відключена на вимогу Microsoft.

Sauce Labs (безкоштовна і комерційна версії)

Sauce Labs предоставлет доступ до безлічі браузерів в різних ОС і встановлює з'єднання вашого браузера з налагодженою віртуальною машиною. Також здійснюється відеозапис всієї сесії тестування. Соервіс надає 200 хвилин безкоштовного тестування на місяць і дозволяє створювати тести автоматизованого тестування в браузерах (використовується Selenium).

Browsera (безкоштовна і комерційна версії)

Browsera забезпечує автоматизацію тестування сумісності. Він автоматично визначає раздлічія в відображенні сторінок браузерами, тим самим спрощуючи процес тестування. Також визначаються помилки JavaScript, а в комерційній версії дозволяє тестувати сторінки за передплатою і сторінки, які потребують авторизації. Також можна протестувати динамічні сторінки.

Безкоштовна версія включає в себе добвольно обмежене число браузерів і роздільну здатність. Існують різні комерційні версії: починаючи від $ 39 за один проект і від $ 49 до $ 99 за місячну підписку. Комерційні версії підтримують більше число браузерів, забезпечують високу роздільну здатність і дозволяють тестувати «закриті» сторінки.

Комерційні версії підтримують більше число браузерів, забезпечують високу роздільну здатність і дозволяють тестувати «закриті» сторінки

Browserling (безкоштовна і комерційна версії)

Browserling відносно новий інструмент тестування кросбраузерності. Підтримується обмежене число браузерів (і не завжди останні версії), що обмежує область його застосування. Але це поки що бета-версія, так що є надія, що в найближчому майбутньому буде підтримуватися більше число браузерів.

Безкоштовна версія огранічівет вреся роботи до п'яти мінтут. За $ 20 в місяць надається можливість роботи без обмежень.

За $ 20 в місяць надається можливість роботи без обмежень

Комерційні інструменти тестування

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

Mogotest

Mogotest надає можливість повного тестування кросбраузерності, в тому числі і для приватних сторінок. Надається API, тому можлива інтеграція в існуючі інструменти та робочі процеси. Mogotest також надає звіт про стан сайту, який вкаже на «биті» посилання і втрачені сторінки, нескінченні перенаправлення та інші проблеми, що часто зустрічаються в нових сайтах. Служба надає інструменти для порівняння скріншотів, тестування сайту цілком, включаючи тестування послідовностей сторінок, і тестування окремих сторінок. Підтримує HTTP-basic аутентифікація і cookies.

Надаються два плани для фізичних осіб: персональний план, починаючи з $ 15 в місяць, що дозволяє протестувати до 50 сторінок на трьох сайтах, і план для фрілансерів за $ 45, що дозволяє протестувати до 10 сайтів і 350 сторінок. Плани для компаній починаються від $ 125 в місяць і закінчуються на $ 4499 за необмежений доступ. Два найбільш дорогих плану включають в себе звіти, що налаштовуються.

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

Cloud Testing

Cloud Testing надає можливість функціонального тестування кросбраузерності. Ви записуєте сценарій поведінки користувача з вашим браузером і Selenium IDE, завантажуєте його, після чого Cloud Testing буде виконувати цей сценарій в декількох браузерах і операційних системах. Потім він надає скріншоти і HTML і компоненти діагностики. Ціни на сайті не вказані.

BrowserCam

BrowserCam - набір засобів для тестування десктопних і мобільних браузерів (тестування мобільних досі відсутній в більшості інших інструментів). Також надається віддалений доступ для тестування в реальному часі на Windows, Linux і Mac OS X, і можливість захоплення електронної пошти для перевірки HTML-, RTF- і TXT-листів.

Ціна на BrowserCam починається від $ 19,95 в день для одного сервісу (і $ 24,95 для браузера, віддаленого доступу і перехоплення пакетів електронної пошти) і закінчується на $ 399,95 в рік за один сервіс (і $ 499,95 для браузера, віддаленого доступу і перехоплення пакетів електронної пошти і розрахований на багато користувачів доступ, або $ 999,95 за все ці функції плюс тестування мобільних пристроїв).

Ціна на BrowserCam починається від $ 19,95 в день для одного сервісу (і $ 24,95 для браузера, віддаленого доступу і перехоплення пакетів електронної пошти) і закінчується на $ 399,95 в рік за один сервіс (і $ 499,95 для браузера, віддаленого доступу і перехоплення пакетів електронної пошти і розрахований на багато користувачів доступ, або $ 999,95 за все ці функції плюс тестування мобільних пристроїв)

Multi-Browser Viewer

Multi-Browser Viewer працює з десктопними і мобільними браузерами і включає в себе 26 віртуалізіруемих браузерів, 5 мобільних браузерів (в тому числі iPhone і IPad) і 61 скріншот-браузер (з їх допомогою можна бачити, як візуалізуються сторінки, але не можна бачити результат взаємодії користувача з сайтом) . Доступний на п'яти мовах:
англійською, іспанською, німецькою, російською та французькою.

Вартість Multi-Browser Viewer становить $ 139,95 за однопользовательськую ліцензію і включає один рік використання продуктів і оновлень. Продовження ліцензії в даний час складає $ 99,95. Безкоштовна тріал-версія доступна на сайті програми.

Безкоштовна тріал-версія доступна на сайті програми

CrossBrowserTesting

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

Щомісячна плата за користування становить від $ 29,95 до $ 199,95 в залежності від кількості користувачів і хвилин випробувань (можливе перенесення невикористаного часу на наступний місяць, але кількість таких хвилин обмежена). Для всіх планів надається безкоштовний тестовий період терміном на один тиждень.

Для всіх планів надається безкоштовний тестовий період терміном на один тиждень

Порівняння інструментів тестування

У таблиці нижче перераховані основні характеристики розглянутих інструментів тестування.

Інструмент Тип Кількість підтримуваних версій браузерів Тестування в IE Інтерактивне тестування Порівняльне тестування Вартість Adobe BrowserLab Онлайн-сервіс 13 IE6 + Ні Так безкоштовно Browsershots Онлайн-сервіс 60+ IE6 + Ні Ні Безкоштовно SuperPreview Додаток Залежить від встановлених в ОС IE6 + Так Так Безкоштовно Lunascape Додаток 3 IE6 + Так Так Безкоштовно IETester Додаток 6 версій IE IE5.5 + Так Так Безкоштовно IE NetRenderer Онлайн-сервіс 5 версій IE IE5.5 + Ні Ні Безкоштовно Spoon Онлайн-сервіс 16+ не підтримує Так Ні Безкоштовно Sauce Labs Онлайн-сервіс 40+ IE6 + Так Ні Безкоштовно - $ 499 в місяць Browsera Онлайн-сервіс 9 IE6 + Ні Так Безкоштовно - $ 99 / month Browserling Онлайн-сервіс 9 IE5.5 + Ні Ні Безкоштовно - $ 20 в місяць Mogotest Онлайн-сервіс 7 + IE6 + Ні Так $ 15 - $ 4499 на місяць Cloud Testing Онлайн-сервіс 4+ IE6 + Так Так Не вказано BrowserCam Онлайн-сервіс 90+ IE5.2 + Так Так $ 19,95 - $ 89.95 в місяць Multi-Browser Viewer Додаток 80+ IE6 + Для деяких браузерів Так $ 139.95 CrossBrowserTesting Онлайн-сервіс 100+ IE6 + Так Так $ 29,95 - $ 199.95 в місяць

висновок

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

Обговорення уроку на форумі

обговорити урок

Автор перекладу

Найближчі курси по темі

DEV-P13. Професійна верстка сайтів

Курс поки не поставлений в розклад. Залишити заявку на курс

За роботу коментарів відповідає

Новости

Как создать фото из видео
Кризис заставляет искать дополнительные источники дохода. Одним из таких источников может стать торговля на валютном рынке Форекс. Но чтобы не потерять свои деньги необходимо работать с надежным брокером.

Как оформить группу в вконтакте видео
Дано хотел свой магазин в вк, но не знал с чего начать его делать. Так как хотелось не банальный магазин с кучей ссылок и фото, а красиво оформленный. С меню, с аватаркой. После просмотра видео создал

Как оформить диск малыш от рождения до года из фото и видео
Оформить диск "Малыш от рождения до года" из фото и видео можно совершенно разными способами! Кто-то для достижения данной цели идет на шоу-таланты, кто-то пользуется услугами профессионалов, а кто-то

Как создать видео без программ
Реклама - это один из видов деятельности, который помогает людям продвигать свои товары или услуги. Одним из таких видов рекламы является - раздача листовок или более современное название "флаеров". Раздача

Финансовые новости мира
Вернуться в раздел Профессия экономист Экономисты востребованы в компаниях, где требуется контролировать расходы, правильно рассчитывать средства, где необходим постоянный анализ экономической деятельности

Транспортное средство закон
Пункт 1.5. ПДД гласит: «Участники дорожного движения должны действовать таким образом, чтобы не создавать опасности для движения и не причинять вреда», а в пункте 1.2. указано: «Участник дорожного движения»

Квест кімната дніпро
Законопроект о запрете посещения квестов детьми младше 14 лет прокомментировал один из самых популярных в России квест-агрегаторов. Поправки в городской закон о мерах по предупреждению причинения вреда

Труба в изоляции Valsir Pexal
На сегодняшний день имеется масса самых разных отделочных материалов, которые можно использовать, как внутри, так и снаружи помещения в качестве декоративного элемента, однако большинство из них имеет

Роллы
От того, как и чем мы питаемся зависит очень многое. Это и самочувствие и внешность и общее состояние здоровья. Несмотря на широкое предложение, вопросы правильного и вкусного питания стоят очень остро.

Дешевая доставка суши
Суши можно не только запивать, но и заедать: хорошо с суши сочетаются тэмпура (обжаренные в специальном кляре ломтики овощей, грибы или морепродукты), а также мисо-суп (суп, заправленный бобовой пастой).