Проверка на кроссбраузерность: Как проверить отображение сайта в браузерах: инструкция

22.05.2021 alexxlab

Содержание

Проверка кроссбраузерности сайта — бесплатные инструменты для тестирования

Вы можете просматривать сайт, используя последнюю версию Firefox, и он будет выглядеть удивительно. А после этого на сайт может зайти посетитель, использующий Internet Explorer 9, и ресурс не только будет выглядеть ужасно, но еще и не будет работать должным образом. Угадайте, что тогда произойдет? Вы потеряете посетителя. Поэтому кроссбраузерность так важна:

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

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

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

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

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

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

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

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

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

Если вам нужно протестировать новейшие версии этих браузеров, то это бесплатно. Но если вы хотите проверить старые версии, за это взимается плата:

После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Данная публикация является переводом статьи «Ultimate Free Tools for Cross-Browser Testing» , подготовленная редакцией проекта.

Проверка кроссбраузерности сайта – обзор нескольких веб-сервисов

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

Ручная проверка

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

Далее можно попросить друзей и знакомых зайти на ваш сайт и прислать ваш скриншот. Для них это будет наверняка несложно. У кого-то стоит Opera, у другог — Mozilla, а третий вообще сидит на старом IE. Люди используют разные веб-обозреватели и если попросить их о небольшой услуге тестирования, то вы можете получить достаточно неплохой охват браузеров.

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

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

//browsershots.org/ — многие называют этот сайт лучшим бесплатным сервисом для проверки кроссбраузерности. На главной странице сразу же видно множество различных браузеров и их версий. Нужно указать галочками нужные и отправить все это на анализ. Сколько можно ждать результатов? Очень долго, иногда более получаса.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Рис. 1. Сайт позволяет бесплатно получить скриншоты из множества веб-обозревателей.

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

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

//crossbrowsertesting.com/ — особенность этого сервиса в том, что на нем нужно зарегистрироваться, прежде чем начинать тестирование. На самом деле в большинстве своем это платный сервис и им пользуются зарубежные веб-разработчики.

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

IETester – уже много раз я писал об этой программе, но в статье о проверке кроссбраузерности без нее просто никуда. Это бесплатная программа для windows. Скачав и установив ее можно свободно проверить внешний вид сайта в Internet Explorer 6-8.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Browserling.com – на этом сайте вы можете записаться в очередь, чтобы посмотреть на свой сайт в различных версиях IE, начиная от 5.5 и заканчивая 9. Есть возможность посмотреть и в других популярных веб-обозревателях. Как вы понимаете, желающих много и каждому дают всего 5 минут на тестирование.

Сервис хорош тем, что вы не просто видите скриншот, а можете покликать по веб-страничкам, действительно протестировав их. В общем, еще один неплохой бесплатный инструмент.

Multiple IE – это такой инструмент, который позволяет проверить шаблон в старейших версиях IE (3, 4, 5). Я не знаю, нужно ли это кому-то сегодня, но на всякий случай можно упомянуть и его.

Минусы использования веб-сервисов

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

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

Рис. 2. В crossbrowsertesting можно проверить сайт в более чем 900 браузерах!

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

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

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

Мониторинг кроссбраузерности является всего лишь одним из параметров, которые показывают качество вашего интернет-проекта. Читайте наш блог и получайте еще больше знаний о сайтостроении.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Проверка кроссбраузерности, кроссплатформенности и других ошибок

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

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

1. Ошибки кроссбраузерности, кроссплатформенности и ошибки тестирования. Часто бывает, что сайт делается без учета кроссбраузерности и тестируется только в одном браузере, а в остальных — один слой сайта наползает на другой. Если ресурс сделан в «резиновом» шаблоне, т.е. ширина сайта изменяется в зависимости от разрешения монитора, обязательно нужно проверить его в различных браузерах и разрешениях экрана. При низких разрешениях одни элементы могут наезжать на другие. Осуществить проверку кроссбраузерности можно с помощью специализированных сервисов, например, BrowserShots.org.

Кроссплатформенность — это способность сайта полноценно работать на всех устройствах и операционных системах, которые использует посетитель.

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

3. Ошибки в выпадающем меню. Распространенной ошибкой является всплывающее меню без задержки исчезновения. К примеру, пользователь навел курсор на один из пунктов бокового меню, и появился новый уровень меню; при попытке выбрать нужную ссылку из этого подменю оно исчезает. Пользователь, вероятно, повторит операцию несколько раз, но, не перейдя никуда в пределах сайта, уйдет с него. Другой технический момент, связанный с выпадающим меню, — большой список за пределами первого окна экрана. Это также усложняет выбор требуемого пункта и нарушает визуальную законченность сайта. Движение пользователя по ресурсу не должно быть затруднено, лишние действия и клики удаляют посетителя от совершения покупки.

4. Отсутствие основных пунктов меню в системе навигации. Например, отсутствие «хлебных крошек» затрудняет переход с нижнего уровня сайта на верхний. Пользователя также дезориентирует отсутствие указания на принадлежность страницы к определенному пункту меню.

5. Логотип не ведет на главную страницу. Логотип компании должен вести только на главную страницу. Этот нюанс построения сайта начинается с развития рунета и, в частности, поисковой системы Яндекс, где логотип всегда вел на главную страницу сайта. Если ссылка с логотипа ведет пользователя не на главную страницу, это может вызвать у него замешательство и даже раздражение. Также логотип, не являющийся ссылкой, создает для пользователей дополнительные трудности в навигации по сайту.

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

7. Главная страница выбивается из стилистики сайта или несет очень низкую смысловую нагрузку. Прием со «страницей входа» (на которой пользователь, например, выбирает язык или город) оправдан только для крупных, широко известных компаний. Попадая на ресурс компании BMW пользователь не задается вопросом, чем занимается данная компания. Попадая же на малоинформативную входную страницу неизвестной фирмы, пользователь, не получив сведений о направлениях работы этой организации, покидает сайт. Главная страница должна содержать графический и текстовый контент, позволяющий посетителю сайта понять направление деятельности компании.

8. Неграмотное оформление страницы 404 ошибки. Если пользователь случайно переходит на страницу с несуществующим URL, он видит страницу 404 ошибки. При попадании на нее посетитель должен сразу понять, что он находится в несуществующей части сайта; чем быстрее произойдет данная идентификация, тем лучше. Яндекс рекомендует ограничиться информацией о том, что данная страница не существует, и предложить пользователю перейти на главную страницу, не размещая подробное меню и множество баннеров. Чтобы пользователь понимал, что он не покинул ресурс, рекомендуется на странице 404 ошибки также добавить логотип компании.

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

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

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

Вернуться назад: Юзабилити сайтаЧитать далее: Ошибки в дизайне сайта

Кроссбраузерность сайта

Что такое кроссбраузерность сайта, почему одно из обязательных требований заказчика к разработке веб-сайта — это кроссбраузерность и как верстальщику не облажаться перед заказчиком или работодателем?

Нам известно, что браузеры интерпретируют HTML/CSS/JS код и показывают его пользователю в виде красивого веб-сайта. Некие посредники между машиной и человеком. Однако, есть одна проблема, которая осложняет жизнь верстальщика – это то, что этих браузеров много и разработаны они на разных движках, в разных компаниях. Следовательно, не могут отображать сайты одинаково.

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

После того, как сайт сверстан и протестирован в любимом браузере верстальщика – работа ещё не закончена. Заказчик сайта и его посетители, скорее всего будут открывать этот сайт в других браузерах.

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

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

На фрилансе, за верстку под старые браузеры, верстальщик берет дополнительные деньги – как за выполнение нестандартной задачи.

Этапы проверки кроссбраузерности

1) Проверка на валидность HTML кода

Валидная верстка должна соответствовать стандартам W3C. Копируете HTML код страницы и вставляете в поле формы на сайте https://validator.w3.org. Для проверки всего сайта, который уже размещен в интернете, вставляете URL сайта в адресную строку и нажимаете кнопку Check. Надпись на зеленом фоне: Document checking completed. No errors or warnings to show. – говорит о том, что код валиден.

