Проверить верстку в разных браузерах. Обзор инструментов тестирования кроссбраузерности вёрстки. Какие есть стандарты для создания браузеров

Как часто заказчики ПО хотят, чтобы их детище работало у любого пользователя, в любых условиях и окружениях? Здесь будет уместен ответ - всегда. Что же скрывается за этой фразой? Что именно требуется для проверки от тестировщика? И как он будет воплощать требования в жизнь?
Не секрет, что WEB-приложения имеют отличия от десктопных. Самое главное отличие и опасение - это то, что мы не знаем, в каком браузере и уж тем более - в какой версии этого браузера откроет приложение наш пользователь.

Сколько существует браузеров

Если вас спросят, сколько браузеров вы знаете, думаю, вы с уверенностью назовете не меньше пяти. А если вас спросить, сколько вообще существует браузеров - возможно, вы задумаетесь.

А если спросить об этом у Гугла? Ответ будет неоднозначный. Количество более-менее известных браузеров сейчас превышает 50 наименований. И возможно, прямо сейчас кто-то выпускает в сеть еще один, свой собственный. А давайте представим, что уже завтра этот “кто-то” выпустит обновление своего браузера. Как же в таких непростых условиях проверить всё?

Какие есть стандарты для создания браузеров

Есть радостная новость! Типовых движков, с помощью которых работают браузеры, гораздо меньше. Кроме того, существуют язык разметки и протоколы, которые объединяют все наши разнообразные и разношерстные браузеры. Я говорю о таких вещах, как HTML, CSS и HTTP. Любой уважающий себя и своих потенциальных пользователей создатель браузера будет соблюдать эти правила и сделает браузер, адаптированным под общепринятые стандарты. Отдельно почитать об этом можно на сайте w3.org .

Но и тут есть подводные камни. Стандарты совершенствуются; новые версии браузеров, по крайней мере, стараются совершенствоваться. А старые версии? Мало кто занимается доработкой старых версий. Да вообще никто не занимается. Выпустили новую - и все счастливы. А пользователи, думаете, каждый день проверяют наличие обновлений своего браузера? Тоже вряд ли.

К тому же, не стоит забывать про разработчиков, которые пишут само приложение. Они тоже люди, могут ошибиться в коде, могут не посмотреть в стандарт - бывает всякое. Поэтому, к сожалению, стандарты - не панацея.

Как выбрать браузеры под ваше приложение

Теперь о тестировании. Прежде чем начать непосредственно тестировать то или иное web-приложение, тестировщик должен ознакомиться с требованиями, которые выдвигает заказчик. Бывает так, что в требованиях изначально прописано: “Наш продукт должен работать в браузерах Chrome, начиная с версии 43, и IE, начиная с версии 9”. Или же сам заказчик не может определиться и, конечно же, ему хочется охватить всё и всех. Ну а вдруг, его самый важный потенциальный клиент использует браузер Uran? И что тогда? Он не увидит его приложение вовсе?

Прежде чем тестировщик начнет устанавливать себе все браузеры мира на один компьютер или, наоборот, удалять ненужные 48, можно предложить заказчику провести исследование. Таким образом, тестирование пройдет быстрее и более углубленно. Приложение выйдет в свет раньше. Ну а сам заказчик потратит меньше денежных средств.

Для начала надо определить целевую аудиторию будущего приложения. Кто эти люди, где они живут? Исходя из этих данных в сети можно увидеть статистику использования браузеров - например, самые популярные браузеры Азии. Благодаря таким запросам можно увидеть очень интересные и даже неожиданные результаты. Ну а если приложение в каком-то виде уже существует, можно воспользоваться удобной статистикой от ГуглАналитикс и иметь свои конкретные данные.

Хочу показать вам некоторые сервисы по просмотру статистики:

w3schools.com - здесь можно посмотреть данные по каждому месяцу, отследить тенденции. Кроме непосредственно браузеров и их версий можно посмотреть данные по использованию ОС, по разрешениям экрана и мобильным платформам;
http://gs.statcounter.com - здесь собрана статистика по отдельным странам или сторонам света (Азия, Европа, Океания);
netmarketshare.com - на этом сервисе можно самому составить список из интересующих Вас браузеров и их версий;
google.ru - на Гугл Аналитикс можно будет посмотреть свою собственную статистику.

Как проводить кроссбраузерное тестирование