Если код содержит ошибки, то сервис покажет, какие строки кода надо исправить.

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

2) Расставляем вендорные префиксы

Приведу список некоторых префиксов для наиболее распространенных браузеров.

-o- — префикс для браузера Opera
-moz- — префикс для браузеров из семейства Mozilla
-ms — префикс для Internet Explorer
-webkit- — префикс для браузеров Safari и Chrome

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


display: -webkit-box;

display: -ms-flexbox;

display: flex;

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

autoprefixer для редактора кода или прогнать код через онлайн-сервис autoprefixer.github.io.

3) Проверка кроссбраузерности

Алгоритм действий для верстальщика, работающего на фрилансе или в небольшой веб-студии. Узнаем, какие браузеры популярны на текущий момент по данным глобальной статистики и выписываем их.

https://caniuse.com/usage-table

Google Chrome
Mozilla Firefox
Internet Explorer 11
Microsoft Edge
Safari
Opera

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

http://browsershots.org
http://netrenderer.com

4) Как исправить проблемы с отображением сайта?

Эта часть тестирования на кроссбраузерность, пожалуй — самая сложная. Если поджимают сроки и уже нет времени на исправление багов или не хватает опыта, то лучше купить эту услугу на фриланс-бирже. Чаще всего проблемы с некорректным отображением сайта, встречаются в старых версиях IE, у пользователей, которые сидят на Windows XP.

Заключение

Никогда не будет лишним, проверить сайт на кроссбраузерность как вручную, так и через специальные сервисы.

Если сайт где-то неправильно отображается, то проверьте на Can I use подозрительное CSS свойство и посмотрите, все известные баги (Known issues), связанные с ним, ещё очень много полезного можете подчерпнуть из моего видео-курса «Вёрстка сайта с нуля 2.0».

Создано 21.06.2019 10:07:11
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

14 инструментов для проверки кроссбраузерности сайта

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

Бесплатная проверка на кроссбраузерность

Adobe BrowserLab

Adobe BrowserLab — это бесплатный инструмент, который позволяет протестировать ваш проект в различных версиях Chrome, Safari, IE и Firefox.

Он предоставляет несколько способов просмотра страниц, включая полно экранный обзор и визуальное сравнение разных вариантов. Сервис может получать динамические страницы через сеть, или его можно использовать локально через Firebug или Adobe Dreamweaver CS5. Также допускается определять комбинацию наборов браузеров, если вам не нужно тестировать проект в очень старых версиях.

Browsershots

Browsershots — вероятно наиболее полный бесплатный инструмент для тестирования, доступный в настоящее время. Он включает варианты браузеров для Linux, Windows и BSD. На нем также можно найти браузеры, о которых вы могли и не знать (например, Galeon, Iceape, Kazehakase и Epiphany). По умолчанию Browsershots проводит проверки на последних версиях браузеров, но доступны и старые варианты.

Чем больше браузеров будет определено для проверки, тем больше времени уйдет на подготовку результатов. Данный факт надо учитывать при выборе набора браузеров.

SuperPreview

SuperPreview является предложением Microsoft в области кросс браузерной проверки (и он совместим только с Windows). Инструмент позволяет определять набор браузеров для проведения тестов. Он работает с любым браузером, установленным на вашей системе (механизм вывода IE6 встроен в него). Данный факт является причиной его быстрой работы (не нужно ждать загрузки или окончания обработки на удаленном сервисе), но и ограничивает набор доступных браузеров для сравнения.

SuperPreview является бесплатным инструментом и планируется как часть Expression Web. В онлайн версии имеется поддержка Chrome, Safari (Mac) 4+5, Firefox 3+4. Также можно использовать интерактивный режим для веб сайтов, которые требуют регистрации перед выводом страниц, которые надо проверить. Есть инструмент отладки для DOM. К сожалению, отсутствует поддержка Opera, даже если она установлена локально.

Lunascape

Lunascape — это браузер с тройным механизмом вывода для Windows.

Он использует Trident (IE), Gecko (Firefox) и Webkit (Chrome и Safari). Поэтому вы можете увидеть, как выглядит ваш сайт во всех трех вариантах в виде визуального сравнения. Хотя Lunascape не является традиционным инструментом тестирования, тем не менее, он будет очень полезен для дизайнеров и разработчиков. Его основным преимуществом является моментальный просмотр страниц сайта во всех трех вариантах механизмов вывода. Lunascape также поддерживает расширения и плагины Firefox, так что вы можете использовать Firebug для диагностики проблем совместимости.

IETester

IETester — браузер для Windows, который позволяет использовать механизмы вывода и JavaScript для просмотра сайта в версиях IE10, IE9, IE8, IE7, IE6 и IE5.5. Для работы инструмента требуется Windows 7, Windows Vista или Windows XP с IE7.

IE NetRenderer

IE NetRenderer позволяет проверить совместимость с сайта с Internet Explorer версий от 5.5 до 9. Вам придется проверять каждую версию индивидуально.

Spoon

Spoon — сервис для имитации приложений. На нем доступны различные версии Firefox, Chrome, Opera и Safari для пользователей Windows. Недостаток: Internet Explorer поддерживается механизмом виртуализации Spoon, но по требованию Microsoft данный браузер исключен из вариантов тестирования..

Browsera (бесплатная и коммерческая версии)

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

В бесплатном варианте доступен ограниченный набор браузеров и низкое разрешение снимков экрана. Коммерческая версия стоит $39 за один проект и от $49 до $99 за месячную подписку, и в нем доступны большой список браузеров, высокое разрешение снимков экрана и проверка страниц, требующих регистрации пользователя.

Browserling (бесплатная и коммерческая версии)

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

Бесплатная версия имеет ограничение по времени сессии в размере 5 минут, а коммерческий вариант без ограничений стоит $20в месяц.

Коммерческие инструменты для тестирования

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

Mogotest

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

Доступны несколько тарифных планов. Персональный тарифный план стоит $15 в месяц и допускает проверки до 50 страниц на трех сайтах. Тарифный план для фрилансеров стоит $45 в месяц и допускает проверки на 10 сайтах и до 350 страниц. Групповой тарифный план стоит от $125 в месяц до $4499+ за неограниченный доступ.

Cloud Testing

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

BrowserCam

BrowserCam включает инструменты тестирования для версий браузеров настольных систем и мобильных устройств (что отсутствует во многих других инструментах проверки). Также доступен удаленный доступ для реальной проверки в конфигурациях Windows, Linux и OS X. Возможен перехват email для проверки HTML, RTF и TXT версий писем.

Стоимость использования BrowserCam начинается от $19.95 за один сервис в день и заканчивается $999.95 за годовую подписку на полный комплект услуг.

Multi-Browser Viewer

Multi-Browser Viewer выполняет проверки для браузеров настольных систем и мобильных устройств. Он включает 26 виртуализированных веб браузеров, 5 браузеров для мобильных устройств (включая iPhone и iPad) и 61 вариант браузеров для снимков экрана (вы сможете видеть, как сайт выглядит, но взаимодействовать с ним нельзя). Также доступны пять языков: английский, испанский, немецкий, русский и французский.

Multi-Browser Viewer стоит $139.95 за однопользовательскую лицензию, включая годовую поддержку. Обновления после года использования стоят $99.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+	Нет IE	Да	Нет	Бесплатно
Browsera	9	IE6+	Нет	Да	Бесплатно – $99/месяц
Browserling	9	IE5.5+	Нет	Нет	Бесплатно – $20/месяц
Mogotest	7+	IE6+	Нет	Да	$15 – $4,499/месяц
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/месяц

Заключение

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

Источник урока: www.smashingmagazine.com/2011/08/07/a-dozen-cross-browser-testing-tools/
Перевел: Сергей Фастунов

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

Вы можете просматривать сайт, используя последнюю версию Firefox , и он будет выглядеть удивительно. А после этого на сайт может зайти посетитель, использующий Internet Explorer 9 , и ресурс не только будет выглядеть ужасно, но еще и не будет работать должным образом. Угадайте, что тогда произойдет? Вы потеряете посетителя. Поэтому кроссбраузерность так важна:

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

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

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