Когда выбор браузеров завершен, начинается полноценное тестирование. Допустим, вы выбрали три версии IE, три версии Chrome, две версии FireFox и две версии Safari. Если с разными браузерами один тестировщик справиться сможет, то с разными версиями одного и того же браузера может возникнуть заминка.

Тут на помощь приходят эмуляторы. Их тоже существует немало. С помощью одних, например, Browsershots , можно получить скриншоты реальных пользователей с нужных нам браузеров и их версий. С помощью других можно самому выполнять нужные нам действия в самом эмуляторе.

Я хочу рассказать про два из них, которые лично использовала в ходе своей работы.
Например, эмулятор IETester , разработанный специально под этот браузер. В соседних окнах эмулятора можно открыть одну и ту же страницу разными версиями браузера. Это очень удобно и наглядно. Путем сравнения двух соседних вкладок можно легко увидеть несоответствия в отображении. В моей практике эта программа меня не подводила. И вдогонку, еще один её несомненный плюс - программа полностью бесплатна и занимает совсем немного места.

Однако, есть мнения, что отображение в этом эмуляторе не соответствует действительности. Как быть в этой ситуации? Есть решение! Проверить в самом браузере. Если какой-то момент “прям смущает-смущает”, открывайте реальный браузер и смотрите.

Если, например, надо проверить в IE 10, а на компьютере уже есть IE 11? Удалять, переустанавливать, проверять - это неверное решение. Тут на помощь приходят виртуальные машины. Это как компьютер в компьютере.

Например, можно воспользоваться Vmware workstation. И иметь на рабочем компьютере одни версии браузеров, а на виртуальной машине - другие. Можно даже установить несколько таких машин на один компьютер, и после этого иметь под рукой много разного софта. Стоит заметить, что виртуальные машины тоже различаются:

Vmware workstation - поддерживает работу с Windows и Linux;
Windows Virtual PC - только для Windows;
ORACLE VirtualBox - готова к установке Windows, Linux и MAC OS.

Другой эмулятор - Spoon . Им также можно пользоваться абсолютно бесплатно. Он включает в себя широкий выбор браузеров: Firefox, Chrome, Opera, Safari и их разные версии. Тоже довольно удобная программа, которая позволяет в разных окошках на одной странице сравнить разные браузеры.. В нем можно:

делать скриншоты;
тестировать в разных браузерах и ОС;
записывать тесты и позже прогонять их на других нужных браузерах.

Кроме записи данный сервис может похвастаться полноценной работой в ОС: т.е., можно в рамках одного теста переключаться между браузерами, задавать разные адреса и даже открывать инструмент разработки.

На что важно обращать внимание при кроссбраузерном тестировании

А зачем вообще тестировщики проводят такое тестирование, что именно они хотят проверить? Как я уже говорила, браузеры - разные, движки, на которых они работают, тоже разные. А это значит, что одни и те же элементы могут отображаться по-разному. Ведь разработчикам во время написания приложения довольно сложно подстроиться сразу под все браузеры и учесть все их особенности.

WEB-приложения по-другому называют клиент-серверные приложения. Здесь клиентом выступает браузер, а сервером - веб-сервер. Браузер принимает от пользователя запрос, отправляет его на сервер. WEB-сервер обрабатывает запрос и передает ответ обратно в виде HTML-страницы. Браузер отрисовывает полученный код в страницу, которую мы с Вами в итоге и видим. То есть, непосредственно от браузера будет зависеть то, какой мы увидим страницу.

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

Эта статья предназначена для дизайнеров, верстальщиков, разработчиков и всех остальных людей, бьющихся с тестированием сайтов в нескольких браузерах.

Всего лишь год назад, хороших средств для тестирования кроссбраузерной совместимости сайтов практически не было. Инструменты, как правило, обладали серьезными недостатками – высокой ценой, скромными возможностями или затрачиваемым временем. Однако, в последнее время, в мире тестирования браузеров появилось много новичков, и некоторые из них являются прекрасными сервисами.

В этой статье, мы рассмотрим 7 простых инструментов для тестирования кроссбраузерной совместимости; инструментов, которые справляются со своей задачей очень легко, и к тому же, каждый из этих инструментов можно использовать бесплатно.

Xenocode Browser Sandbox - это гейм-чейнджер для тестирования браузеров на компьютерах с Windows. Всего лишь одним кликом мыши, вы можете открыть и работать в браузере, без всякой инсталляции. Вы можете тестировать различные версии IE, Firefox, Google Chrome и Safari. В прямом смысле тестировать, а не только получать скриншоты.