Firefox , Internet Explorer , Safari , Chrome и Opera обычно можно без проблем загрузить и установить. Но если у вас нет такой возможности, то существует множество веб-инструментов, которые имитируют эти браузеры.

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

Browsershots

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

Spoon Browser Sandbox

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

После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.

Viewlike.us

IE NetRenderer

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

Browsera

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

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

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

Какой из инструментов использовать?

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

Используете ли вы уже эти инструменты?

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

Данная публикация представляет собой перевод статьи « Ultimate Free Tools for Cross-Browser Testing » , подготовленной дружной командой проекта Интернет-технологии.ру

Привет читатели seoslim.ru! Ничего загадочного в слове “кроссбраузерность” нет, часто новички задаются вопросом, что это за понятие.

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

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

Что такое кроссбраузерность

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

Происходит такое довольно часто, так как алгоритмы обработки каскадных таблиц css, а также html-кодов в них могут значительно отличаться друг от друга.

Дело в том, что вы не можете точно знать, каким браузером и операционной системой будет пользоваться тот и иной посетитель ресурса.

Значит, для грамотного отображения того или иного элемента необходимо произвести проверку.

Начинающие разработчики могут сделать ручной тест, на наиболее используемых Опере, Мозилле, Гугл Хром, IE.

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

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

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

Сервисы для тестирования сайта в браузерах

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

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

Browsershots Итак, начнем с наиболее доступных сайтов. По праву считается, что browsershots.org в этом списке можно поставить на первое место среди бесплатных вариантов.

Сразу при переходе у вас открыта вкладка “Browser Compatibility Test”, это и есть проверка на кроссбраузерность.

Для этого в строку необходимо ввести url вашего сайта и нажать на кнопку “Submit”:

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

После нажатия на кнопку “Submit” вы встанете в очередь на проверку, появится вот такое сообщение:

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

Дополнительно вы можете получить приоритет на час, если нажмете на “Expire in 60 minutes for Priority Users”.

Параллельно вы увидите, как появляются скриншоты уже проверенных версий, если нажать на “Details”, можно проследить текущее состояние в деталях, а также сколько потрачено минут на каждую:

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

Также совершенно спокойно вы можете их скачать и держать у себя на заметке.

Viewlike Следующий сайт, который можно однозначно порекомендовать — www.viewlike.us . С помощью сервиса вы также сможете оценить успешность юзабилити тестируемого ресурса и проверить скорость его работы.

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

Вводим адрес в специальную строку, нажимаем “Test now!”:

По результатам тестирования вы получите рекомендации по поводу используемых плагинов, читаемости размера шрифта, а полученные скриншоты будут предоставлены в различных разрешениях.

CrossBrowserTesting Возьмем следующий сервис, который предназначен для обнаружения неточностей работы вашего сайта на базе любых операционных систем и браузеров, в том числе проверка может быть выполнена для устройств на платформе Android и iOS.

Заходим на страницу crossbrowsertesting.com , небольшая сложность здесь в том, что для использования возможностей сервиса нужно зарегистрироваться, а для начала нажмите “Start Your Free Trial”:

Для этого требуется указать свой адрес электронной почты и новый пароль, нажать “Create Your Free Account”:

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

При этом в использование дается ограниченное количество времени тестирования — всего 60 минут.

Но начнем проверку, сделать это просто — после подтверждения аккаунта вы оказываетесь в разделе “Start a Screenshot Test”.

Проводится она на базе Windows и Mac, браузеры Chrome, FireFox, IE, Opera, Safari, анализ в мобильной версии предоставляется в отдельной вкладке.

В строку вводим адрес нужного вам сайта, как и в предыдущих случаях:

Всего потребовалось порядка 2-3 минут для анализа, теперь можно подробно увидеть полученные скриншоты, а нажав на “Layout Differences”, вы увидите различия в макете, которые обнаружила система.

Больше всего разногласий заметно при исследовании браузера Internet Explorer:

Все полученные скриншоты доступны для скачивания, для этого нажмите “Download” в верхнем правом углу, материалы сохраняться в формате .zip.

А для подробного анализа воспользуйтесь указанной ссылкой под картинкой — “Layout Differences”, при переходе становится доступен подробный анализ элементов:

Итак, сервис прост и удобен в использовании, но, к сожалению, бесплатен только на недельный период.

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

Quirktools Довольно интересный сервис по адресу quirktools.com , не требуется регистрации или оплаты каких-либо функций.

Перед вами просто строка, куда необходимо ввести адрес:

Фактически это средство для эмуляции большого количества устройств, разрешения могут подбираться по ходу:

Ссылка на скриншот с текущим разрешением доступна, если нажать на крайний правый значок в строке инструментов.

Browserstack Если ничего из перечисленного выше вам не понравилось, попробуйте перейти по ссылке www.browserstack.com и поработать здесь, вводим адрес:

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

Нажимаю “Free Trial”, ввожу адрес электронной почты и пароль, все как обычно.

После регистрации выбираем вкладку “Live”, открывается менюшка со всеми доступными платформами и браузерами.

То, что выделено ярким цветом, доступно для бесплатной версии, учтите, что всего на тестирование дается 30 минут.

Например, выбираю браузер Chrome, загружается программа последней версии:

Открывается окно с дублирующей строкой для url, вводим адрес сайта сюда:

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

Browserling Еще один вариант — www.browserling.com , удобен тем, что сразу есть возможность выбрать из выпадающего списка необходимую для тестирования операционную систему, браузер и его версию, далее кликнуть на “Test now!”:

Интересно, что для проведения каких-либо действий дается ровно три минуты (таймер вверху слева), есть интересные инструменты, например, создание скриншотов (Screenshots).

Для смены браузера и его версии будет достаточно нажать на значок (в данном случае Chrome), а когда все готово к новой проверке, запустите ее кнопкой “Run”.

Turbo Следующий сервис, на который можно обратить внимание, находится на сайте turbo.net в подразделе Browser Sandbox.

Достаточно удобно все устроено — для прохождения теста вы сразу выбираете конкретную платформу и версию браузера, для проверки нужно нажать “Run”.

При этом доступны только те, что окрашены в синий цвет, для некоторых требуется купить доступ к аккаунту, хотя того, что есть, вполне достаточно.

Предварительно нужно зарегистрироваться (можно сначала нажать, а потом уже сделать это).

Ввожу новый логин и адрес электронной почты:

После введения данных тут же будет создан аккаунт, вы будете перенаправлены на страницу, где в строку, дублирующую браузерную, нужно ввести url интересующего вас сайта.

Те, кто хочет постоянно пользоваться сервисом, стоит скачать прилагающееся приложение, точнее расширение, для этого нажмите на “Install Turbo.net” в нижней части страницы.

Browsera Один из иностранных ресурсов — www.browsera.com , ничего сложного в работе с ним нет. Для начала работы нажмите соответствующую команду на главной странице:

Далее потребуется легкая регистрация — указываете самые простые данные о себе, почта может быть любая, не обязательно с доменом .com.

Для тестирования задаете все необходимые параметры, самое главное — адрес страницы, нажимаете “Run Test”.

Минус в том, что после этого сразу проверку пройти нельзя, вы будете поставлены в очередь, а далее сможете следить за ходом выполнения:

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

Еще один конкурент — saucelabs.com , зайдите и сюда.
А тем, кого интересует читабельность сайта и прочих характеристики относительно только IE, советую обратиться к ресурсу netrenderer.com .

Как оказывается, совсем не обязательно пользоваться платными источниками, есть большое количество из них, которые можно назвать условно-платными.

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

Может быть, в будущем все веб браузеры будут выводить HTML/CSS код одинаково и в соответствии со стандартами. Тогда кросс браузерная проверка станет не нужна. Но такие рассуждения все еще остаются фантастикой, и проверка вашего проекта в современных и старых версиях браузеров необходима.

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

Бесплатная проверка на кросс браузерность

Adobe BrowserLab

Adobe BrowserLab – это бесплатный инструмент, который позволяет протестировать ваш проект в различных версиях Chrome, Safari, IE и Firefox. Он предоставляет несколько способов просмотра страниц, включая полно экранный обзор и визуальное сравнение разных вариантов. Сервис может получать динамические страницы через сеть, или его можно использовать локально через Firebug или Adobe Dreamweaver CS5. Также допускается определять комбинацию наборов браузеров, если вам не нужно тестировать проект в очень старых версиях.

Browsershots

Browsershots – вероятно наиболее полный бесплатный инструмент для тестирования, доступный в настоящее время. Он включает варианты браузеров для Linux, Windows и BSD. На нем также можно найти браузеры, о которых вы могли и не знать (например, Galeon, Iceape, Kazehakase и Epiphany). По умолчанию Browsershots проводит проверки на последних версиях браузеров, но доступны и старые варианты.

SuperPreview

Lunascape

Lunascape – это браузер с тройным механизмом вывода для Windows. Он использует Trident (IE), Gecko (Firefox) и Webkit (Chrome и Safari). Поэтому вы можете увидеть, как выглядит ваш сайт во всех трех вариантах в виде визуального сравнения. Хотя Lunascape не является традиционным инструментом тестирования, тем не менее, он будет очень полезен для дизайнеров и разработчиков. Его основным преимуществом является моментальный просмотр страниц сайта во всех трех вариантах механизмов вывода. Lunascape также поддерживает расширения и плагины Firefox, так что вы можете использовать Firebug для диагностики проблем совместимости.

IETester

IETester – браузер для Windows, который позволяет использовать механизмы вывода и JavaScript для просмотра сайта в версиях IE10, IE9, IE8, IE7, IE6 и IE5.5. Для работы инструмента требуется Windows 7, Windows Vista или Windows XP с IE7.

IE NetRenderer

Spoon

Spoon – сервис для имитации приложений. На нем доступны различные версии Firefox, Chrome, Opera и Safari для пользователей Windows. Недостаток: Internet Explorer поддерживается механизмом виртуализации Spoon, но по требованию Microsoft данный браузер исключен из вариантов тестирования..

Browsera (бесплатная и коммерческая версии)

Browserling (бесплатная и коммерческая версии)

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

Коммерческие инструменты для тестирования

Mogotest

Cloud Testing

BrowserCam

Multi-Browser Viewer

Сравнение инструментов

Инструмент	Количество поддерживаемых браузеров	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+	Нет IE	Да	Нет	Бесплатно
Browsera	9	IE6+	Нет	Да	Бесплатно – $99/месяц
Browserling	9	IE5.5+	Нет	Нет	Бесплатно – $20/месяц
Mogotest	7+	IE6+	Нет	Да	$15 – $4,499/месяц
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/месяц

Заключение

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.smashingmagazine.com/2011/08/07/a-dozen-cross-browser-testing-tools/
Перевел: Сергей Фастунов
Урок создан: 9 Августа 2011
Просмотров: 139990
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг – это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

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

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Инструменты для тестирования верстки — TestMatick

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

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

Думается, а что тут может быть сложного: один рисует, а второй пишет код. И зачем вообще это тестировать?

Логика тестирования верстки

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

И тут на сцену выходит процесс тестирования верстки, который можно разделить на несколько составных частей:

Тестирование визуальной части;
Проверка кроссбраузерности и кроссплатформености сайта.

Возникает вопрос: важно ли тестировать внешнее оформление сайта? Это же не программная часть, и даже не блок безопасности.

Почему верстальщик самостоятельно не может сравнивать дизайн с создаваемым им макетом? Конечно, может!

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

Как правильно тестировать отображение страниц сайта?

У любого сотрудника отдела QA должен быть внушительный набор вспомогательных инструментов, критериев и стайлгайдов (специальные инструкции об общепринятых кнопках и надписях на сайтах). Опираясь именно на эту базу, можно в кратчайшие сроки протестировать продукт от «А» до «Я».

Итак, в первую очередь проверяем внешний вид страницы. В первую очередь стоит провести сравнение с макетом.

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

Расширение PerfectPixel

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

Расширение Page Ruler

После того, как мы протестировали общее отображение картинки, можно перейти к работе с деталями.

Понять, тот ли используется шрифт, нам поможет программа What Font, проверить многообразие цветов на сайте – Color Zilla, убедиться, что в текстовых блоках нет орфографических ошибок – Spell Checker или Орфограф Артемия Лебедева.

Проверка адаптивности страницы

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

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

Если желаете доверить данную проверку программе, обратите внимание на расширение Window Resizer. В данном расширении есть множество размеров окон ПК, ноутбуков и смартфонов.

Вы также можете самостоятельно внести нужные пропорции или удалить ненужные конфигурации через меню настроек.

Расширение Windows Resizer

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

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

Визуально проверяем правильное отображение всех доступных навигационных элементов:

Есть ли курсор мыши на всех кликабельных элементах?
Его отсутствие на некликабельных;
Появление курсора и возможности ввести символы для ввода текста;
Отображение фавикона.

Проверка кроссбраузерности

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

В обязательном порядке при тестировании верстки стоит проверить отображение страниц хотя бы в наиболее популярных браузерах. Традиционно вид картинки в популярных браузерах не сильно отличается, если конечно речь не идет о всем известном IE.
На скриншоте показано различие одной и той же формы входа на Facebook в версиях от 8 до 11 IE.

Форма входа на Facebook в версиях от 8 до 11 IE

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

Кроссбраузерное тестирование

Browsershots

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

В системе Browsershots встроено большое число современных браузеров многих версий, где можно вручную подбирать размер экрана, насыщенность цветовой гаммы, включение или отключение JavaScript, Java и даже Flash.

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

Browsera

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

На выбор предоставляется 30-дневная бесплатная версия и платный функционал с огромным набором параметров и возможностей.

BrowserStack

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

Есть функции тестирования прямиком с локального ПК, либо же составление набора скриншотов проверяемой страницы (до 25 снимков). Бесплатный тарифный план ограничен временем для совершения проверки, а платные предлагают разные уровни функциональной доступности в зависимости от стоимости пакета.

Копаем дальше

Можно ли уже говорить, что мы провели полное тестирование? Нет!

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

Простая гиперссылка на контент сайта может устареть или поменяться, но нам нужно точно знать, что на момент релиза она работает. Для этих целей мы используем приложение Black Widow.

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

Дополнительно нужно помнить, что любая веб-страница должна отвечать таким стандартам:

Обязательна кодировка в формате UTF-8;
Стандарт HTML;
Стандарт CSS.

Первый пункт легко проверяется с помощью клавиши F12 (Elements – для браузеров Chrome).

А для проверки правильности написания кода HTML и CSS можно использовать сервис https://www.w3.org . Вам достаточно написать название сайта или определенной страны и запустить проверку.

Все, что нужно (желательно) исправить будет подсвечено словом ERROR.

Дополнительный набор для проверки

Если временные рамки проекта позволяют еще более детально с ним «покопаться», углубившись в программный код, можно проверить работоспособность еще некоторых параметров (при обязательном условии того, чтобы они реально востребованы при создании данного сайта):

Веб-аналитика (Яндекс метрика, Гугл аналитика). Можно проверить само наличие прописанного счетчика и работоспособность ID счетчика;
СЕО. В данном случае нам интересные тэги. Каждая страница сайта, которая индексируется роботом-поисковиком, должна обладать тэгами «keywords» и «description». А те страницы, которые закрыты от индексации, должны обладать тэгом «noindex»;
Сопряжение с социальными сетями. Для проверки работоспособности перепостов, лайков и отслеживания ответов, разработчики прописывают в программном коде специальный метод. Задача сотрудника QA отдела – найти данный метод и проверить его функциональную работоспособность. К примеру, внешнее исполнение кнопок для шаринга должен быть легко узнаваемымo и визуально отличаться от других элементов социальных сетей. Другая задача: проверить правильное появление информации о группе или пользователе, когда мы ее выгружаем в выбранную социальную сеть (пост должен выглядеть постом, а картинка – картинкой).