Увы, это далеко не идеальное решение. В текущей версии есть довольно серьезный недостаток - нет никакой поддержки Macintosh. Ходят слухи, что она появится в будущем, тем не менее и тогда, этот сервис будет принадлежать отдельному классу.

#2 - CrossBrowserTesting.com

Бесплатная, пятиминутная сессия тестирования для зарегистрированных пользователей, и значительно больше времени для заплативших пользователей. CrossBrowserTesting.com устроен очень просто, вам необходимо авторизоваться в системе, затем выбрать свободный компьютер с нужным браузером/ОС, и можно приступать к тестированию.

Вы можете использовать ява-апплет для веб-приложений, чтобы подключиться к их удаленным компьютерам, или использовать локальный VNC-клиент, если он у вас установлен. Их система предлагает полное интерактивное тестирование сайта, и также как решение от Xenocode, это не только скриншоты.

#3 - IETester

Это бесплатная загружаемая windows-программа, которая все еще находится на ранней стадии разработки. Как было заявлено, она является единственным бесплатным ресурсом, позволяющим полностью протестировать все актуальные версии Internet Explorer.

Просто загрузите и установите этот бесплатный браузер, и вы легко сможете выбрать нужную версию IE для просмотра. Программа также позволяет расположить две вкладки с различными версиями рядом.

#4 - BrowsrCamp

Со всем многообразием сайтов тестирования только для IE, самое время кому-нибудь присоединится и создать сервис, позволяющий тестировать сайты на Safari/Mac. Бесплатная версия этого сервиса предоставляет возможность получения скриншотов сайта, тестированных на последней, стабильной версии сафари, практически мгновенно. И хотя в сервисе немного не хватает версий браузеров, он определенно восполняет это предоставлением хорошей скорости.

За несколько долларов дополнительно, есть возможность получить компьютер полностью и проводить более глубокое тестирование

#5 - Litmus

В течении нескольких месяцев, популярность Litmus значительно возросла, и он стал одним из самых благоприятных инструментов для тестирования кроссбраузерности. К сожалению его бесплатные возможности ограничены и позволяют тестировать только IE7 и Firefox 2.

Коммерческая версия их приложения значительно более мощная, и позволяет тестировать множество браузеров и даже почтовые клиенты. К сожалению снова, одна клиентская подписка стоит от 49$, что не слишком-то дешево. Но возможно для тех, кто нуждается в надежной системе тестирования, покупка может быть оправдана.

#6 - NetRenderer

NetRenderer является чуть более скромным инструментом для тестирования совместимости с IE. Как и многие другие сервисы, NetRenderer создает скриншоты вашего сайта в различных браузерах. Он поддерживает все версии IE начиная с 5.5 до версии 8, и создает скриншоты очень быстро, без необходимости ждать.

Есть возможность установить тулбар для браузера, позволяющий быстро протестировать любые страницы, которые вы посещаете вместе с их сервисом. Это также бесплатный сервис, к тому же платное тестирование на этом сервисе вообще не предусмотрено.

#7 - BrowserShots

BrowserShots стал одним из самых популярных инструментов тестирования, и не без оснований. Он позволяет тестировать большинство браузеров и операционных систем, включая довольно редкие сочетания. Бесплатное использование сервиса имеет только одно ограничение – очередь, поскольку заплатившие пользователи, обслуживаются первыми.

В связи с популярностью сервиса, получение тестовых скриншотов несколько раз в день, может быть очень медленным. Так как сервис предоставляет скриншоты с компьютеров пользователей, все зависит от вашего выбора. Чем популярнее браузер/ОС, тем быстрее вы получите скриншоты.

Bonus #8 - Adobe MeerMeer

Adobe MeerMeer это приятный на вид сервис тестирования, который будет выпущен в ближайшее время, компанией Adobe. MeerMeer предлагает значительное количество преимуществ по сравнению с существующими системами тестирования. Наиболее примечательным является, пожалуй, «луковая кожура», или возможность наложения скриншотов из разных браузеров, одно на другое.

Может быть вы используете принципиально иной способ тестирования кроссбраузерной совместимости? Если так, поделитесь, есть множество людей, которым это будет интересно.

Одно из стандартных требований заказчика к разработке качественного веб-сайта — это кроссбраузерность и корректное отображение на многочисленных современных устройствах. Поэтому каждый веб-разработчик рано или поздно сталкивается с вопросом тестирования сделанного веб-сайта в разных браузерах.