В данном обзоре мы кратко рассмотрели всю важность тестирования верстки, а также некоторые методы данной проверки (логику построения действий). Абсолютно все они – и простые и немного сложные – послужат верную службу при тестировании web-приложений и позволят создавать полезный продукт.

Цены и планы на

LambdaTest | Попробуйте тарифный план Freemium на 60 минут в месяц

Неограниченные минуты тестирования	6 занятий по 10 минут каждое
Неограниченное количество скриншотов	10 сеансов
Неограниченные отзывчивые тесты	10 сеансов
Неограниченный доступ к браузеру LT	30 минут ежедневного доступа к браузеру LT
Коллективное сотрудничество
Локальное тестирование
Умное визуальное тестирование
Доступ ко всем браузерам и ОС	Нет, браузеры и ОС ограничены
Планировщик снимков экрана	1 Запланированный тест
Снимок экрана API	—
Тестирование геолокации	—
Скриншоты за страницей входа	—
Неограниченная веб-автоматизация с помощью Selenium	Первые 100 минут бесплатно	Первые 100 минут бесплатно
Неограниченная автоматизация мобильного Интернета	—	—	—
Увеличенная длина очереди	—	—
Экспертная поддержка

Кроссбраузерное тестирование

Cypress имеет возможность запускать тесты в нескольких браузерах.В настоящее время Cypress поддерживает браузеры семейства Chrome (включая Microsoft Edge на базе Electron и Chromium) и Firefox.

За исключением Electron, любой браузер, в котором вы хотите запускать тесты Cypress, должен быть установлен в вашей локальной системе или среде CI. Полный список обнаруженных браузеров отображается в меню выбора браузера в Test Runner.

Нужный браузер также можно указать с помощью флага --browser при использовании команды run для запуска Cypress.Например, для запуска тестов Cypress в Firefox:

  cypress run - браузер firefox

Чтобы сделать запуск Cypress в определенном браузере еще более удобным, можно использовать скрипты npm как ярлык:

  "scripts": {
  "cy: run: chrome": "cypress run --browser chrome",
  "cy: run: firefox": "cypress run --browser firefox"
}

Стратегии непрерывной интеграции

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

Стратегии

CI будут продемонстрированы с использованием Circle CI Cypress Orb для его краткой и удобочитаемой конфигурации, но те же концепции применимы к большинству поставщиков CI.

В примерах конфигурации CI в этом руководстве используются образы Cypress Docker для подготовки тестовых сред с желаемыми версиями Node, Chrome и Firefox.

Периодическая основа

Обычно желательно запускать тесты с каждой нажатой фиксацией, но это может быть необязательно для всех браузеров. Например, мы можем запускать тесты в Chrome для каждой фиксации, но запускать Firefox только на периодической основе (то есть каждую ночь). Периодичность будет зависеть от расписания выпусков вашего проекта, поэтому рассмотрите периодичность тестовых запусков, соответствующую графику выпусков вашего проекта.

Обычно поставщики CI позволяют планировать задания CI с помощью выражений cron.Например, выражение 0 0 * * * переводится как «каждый день в полночь» или «каждую ночь». Доступны полезные онлайн-утилиты для помощи в создании и переводе выражений cron.

В следующем примере показано ночное расписание CI для производственной среды (, основная ветка ) для Firefox:

  версия: 2.1
сферы:
  кипарис: cypress-io / [адрес электронной почты защищен]
рабочие процессы:
  по ночам:
    триггеры:
      - расписание:
          cron: '0 0 * * *'
          фильтры:
            ветви:
              Только:
                - владелец
    вакансии:
      - кипарисовик / бег:
          исполнитель: кипарис / браузеры-chrome73-ff68
          браузер: firefox
          начало: npm start
          ожидание: http: // localhost: 3000

Развертывание производства

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

В следующем примере демонстрируется выполнение тестов Firefox только тогда, когда коммиты объединены в определенную ветку (в данном случае разработка ветки ), поэтому любые потенциальные проблемы Firefox могут быть обнаружены до производственного выпуска:

  версия: 2.1
сферы:
  кипарис: cypress-io / [адрес электронной почты защищен]
рабочие процессы:
  test_develop:
    вакансии:
      - фильтры:
        ветви:
          Только:
            - развивать
      - кипарисовик / бег:
          исполнитель: кипарис / браузеры-chrome73-ff68
          браузер: firefox
          начало: npm start
          ожидание: http: // localhost: 3000

Подмножество тестов

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

В приведенном ниже примере задание Chrome cypress / run запускает всех тестов для Chrome и сообщает результаты в Cypress Dashboard с помощью (группы) с именем chrome .

Задание Firefox cypress / run запускает подмножество тестов, определенных в параметре spec , для браузера Firefox и сообщает результаты на Cypress Dashboard в группе firefox-critical-path .

Примечание: Имя под каждым заданием cypress / run , которое будет отображаться в пользовательском интерфейсе рабочего процесса Circle CI, чтобы различать задания.

  версия: 2.1
сферы:
  кипарис: cypress-io / [адрес электронной почты защищен]
рабочие процессы:
  строить:
    вакансии:
      - кипарисовик / инсталляция
      - кипарисовик / бег:
          имя: Chrome
          требует:
            - кипарисовик / инсталляция
          исполнитель: кипарис / браузеры-chrome73-ff68
          начало: npm start
          ожидание: http: // localhost: 3000
          запись: правда
          группа: хром
          браузер: хром
      - кипарисовик / бег:
          имя: Firefox
          требует:
            - кипарисовик / инсталляция
          исполнитель: кипарис / браузеры-chrome73-ff68
          начало: npm start
          ожидание: http: // localhost: 3000
          запись: правда
          группа: firefox-критический-путь
          браузер: firefox
          spec: 'кипарис / интеграция / регистрация.spec.js, кипарис / интеграция / login.spec.js '

Распараллеливание для каждого браузера

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

Нет необходимости запускать все браузеры на одном уровне распараллеливания. В приведенном ниже примере выделенное задание Chrome cypress / run запускает всех тестов параллельно на 4 машинах против Chrome и сообщает результаты в Cypress Dashboard под именем группы chrome .Выделенное задание Firefox cypress / run запускает подмножества тестов параллельно на 2 машинах , определенных параметром spec , с браузером Firefox и сообщает результаты на Cypress Dashboard в группе с именем firefox .

  версия: 2.1
сферы:
  кипарис: cypress-io / [адрес электронной почты защищен]
рабочие процессы:
  строить:
    вакансии:
      - кипарисовик / инсталляция
      - кипарисовик / бег:
          имя: Chrome
          требует:
            - кипарисовик / инсталляция
          исполнитель: кипарис / браузеры-chrome73-ff68
          запись: правда
          начало: npm start
          ожидание: http: // localhost: 3000
          параллель: правда
          параллельность: 4
          группа: хром
          браузер: хром
      - кипарисовик / бег:
          имя: Firefox
          требует:
            - кипарисовик / инсталляция
          исполнитель: кипарис / браузеры-chrome73-ff68
          запись: правда
          начало: npm start
          ожидание: http: // localhost: 3000
          параллель: правда
          параллельность: 2
          группа: firefox
          браузер: firefox
          spec: 'кипарис / интеграция / приложение.spec.js, кипарис / интеграция / login.spec.js, кипарис / интеграция / about.spec.js '

Выполнение определенных тестов в браузере

Могут быть случаи, когда может быть полезно запустить или проигнорировать один или несколько тестов в определенных браузерах. Например, продолжительность тестового прогона можно сократить, запустив дымовые тесты только против Chrome, а не Firefox. Этот тип детального выбора выполнения тестов зависит от типа тестов и уровня уверенности, которую эти конкретные тесты обеспечивают для всего проекта.

При рассмотрении вопроса об игнорировании или запуске определенного теста в данном браузере, оцените истинную потребность в запуске теста в нескольких браузерах.

Вы можете указать браузер для запуска или исключения, передав сопоставление набору или тесту в тестовой конфигурации. Браузер опция принимает те же аргументы, что и Cypress.isBrowser ().

 
it ('Загрузить расширение в Firefox', {browser: 'firefox'}, () => {
  cy.get ('# dl-extension'). should ('contain', 'Загрузить расширение Firefox')
})


описать ('пакет счастливого пути', {браузер: 'firefox'}, () => {
  Это('... ')
  Это('...')
  Это('...')
})



it ('Показывать предупреждение вне Chrome', {browser: '! chrome'}, () => {
  cy.get ('. browser-warning'). should (
    'содержать',
    "Для оптимального просмотра используйте браузер Chrome"
  )
})

См. Также

Что такое кроссбраузерное тестирование? — Определение из WhatIs.com

Кроссбраузерное тестирование, также называемое тестированием браузера, — это процесс обеспечения качества (QA), который проверяет, функционирует ли веб-приложение, сайт или страница так, как предназначено для конечных пользователей в нескольких браузерах и устройствах.

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

Планирование тестирования браузера
Существуют сотни версий настольных браузеров, а также мобильных браузеров для iOS и Android. Каждый браузер имеет разные уровни поддержки технологий, таких как языки программирования CSS или JavaScript.Кроссбраузерное тестирование направлено на выявление дефектов, которые могут негативно повлиять на то, как конечный пользователь просматривает или взаимодействует с сайтом или страницей.
Команда веб-разработчиков определяет приоритеты определенных аудиторий — и соответствующих браузеров, которые они ожидают от них использовать — на этапе планирования проекта. Команда может определить потенциальные проблемы до начала проекта на основе этих предпочтений. Точно так же он может определить, какие браузеры менее важны для тестирования, например устаревшие версии настольных браузеров.
Процесс кроссбраузерного тестирования
После того, как группа разработчиков создаст веб-приложение или сайт, специалисты по контролю качества могут оценить завершенный проект. Специалист по контролю качества или команда проверяют согласованность контента и макета, например, как отображаются шрифты и изображения, и работает ли адаптивный дизайн сайта, если применимо. Затем они проверяют удобство использования веб-приложения или сайта, например функции, интеграцию со сторонними службами, формы и сенсорный ввод для мобильных устройств или планшетов.Они также проверяют доступность, например наличие замещающего текста для изображений или скрытых субтитров для видео.
Специалист или команда QA могут использовать эти типы сред или визуальных элементов, в зависимости от варианта использования, для кросс-браузерного тестирования:
Снимки экрана, которые показывают, как веб-приложение или сайт отображается в данной версии браузера, но без функциональных возможностей;
Симуляторы, которые имитируют то, как конечный пользователь будет видеть приложение и взаимодействовать с ним, без фактического тестирования его на устройстве;
Live-тесты, которые используют виртуальные машины для создания удаленной вычислительной среды или реальные устройства для воспроизведения опыта конечного пользователя; и
Безголовые браузеры, которые позволяют кроссбраузерное тестирование через интерфейс командной строки, который удаляет графический интерфейс
Кроссбраузерное тестирование можно частично автоматизировать и включить в непрерывное тестирование для более быстрых или более точных результатов.Инструмент автоматизации тестирования браузера загружает сайт в несколько браузеров, а затем проверяет код в рабочем процессе непрерывного тестирования, когда он проходит необходимые тесты. Неудачный тест создает петлю обратной связи. Автоматизированные кросс-браузерные тесты часто полагаются на безголовые браузеры, которые позволяют проводить более быстрые тесты, поскольку не загружаются визуальные элементы.