» Кроссбраузерность - свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями «. (Википедия)

Есть множество разных способов проверить ваш сайт в разных браузерах и в разных операционных системах. Например, онлайн-сервисы, локальные приложения, установка нескольких браузеров на свой компьютер и т.д. Есть платные и бесплатные сервисы. В данном обзоре мы обратим ваше внимание на наиболее оптимальные бесплатные и платные сервисы проверки вашего сайта в разных браузерах и на разных устройствах.

1. Browsershots (бесплатно/платно)

4. IE Tester (бесплатно)

5. BrowserСam (платно)

BrowserСam — очень мощный платный онлайн-сервис для тестирования сайтов под любым браузером и любой платформой . Одна из главных «фишек» данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт. Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile . Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний.

Цены стартуют от 19,95 у.е . в день в зависимости от функционала.

6. CrossBrowserTesting (платно)

7. Litmus (платно/бесплатно)

8. СloudTesting (платно)

— платный онлайн-сервис, который предоставляет возможность функционального тестирования кроссбраузерности сайта. Вы записываете сценарий поведения пользователя с вашим браузером и Selenium IDE, загружаете его, после чего Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты.

Ценовая политика стартует от 99 у.е. в месяц .

9. Mogotest (платно)

— платный онлайн-сервис , который предоставляет возможность полного тестирования кроссбраузерности, в том числе и для приватных страниц. Предоставляется API, поэтому возможна интеграция в существующие инструменты и рабочие процессы.

Ценовая политика стартует от 15 у.е. в месяц для физических лиц. При этом есть возможность бесплатно тестировать выбранный пакет (триальная версия) 14 дней.

10. Multi-Browser Viewer (платно)

Multi-Browser Viewer — платное приложение, которое работает с десктопными и мобильными браузерами и включает в себя 26 виртуализируемых браузеров, 5 мобильных браузеров (в том числе iPhone и IPad ) и 61 скриншот-браузер (с их помощью можно видеть, как визуализируются страницы, но нельзя видеть результат взаимодействия пользователя с сайтом).

Ценовая политика Multi-Browser Viewer составляет 139,95 у.е. за однопользовательскую лицензию и включает один год использования продуктов и обновлений. Кроме того доступна бесплатная триал-версия программы (14 дней).

11. Sauce Labs (бесплатно/платно)

12. Spoon (бесплатно)

13. Browsera (бесплатно/платно)

— это онлайн-сервис, который обеспечивает автоматизацию тестирования кроссбраузерности. Он автоматически определяет различия в отображении страниц браузерами, тем самым упрощая процесс тестирования.

Бесплатная версия включает в себя довольно ограниченное число браузеров и низкое разрешение. Платные пакеты стартуют начиная от 39 у.е. за 14 дней и от 49 у.е. до 99 у.е. за месячную подписку.

—
При использовании этого материала активная ссылка на обязательна.

Всем привет!

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

Все вы, наверное, знаете, что существует несколько популярнейших браузеров (Safari, Chrome, Opera, Mozilla и т.д.) различных версий. Версий браузеров очень много, потому что они постоянно обновляются, корректируются, улучшаются, и происходит это действительно часто. В итоге все приводит к тому, что существует более сотни программ для выхода в интернет. И плохо это тем, что они не согласованы между собой: каждый браузер воспринимает html-код (тот, на котором написаны сайты в интернете) по-своему.

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

Наверное, вы понимаете, что все это приведет к одному: посетитель закроет страницу браузера с таким сайтом и наверняка сюда больше не вернется. Поисковики будут трактовать это по-своему: «сайт неинтересен пользователям, зачем тогда на него отправлять посетителей?». В общем, это приведет к тому, что трафик с поисковых систем понизится, позиции сайта упадут. Проблема актуальная, и с ней надо бороться.

Проверка отображения сайта в разных браузерах

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

Как избежать проблем с браузерами

Единственный способ избежать проблем с браузерами – использовать кроссбраузерную верстку. В этом случае исходный код сайта обрабатывается таким образом, чтобы он примерно одинаково выглядел во всех программах всех версий.

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

Проще всего не самому проводить кроссбраузерную верстку, а поручить это верстальщику, т.к. у него больше опыта, он сделает это быстрее, а вы во многом можете ошибиться. Я надеюсь, эта статья открыла вам глаза на эту важную тему.