Ознакомьтесь с некоторыми способами тестирования веб-сайтов в
различных браузерах.
Кроссбраузерные тесты предоставляют информацию, которая собирается вместе в цикле обратной связи, который разработчики используют для исправления сломанного или иного неудовлетворительного кода.Эта информация может включать платформу, которая вызвала неудачный тест, а также версию устройства и браузера.
Кроме того, группа разработчиков приложений может развернуть сайт или приложение для группы пользователей за пределами группы, чтобы включить реальный опыт конечных пользователей в цикл обратной связи с разработчиками.
Инструменты кроссбраузерного тестирования
Специалист или команда QA могут использовать различные инструменты для выполнения кросс-браузерных тестов. Эти инструменты могут создавать среды или визуальные элементы, перечисленные выше, и обеспечивать множество других функций, таких как сканирование сайта на предмет общих проблем с функциональностью, отзывы пользователей, совместная работа в группе и аналитика журналов.Некоторые инструменты и службы могут автоматизировать тесты как часть конвейера CI / CD, что сокращает время, необходимое разработчикам для внесения исправлений и операций для развертывания.
Доступны инструменты
, специально предназначенные для управления и выполнения кросс-браузерных тестов, такие как LambdaTest, BrowserStack, Browserling и CrossBrowserTesting. Несколько наборов инструментов включают в себя тестирование браузера среди своих функций, в том числе Sauce Labs, Selenium и Tricentis.
Некоторые настольные браузеры, такие как Chrome и Firefox, также включают встроенные эмуляторы, которые позволяют специалистам по обеспечению качества выполнять выборочные проверки без переключения на другой инструмент или браузер.
Инструмент автоматического кросс-браузерного тестирования | TestComplete
Закрыть
Начать тестЗавершить пробную версию
*
Страна: Пожалуйста, выберите … United StatesAfghanistanAland IslandsAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua и BarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelgiumBelizeBeninBermudaBhutanBolivia, многонациональное государство ofBosnia и HerzegovinaBotswanaBouvet IslandBrazilBritish Индийский океан TerritoryBrunei DarussalamBulgariaBurkina FasoBurundiCambodiaCameroonCape VerdeCayman IslandsCentral африканских RepublicChadChileChinaChristmas IslandCocos (Килинг) IslandsColombiaComorosCongo (Dem.Республика) Конго, Демократическая Республика theCook IslandsCosta RicaCote d’IvoireCroatiaCubaCyprusCzech RepublicDenmarkDjiboutiDominicaDominican RepublicEast TimorEcuadorEgyptEl SalvadorEquatorial GuineaEritreaEstoniaEthiopiaFalkland (Мальвинских) островах Фарерских IslandsFijiFinlandFranceFrench GuianaFrench PolynesiaFrench Южный TerritoriesGabonGambiaGeorgiaGermanyGhanaGibraltarGreeceGreenlandGrenadaGuadeloupeGuamGuatemalaGuernsey и AlderneyGuineaGuinea-BissauGuyanaHaitiHeard и McDonald IslandsHoly Престол (Ватикан) HondurasHong KongHungaryIcelandIndiaIndonesiaIran, Исламская Республика ofIraqIrelandIsland из ManIsraelItalyIvory ПобережьеЯмайка, Япония, Джерси, Иордания, Казахстан, Кения, Кирибати, Корея, Корейская Народно-Демократическая Республика, Корея, Республика Косово, Кувейт, Кыргызстан, Лаосская Народно-Демократическая Республика, Латвия, Ливан, Лесото, Либерия, Либия, Либия, Лихтенштейн, Литва, Люксембург, Либерия, Макао, Формула, Македония, Мальта, Мальта, Мальта, Мальта, Мальта, Мальта, Республика Македония, Мальта, Республика Македония, Мальта, Республика Македония, Республика Македония, Мальта, Республика Македония iusMayotteMexicoMicronesia, Федеративные Штаты ofMoldaviaMoldova, Республика ofMonacoMongoliaMontenegroMontserratMoroccoMozambiqueMyanmarNamibiaNauruNepalNetherlandsNetherlands AntillesNew CaledoniaNew ZealandNicaraguaNigerNigeriaNiueNorfolk IslandNorthern Mariana IslandsNorwayOmanPakistanPalauPalestine, Государственный ofPalestinian TerritoryPanamaPapua Нового GuineaParaguayPeruPhilippinesPitcairnPolandPortugalPuerto RicoQatarRepublic из DominicaReunionRomaniaRussian FederationRwandaSaint BarthelemySaint Елены, Вознесения и Тристан-да CunhaSaint Китса и NevisSaint LuciaSaint MartinSaint Пьер и MiquelonSaint Винсента и GrenadinesSamoaSan MarinoSao Тома и PrincipeSaudi ArabiaSenegalSerbiaSeychellesSierra LeoneSingaporeSlovakiaSloveniaSolomon Острова СомалиЮжная АфрикаЮжная Грузия и Южные Сандвичевы островаИспанияСри-ЛанкаСуданСуринамШпицберген и Ян-МайенСвазилендШвецияШвейцарияСирийская Арабская РеспубликаТайвань, Китайская провинцияТаджикистанТанзания, Объединенная РеспубликаТаиландTimor-LesteTogoToke lauТонгаТринидад и ТобагоТунисТурцияТуркменистанТуркс и острова КайкосТувалуУгандаУкраинаОбъединенные Арабские ЭмиратыВеликобританияМалые отдаленные острова СШАУругвайУзбекистанВануатуВатикан (Святой Престол) Венесуэла, Боливарианские острова, Вирджинские острова, Вирджиния, Виргинские острова, Вирджинские острова, Вирджинские острова, ВьетнамОстрова Сан-Уоллис и ФутунаЗападная СахараЙеменЗамбияЗимбабвеДругая страна обязательна
*
Состояние: Пожалуйста, выберите … AAAEAKALAPARAZCACOCTDCDEFLGAHIIAIDILINKSKYLAMAMDMEMIMNMOMSMTNCNDNENHNJNMNVNYOHOKORPARISCSDTNTXUTVAVTWAWIWVWY
*
Провинция: Пожалуйста, выберите … ABBCMBNBNLNSNTNUONPEQCSKYTПровинция требуется
Отправляя эту форму, вы соглашаетесь с нашими Условиями использования и Политикой конфиденциальности
Кроссбраузерное тестирование, тестирование совместимости
Поскольку доступен широкий спектр веб-браузеров, конечные пользователи используют разные веб-браузеры для доступа к вашим веб-приложениям, теперь стало критически важным тестировать веб-приложения в нескольких браузерах.В разных браузерах клиентские компоненты, такие как JavaScript, запросы AJAX, апплеты, Flash, Flex и т. Д., Могут вести себя по-разному. Также для разных браузеров у вас может быть разная обработка запросов на стороне сервера в зависимости от пользовательского агента, полученного от клиентского браузера. Так что просто протестировать ваше веб-приложение в одном браузере недостаточно. Вам необходимо убедиться, что ваше веб-приложение отлично работает в нескольких браузерах. Кроссбраузерное тестирование — это процесс тестирования веб-приложений в нескольких браузерах.Кросс-браузерное тестирование включает в себя проверку совместимости вашего приложения с несколькими веб-браузерами и гарантирует, что ваше веб-приложение правильно работает в разных веб-браузерах. Кроссбраузерное тестирование включает в себя тестирование поведения вашего веб-приложения как на стороне клиента, так и на стороне сервера при доступе к нему с помощью различных веб-браузеров.
AppPerfect Web Test может помочь вам проверить функциональность вашего веб-приложения на стороне клиента в различных веб-браузерах.Это обеспечивает совместимость вашего приложения с различными веб-браузерами, такими как Internet Explorer, Firefox, Safari, Chrome и т. Д. Одновременно. Вы можете записывать тест в любом одном веб-браузере и запускать его в разных веб-браузерах, и таким образом тестировать поведение приложения в разных браузерах без необходимости перезаписывать тест в нескольких браузерах. Выполните следующие действия для функционального тестирования вашего приложения в различных веб-браузерах:
Когда вы закончите тест записи, выберите Project -> Properties.. пункт меню. Это запустит мастер свойств проекта.
Теперь мы настроим тест для выполнения 4 итераций, при этом каждая итерация будет выполняться в другом браузере. Чтобы настроить количество итераций, выберите шаг «Test Replaying» на левой панели мастера. Установите количество итераций на 4.
Теперь мы настроим каждую итерацию для воспроизведения в разных браузерах. На левой панели мастера выберите «Кроссбраузерное тестирование». Это покажет вкладку Cross Browser Testing, где мы можем настроить все браузеры, с которыми тест должен быть воспроизведен.По умолчанию мы видим, что Internet Explorer и iPhone уже настроены с% итерации равным 0. Мы добавим Firefox и Chrome в этот список и настроим% для каждого из них. Установите флажок «Выполнять итерации с разными браузерами в соответствии с процентным соотношением, указанным ниже».
Щелкните «Добавить новое устройство …», чтобы добавить в этот список другие браузеры / устройства. Откроется диалоговое окно «Добавить новое устройство». Вы можете либо Добавить новое устройство, либо выбрать из существующего списка браузеров. Если мы добавляем новое, нам нужно выбрать необходимое устройство (браузер / iPhone) в раскрывающемся списке «Устройство».Укажите путь для браузера в текстовом поле «Путь к браузеру». После завершения нажмите кнопку ОК.
Выполните те же действия, чтобы добавить другую конфигурацию браузера для Chrome. Когда мы закончим добавление браузеров, мы настроим процент итерации для каждого браузера. Мы настроили запуск теста с 4 итерациями, поэтому мы настроим% итераций как 25% для каждого браузера. Вы можете добавить iPhone / веб-браузер несколько раз, если вы хотите использовать один и тот же браузер / устройство несколько раз во время выполнения в разных итерациях.Устройства выбираются в том порядке, в котором они настроены в таблице ниже, и выбираются на основе процентов итераций, определенных для каждого устройства. Вы можете переупорядочить устройства с помощью кнопки перемещения вверх / вниз.
Мы закончили настройку теста на кроссбраузерность. Нажмите «Готово» и «Начать воспроизведение теста» с помощью пункта меню «Проект » -> «Выполнить ». Приложение будет запускать тест для 4 итераций, при этом каждая итерация будет работать с другим браузером в соответствии с конфигурацией, которую мы сделали для кроссбраузерного тестирования.
После завершения выполнения мы можем увидеть подробности выполнения для каждого браузера в представлении результатов теста:
AppPerfect Load Test может помочь вам протестировать поведение вашего веб-приложения на стороне сервера, когда к приложению обращаются из разных веб-браузеров. AppPerfect Load Test поддерживает нагрузочное тестирование веб-приложений с использованием протокола HTTP и может быть настроен для имитации HTTP-запросов из различных веб-браузеров. Веб-сервер идентифицирует каждого клиента с помощью строки User-Agent.Когда пользователи Интернета посещают веб-сайт, текстовая строка обычно отправляется в поле заголовка HTTP «User-Agent» для идентификации клиентского приложения. Веб-приложения часто включают код для определения версии клиента, чтобы настроить дизайн страницы, отправляемой в соответствии с полученной строкой пользовательского агента. Веб-приложение может быть спроектировано так, чтобы работать по-разному для мобильных пользователей Интернета и веб-браузеров на базе ПК. AppPerfect Load Test поддерживает выполнение HTTP-запросов с различными клиентами веб-браузера.
Чтобы настроить тест для кроссбраузерного тестирования, выберите Project -> Properties.. пункт меню. Это запустит мастер свойств проекта.
Выберите шаг «Кросс-браузерное тестирование». Здесь вы можете настроить% виртуальных пользователей, которые должны быть смоделированы для каждого клиента. Load Test обеспечивает поддержку Internet Explorer, Mozilla / Firefox, Chrome, Safari, Opera и iPhone. Этот список настраивается пользователем, и вы можете добавить в этот список любого нового пользовательского агента / клиента, используя кнопку справа. Чтобы имитировать запросы из разных веб-браузеров, вы можете отредактировать список, включив в него требуемый веб-браузер (-а) и указать соответствующий% виртуальных пользователей, которые следует использовать для имитации запросов из этого браузера.См. Изображение ниже, на котором показан тест, настроенный для 25% пользователей Chrome, 25% пользователей Internet Explorer, 25% пользователей Firefox и 25% пользователей iPhone.
Мы закончили настройку нагрузочного теста для кроссбраузерного тестирования. Выберите Project -> Run .. option для выполнения теста. После завершения выполнения мы можем увидеть подробности выполнения для каждого клиентского браузера в представлении результатов тестирования:
Кроссбраузерное визуальное тестирование
👍
Рассмотрено в этом документе
Преимущества кроссбраузерного визуального тестирования
Как работает кроссбраузерное визуальное тестирование в Percy
Включение визуального тестирования для Chrome и Firefox
Кроссбраузерное визуальное тестирование доступно всем клиентам Percy, чтобы без труда увидеть визуальные изменения в разных браузерах.
Percy в настоящее время поддерживает современные браузеры Chrome и Firefox, а поддержка других браузеров находится в разработке. Мы автоматически обрабатываем обновления браузера, управление версиями и обслуживание в нашей настраиваемой инфраструктуре рендеринга.
Поскольку Перси хранит исходный снимок DOM и ресурсы страницы, мы просто отображаем одну и ту же страницу в разных браузерах при создании снимков экрана. Это обрабатывается полностью на стороне сервера и не влияет на скорость выполнения вашего CI, поскольку весь рендеринг и сравнение выполняется в Percy, как обычно.
Когда включено кроссбраузерное тестирование, каждая сборка будет показывать отдельные скриншоты для каждого браузера, выделяя визуальные различия, характерные для каждого из них. Количество различий для каждого браузера будет отображаться над значком браузера в вашей сборке.
Имейте в виду, что время от времени вы будете видеть разные значения визуального различия для каждого браузера, потому что каждый визуализируется немного по-разному. Выявление этих визуальных регрессий, зависящих от браузера, является преимуществом кросс-браузерного тестирования.
По умолчанию и Firefox, и Chrome включены для каждого нового проекта.
Браузеры можно включить или отключить для любого отдельного проекта в любое время. Чтобы включить или отключить браузер, просто перейдите в Настройки проекта.
После включения браузера будет установлена новая базовая линия для последующей сборки проекта. Это означает, что снимки в первой сборке для этого браузера не будут иметь базового сравнения. Узнайте больше о нашей базовой логике выбора.
Если вы отключите браузер и решите снова включить его в будущем, мы обновим браузер до последней версии Перси, и последующая сборка создаст новую базовую версию для этого браузера.
Каждый браузер считается отдельным снимком экрана, который учитывается при ежемесячном использовании снимков экрана. Например, снимок вашей домашней страницы как в Chrome, так и в Firefox будет засчитан как 2 снимка экрана.
Понимание важности кроссбраузерного тестирования для современных веб-приложений
Когда дело доходит до использования веб-контента, есть больше возможностей, чем когда-либо, для получения уникального опыта. Однако при разработке программного обеспечения это легко не заметить. Самый большой виновник? Кроссбраузерное тестирование.
Легко понять, почему это происходит. Разработчик вкладывает много усилий в создание веб-приложения, которое отлично выглядит и функционирует для них. Но если вы не выполните базовый уровень кросс-браузерного тестирования, вы можете быть уверены только в том, что это работает на вашем компьютере.
Если вы используете Google Chrome на Mac, как вы можете узнать, что ваши тесты также проходят, когда кто-то использует Safari? А как насчет Internet Explorer или Firefox в Windows? Вы рассматривали iPhone или Android?
Кроссбраузерное тестирование — единственный способ узнать, воспринимают ли другие пользователи ваш веб-сайт так, как вы, и оно становится все более важным по мере развития технологий.
Что такое кроссбраузерное тестирование?
Кроссбраузерное тестирование — это именно то, на что это похоже — тестирование веб-приложения в браузерах, операционных системах, разрешениях экрана и устройствах, чтобы выяснить, соответствует ли оно вашим ожиданиям и стандартам.
Но почему разные браузеры вообще реагируют по-разному?
Каждый браузер имеет свой механизм визуализации, что означает, что у них разные правила работы браузера, что заставляет их читать и отображать контент по-разному.Совместите это с различными устройствами и операционными системами, и вы получите бесконечное количество способов работать в Интернете.
Это становится еще сложнее, потому что большую часть времени разработчики работают только на одной машине, а это означает, что они видят конечный результат только в одной конфигурации.
Для выполнения кросс-браузерного тестирования командам разработчиков программного обеспечения требуется либо собственная лаборатория устройств, либо сторонний инструмент для облачного тестирования.
У этих вариантов есть свои плюсы и минусы, но все сводится к доступности и стоимости.Если у вас нет средств для покупки и обслуживания оборудования, инструмент кросс-браузерного тестирования — отличный вариант, который предоставит вам доступ к тысячам устройств без необходимости управлять инфраструктурой.
Когда у вас появятся ресурсы для тестирования в нескольких браузерах, вы можете приступить к составлению плана тестирования приложения в различных конфигурациях.
Вы захотите начать с ручных исследовательских тестов, чтобы на самом деле пройти через приложение, как это делают ваши пользователи. После того, как у вас будет фундамент для приоритетных тестовых случаев, вы, вероятно, захотите автоматизировать их при добавлении новых функций, поскольку выполнение одного и того же теста в разных браузерах не только утомительно, но и чревато ошибками.
Почему это важно?
Вы можете подумать, что кроссбраузерное тестирование — это просто дополнительный шаг в QA, потому что все используют Google Chrome, но это заблуждение, которое приводит к ошибкам в приложениях.
Chrome занимает около 52 процентов рынка браузеров, а это большая часть. Однако только тестирование Chrome означает, что 48% пользователей оставляют приложение на волю случая.
Вы можете надеяться, что ваш веб-сайт будет работать в этих браузерах, не тратя времени и усилий на их просмотр, но достаточно всего одной ошибки, чтобы повлиять на доход и репутацию вашей компании.
Вместо того чтобы рисковать, кроссбраузерное тестирование может быть разницей между безупречным пользовательским интерфейсом и множеством недовольных клиентов.
Если ваша компания заботится о качестве, лучше всего определить несколько базовых конфигураций для тестирования. Чем больше вы будете тестировать, тем увереннее вы сможете выпустить свое приложение.
Лучшие практики кросс-браузерного тестирования
Хотя идея кросс-браузерного тестирования проста, знание с чего начать может быть сложным и запутанным.
Вот несколько важных советов, которые следует учитывать при тестировании в разных браузерах:
Это закон о балансе
Вы, вероятно, обнаружите, что лучший метод тестирования браузеров — это достижение правильного баланса между ручным и автоматическим тестированием. Хотя ручное тестирование важно для оценки приложения, которое еще не было тщательно протестировано, автоматизация тестирования позволит вам ускорить циклы тестирования и проверить ранее работавшие функции. Знание того, когда лучше всего работать с приложением вручную, а не автоматизировать, станет ключом к широкому охвату и продуктивному тестированию.
Делайте правильный выбор
Как и большинство хороших тестов, успешное кроссбраузерное тестирование является результатом грамотного планирования. Одним из самых важных соображений будет то, какие браузеры вы хотите протестировать. Самый эффективный способ принять решение — посмотреть, как ваши клиенты посещают ваш веб-сайт с помощью Google Analytics. Рассмотрение популярных, проблемных и новых конфигураций также полезно для создания всеобъемлющей стратегии кросс-браузерного тестирования.
Не забывайте о мобильных устройствах
Как уже упоминалось, различные устройства также могут влиять на работу и внешний вид вашего веб-приложения.Подумайте о том, как вы посещаете веб-сайты на телефоне или планшете и на компьютере — это совершенно другой опыт. Разработка веб-сайта, адаптирующегося к мобильным устройствам, добавляет еще один уровень сложности, а это означает, что это то, что нужно протестировать. Запустите приложение на разных устройствах iOS и Android (и не забудьте несколько планшетов!), Чтобы лучше понять, что ваши пользователи испытывают на мобильных устройствах.
Сохраняйте реалистичные ожидания
Поскольку все браузеры разные, невозможно ожидать, что ваше приложение будет выглядеть одинаково во всех из них.Цель кросс-браузерного тестирования — убедиться, что оно соответствует стандарту качества в приемлемом количестве браузеров, в которое входит подавляющее большинство ваших пользователей. Это означает, что вы хотите искать ошибки, которые влияют на функциональность или дизайн, но не следует ожидать, что опыт будет идентичным, и не следует стремиться тестировать каждый браузер, иначе вы быстро разочаруетесь.