Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

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

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

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

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

Между браузерами идет конкуренция. Раньше каждый старался добавить исключительные фишки и опции. Это привело к тому, что стандарты HTML перестали соблюдаться, и каждый браузер по-своему отображал страницы.

Netscape Navigator выбыл из гонки, отдав монополию Internet Explorer. Спустя практически одновременно начали набирать обороты проекты Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) и Safari (WebKit), разделив рынок между собой и заставив сообщество задуматься о вопросе кроссбраузерности своих сайтов.

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

Разработать кроссбраузерную верстку — отдельный вопрос при работе над крупным проектом. При выполнении этого условия чаще всего задействуются CSS и HTML правила, иногда дополняемые небольшим JavaScript (jQuery) кодом.

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

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

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

Использование CSS hacks

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

Вендорные префиксы

Остались, как ещё один рудимент браузерных войн, в особенности браузеров WebKit. Более “чистый” и честный способ, чем использования хаков.

Каждый браузер имеет собственные свойства с вендорным префиксом, так, например элемент border-radius в Mozilla Firefox представлен свойством -moz-border-radius, а в Chrome и Safari -webkit-border-radius. Такие свойства меняют поведение элемента только в определенном браузере, и игнорируются другими платформами.

Универсальность элементов

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

Проверить поддержку правил можно на бесплатном сервисе caniuse.com. В наглядном представлении в виде таблиц можно уточнить, начиная с какой версии тот или иной тег введён в поддержку каждым движком, и можно ли его применять

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

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

Так же есть специальные сервисы проверки сайта на кроссбраузерность.

• browsershots.org
  Преимущество:Позволяет получать скриншоты из большого количества разных версий движков.
  Недостаток: Долгое ожидание.

• crossbrowsertesting.com
• browserstack.com
  Преимущество: Мощные средства для глубокого анализа веб-ресурса в режиме онлайн.
  Недостаток: Платное использования большинства функций.

Как влияет на посещаемость сайта

Существует негласная статистика, говорящая о том, что Яндекс Браузер и Chrome пользуются популярностью молодёжи, а Opera и Mozilla отдают предпочтения уже работающие люди. Представьте, что вы создали сайт по скейтбордингу для молодежи, а его оформление с треском проваливается в Chrome. Шрифты не загружаются, отступы появляются совсем не там, где они должны быть — настоящая катастрофа маркетинга, потеря целевой аудитории.

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

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

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

Так же в блоге у нас есть статья про адаптивную верстку. 

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

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

Нам известно, что браузеры интерпретируют 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-свойств, ввели свои префиксы. Это значит, что значения у таких свойств, корректно воспринимаются браузером, только с префиксом.

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

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

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

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

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

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

Основные браузеры

Существует пять основных браузеров: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. При разработке сайта, обязательно проверяйте его во всех этих браузерах.

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

Вендорные префиксы

Часто разработчики топовых браузеров внедряют новые свойства css, которые еще не стандартизированы. Эти свойства предваряются специальными приставками, которые называются «вендорные префиксы». Каждый браузер имеет свой префикс:

• -o- — префикс для браузера Опера
  
• -moz- — префикс для браузера Mozilla
  
• -ms — префикс для Internet Explorer
  
• -webkit- — префикс для браузеров, построенных на движке Webkit, таких, как Safari и Chrome
  

Пример с вендорными префиксами:

         -webkit-transition-duration:0.6s;              
         -moz-transition-duration:0.6s;  
         -o-transition-duration:0.6s;
         -ms-transition-duration:0.6s;
         transition-duration:0.6s;

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

Стандартные стили браузера

Разные браузеры имеют разные настройки стилей по умолчанию для каждого элемента HTML. То есть, размеры шрифтов и отступы между элементами могут варьироваться в зависимости от браузера.  Если верстальщик не переопределит такое свойство в своем файле стилей, браузер применит свои настройки. И тогда верстка вполне может «поплыть».

Чтобы это не произошло и код Вашего сайта был максимально кроссбраузерным, можно использовать специальные технологии по обнулению тех стилей, которые содержатся в браузере по умолчанию.  Для этого разработаны технологии reset.css и normalize.css. Рассмотрим их подробно.

reset.css

Американец Эрик Майер написал css-документ reset.css, в котором все стили обнуляются. Убираются отступы и границы всех элементов веб-страницы, удаляются маркеры, а также всем элементам задается одни размер шрифта.

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

normalize.css

Немногим позднее американские разработчики Николас Галахер и Джонатан Нил создали css-документ normalize.css, в котором вместо полного обнуления всех стилей происходит их нормализация. То есть, полезные настройки браузера сохраняются, разработчику не нужно тратить время на то, чтобы заново прописать стили для абсолютно всех элементов, так как они унифицируются для всех браузеров. Более того, normalize.css исправляет несовместимости браузера Internet Explorer для версий IE9 и выше, а также ошибки в популярных браузерах.

Этот css-документ использует популярный фреймворк Bootstrap.

Оба файла – reset.css и normalize.css распространяются бесплатно.

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

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

Вы можете просматривать сайт, используя последнюю версию 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»

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

20 мая 2016

Facebook

Twitter

Вконтакте

Google+

Pinterest

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

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

1. Browsershots

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

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

Если Вам требуется больше возможностей и инструментов для тестирования, можно перейти на платную версию за 29.95$ в месяц.

2. Browser Sandbox

К сожалению, Browser Sandbox будет полезным только для пользователей Windows, хотя разработчики обещают выкатить версию для Mac в самое ближайшее время. Он может похвастаться довольно внушительным списком поддерживаемых браузеров, который включает IE, Firefox, Chrome, ChromiumCanary, Firefox Mobile, Safari, Opera, и FirefoxNightly. Правда, в бесплатном варианте доступна возможность тестирования только в последней версии конкретного браузера.

Если вы должны проверять и старые версии, вам придется воспользоваться платной версией. К счастью, ее цена всего 4.95 доллара в месяц.

3. IE Testers

Если корректное отображение вашего сайта в IE ваша главная головная боль, к вашим услугам несколько инструментов, которые помогут вам проверить отображение сайта в браузере от Microsoft.

3.1. Netrenderer

Благодаря Netrenderer вы можете протестировать свой проект в версиях IE от 5.5 до 11. Это простая и интуитивно понятная утилита, хотя она и не может похвастаться впечатляющим списком функций.

3.2. Microsoft Edge

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

3.3 My Debugbar

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

4. Webshot by Mobile Ready

В отличие от других инструментов, представленных в этом списке, Webshot by Mobile Ready, как становится понятно из его названия, предназначен только для тестирования сайта на мобильных устройствах. Он бесплатный, но требует регистрации.

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

5. Browsera

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

Вы можете воспользоваться бесплатной тридцатидневной пробной версией или остановиться на базовом бесплатном варианте, который ну уж очень урезан в функционале. Также существуют планы с оплатой 39 и 99$.

6. CrossBrowserTesting

Действительно классная особенность CrossBrowserTesting в том, что он использует реальные устройства для тестирования вашего сайта. Хотя эмуляторы работают довольно неплохо, ничто не даст вам столь исчерпывающей информации, как боевое тестирование на реальных девайсах. Список функций довольно объемный, и в общем, этот инструмент реально стоит своих денег. Существует подозрение, что CrossBrowserTesting может похвастаться самым большим списком поддерживаемых браузеров (около 900) и операционных систем (около 40), включая iOS, Android,Windows, Mac и другие.

Еще одна отличительная особенность режим live testing , в котором вы можете тестировать свой сайт в реальном окружении, получая возможность проверить работоспособность AJAX, HTML-форм, JavaScript, Flash и всего остального. Кроме того, представлена возможность автоматизации тестов и сравнения скриншотов.

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

7. BrowserStack

BrowserStack это еще одно громкое имя в кроссбраузерном тестировании. Он также использует реальные устройства для тестирования и поддерживает 700+ браузеров. Существует возможность локального тестирования и быстрого получения скриншотов на разных разрешениях экранов от 800 600 до 2048 1536. Основной план стоит 29$, но у них есть план для фрилансеров, который стоит 12,5 долларов в месяц. Для некоторых open source проектов они даже предлагают бесплатные услуги.

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

Facebook

Twitter

Вконтакте

Google+

Pinterest

3 способа сделать веб-сайты кроссбраузерными

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

Зачем нужен кроссбраузерный веб-сайт?

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

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

Вот где основная проблема возникает с точки зрения владельца бизнеса —

Могут ли пользователи (посещающие веб-сайт с помощью тысяч комбинаций браузеров устройств) получить доступ к веб-сайту наилучшим образом? Все ли функции веб-сайта доступны в популярных браузерах, таких как Chrome, Firefox, Safari, Edge и т. Д.?

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

Как сделать сайт совместимым со всеми браузерами?

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

• Кто является целевой аудиторией?
• Какова в настоящее время доля рынка браузеров среди целевой аудитории?

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

Это связано с тем, что рыночная доля этих трех браузеров составляет 86% от общей рыночной доли браузеров. Это не означает, что следует полностью избегать тестирования оставшихся браузеров, таких как Edge, UC browser и т. Д. Для действительно всеобъемлющего взаимодействия лучше всего оптимизировать веб-сайт для всех браузеров. Команды просто должны расставить приоритеты, какие из них тестировать в первую очередь и наиболее тщательно.

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

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

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

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

Лучшая альтернатива — выбрать облачные платформы, такие как BrowserStack, которые предоставляют командам реальное облако устройств для кроссбраузерного тестирования. BrowserStack предоставляет более 2000 реальных устройств и браузеров (Chrome, Firefox, Safari, Edge и т. Д.).) для тестирования.

QA получают мгновенный доступ к браузерам, установленным на реальных мобильных устройствах Android и iOS, а также на настольных устройствах. Они могут выполнять ручное тестирование своих веб-сайтов в реальном времени в браузерах, работающих на реальных мобильных и настольных устройствах. Это позволяет командам тестировать веб-сайты в реальных пользовательских условиях. Кроме того, команды могут также использовать Cloud Selenium Grid для выполнения автоматизированных кросс-браузерных тестов на желаемых комбинациях браузер-устройство.

Проверить веб-сайт на совместимость с браузером бесплатно

Просто нужно выбрать желаемую платформу (iOS, Android, Windows, Mac) и версию браузера для тестирования.См. Изображение ниже, чтобы лучше понять панель управления BrowserStack Live.

Также давайте посмотрим на пример сеанса Firefox, запущенного на реальном Samsung S10.

QA также может получить возможность тестировать такие функции, как IP-геолокация, масштабирование, поворот устройства, что обеспечивает интерактивный и интуитивно понятный опыт тестирования. Он также обеспечивает интеграцию с популярными инструментами сообщения об ошибках, такими как Jira и Slack.

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

Введение в кроссбраузерное тестирование — изучение веб-разработки

В этой статье модуль начинается с обзора темы кроссбраузерного тестирования и ответов на такие вопросы, как «что такое кроссбраузерное тестирование?», «Что такое кроссбраузерное тестирование?» наиболее распространенные типы проблем, с которыми вы столкнетесь? »и« Каковы основные подходы к тестированию, выявлению и устранению проблем? »

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

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

Помните, что вы не являетесь вашими пользователями — просто потому, что ваш сайт работает на MacBook Pro или Galaxy Nexus высокого класса, это не значит, что он будет работать для всех ваших пользователей — предстоит еще много тестирования!

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

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

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

Во-вторых, когда мы говорим «через приемлемое количество веб-браузеров», мы не имеем в виду 100% браузеров в мире — это практически невозможно. Вы можете сделать несколько осознанных звонков относительно того, какие браузеры и устройства будут использовать ваши пользователи (это мы обсудим во второй статье серии — см. Нужно проверить их все?), Но вы не можете гарантировать все.Как веб-разработчик, вы должны согласовать с владельцем сайта ряд браузеров и устройств, над которыми обязательно должен работать код, но помимо этого, вам необходимо использовать защитный код, чтобы дать другим браузерам наилучшие шансы на то, чтобы используйте свой контент. Это одна из самых серьезных проблем веб-разработки.

Примечание: Мы также рассмотрим защитное кодирование позже в этом модуле.

Существует много разных причин, по которым возникают проблемы с кроссбраузерностью, и обратите внимание, что здесь мы говорим о проблемах, когда вещи ведут себя по-разному в разных браузерах / устройствах / предпочтениях просмотра.Прежде чем вы даже перейдете к кроссбраузерным проблемам, вы должны уже исправить ошибки в своем коде (см. Разделы «Отладка HTML», «Отладка CSS» и «Что пошло не так?» Устранение неполадок JavaScript из предыдущих разделов, чтобы при необходимости освежить память).

Проблемы с кроссбраузерностью обычно возникают по следующим причинам:

• Иногда в браузерах есть ошибки или функции по-разному реализуются. Эта ситуация намного менее плохая, чем была раньше; назад, когда IE4 и Netscape 4 конкурировали за доминирующий браузер в 1990-х годах, компании-разработчики браузеров намеренно реализовывали разные вещи по-разному, чтобы получить конкурентное преимущество, что сделало жизнь разработчиков адом.В наши дни браузеры намного лучше следуют стандартам, но иногда все же появляются различия и ошибки.
• некоторые браузеры могут иметь разные уровни поддержки технологических функций, чем другие. Это неизбежно, когда вы имеете дело с передовыми функциями, которые браузеры только реализуют, или если вам нужно поддерживать действительно старые браузеры, которые больше не разрабатываются, которые, возможно, были заморожены (т.е. над ними больше не выполняется новая работа. ) задолго до того, как была изобретена новая функция.Например, если вы хотите использовать на своем сайте передовые функции JavaScript, они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, возможно, вам придется не использовать их или преобразовать код в старомодный синтаксис, используя при необходимости какой-то кросс-компилятор.
• Некоторые устройства могут иметь ограничения, из-за которых веб-сайт работает медленно или плохо отображается. Например, если сайт был разработан так, чтобы хорошо смотреться на настольном ПК, он, вероятно, будет выглядеть крошечным и его будет трудно читать на мобильном устройстве.Если ваш сайт содержит множество больших анимаций, это может быть нормально для планшета с высокими характеристиками, но может быть вялым или прерывистым на устройстве низкого уровня.

и еще несколько причин.

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

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

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

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

Начальное планирование> Разработка> Тестирование / обнаружение> Исправления / итерация

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

Первоначальное планирование

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

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

Так, например, вы можете создать сайт электронной коммерции, который обслуживает клиентов в Северной Америке. Сайт должен полностью работать в последних нескольких версиях наиболее популярных браузеров для настольных и мобильных устройств (iOS, Android, Windows phone) — в их число должны входить Chrome (и Opera, поскольку он основан на том же механизме рендеринга, что и Chrome), Firefox, IE. / Edge и Safari.Он также должен обеспечивать приемлемый опыт работы с IE 8 и 9 и быть доступным с соблюдением требований WCAG AA.

Теперь, когда вы знаете свои целевые платформы тестирования, вам следует вернуться и просмотреть требуемый набор функций и какие технологии вы собираетесь использовать. Например, если владелец сайта электронной коммерции хочет 3D-тур на основе WebGL по каждому продукту, встроенному в страницы продукта, он должен будет согласиться с тем, что это просто не будет работать в версиях IE до 11. Вам придется согласиться. чтобы предоставить версию сайта без этой функции пользователям старых версий IE.

Вам следует составить список потенциальных проблемных областей.

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

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

Разработка

Теперь о разработке сайта. Вы должны разделить различные части разработки на модули, например, вы можете разделить различные области сайта вверх — домашнюю страницу, страницу продукта, корзину покупок, рабочий процесс оплаты и т. Д.Затем вы можете дополнительно разделить их: реализовать общий верхний и нижний колонтитулы сайта, реализовать подробное представление страницы продукта, реализовать постоянный виджет корзины покупок и т. Д.

Существует несколько общих стратегий кроссбраузерной разработки, например:

• Сделайте так, чтобы вся функциональность работала как можно точнее во всех целевых браузерах. Это может включать в себя написание разных путей кода, которые воспроизводят функциональность по-разному, нацеленные на разные браузеры, или использование Polyfill для имитации любой отсутствующей поддержки с использованием JavaScript или других технологий, или использование библиотеки, которая позволяет вам написать один бит кода, а затем выполняет разные вещи в фоновом режиме в зависимости от того, что поддерживает браузер.
• Примите тот факт, что некоторые вещи не будут работать одинаково во всех браузерах, и предоставьте разные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность. Иногда это неизбежно из-за ограничений устройства — широкоформатный кинотеатр не даст такого же визуального восприятия, как 4-дюймовый мобильный экран, независимо от того, как вы программируете свой сайт.
• Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах, и двигайтесь дальше. Это нормально, если ваш клиент / пользовательская база согласны с этим.

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

Тестирование / обнаружение

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

1. Протестируйте его в паре стабильных браузеров в вашей системе, таких как Firefox, Safari, Chrome или IE / Edge.
2. Проведите небольшое тестирование доступности, например, попробуйте использовать свой сайт только с клавиатурой или используйте свой сайт через программу чтения с экрана, чтобы проверить, доступен ли он для навигации.
3. Протестируйте на мобильной платформе, например Android или iOS.

На этом этапе исправьте все проблемы, которые вы обнаружите с новым кодом.

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

• Попробуйте протестировать последнее изменение во всех современных браузерах для настольных ПК, в том числе в Firefox, Chrome, Opera, IE, Edge и Safari для ПК (в идеале — Mac, Windows и Linux).
• Протестируйте его в обычных браузерах телефонов и планшетов (например, iOS Safari на iPhone / iPad, Chrome и Firefox на iPhone / iPad / Android),
• Также проведите тесты в любых других браузерах, которые вы включили в свой целевой список.

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

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

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

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

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

Если хотите, можете пойти и дальше.Доступны коммерческие инструменты, такие как Browserling, Sauce Labs, Browser Stack, Endtest, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить немного денег в свою тестирование. Также можно настроить среду, которая автоматически запускает тесты для вас, а затем позволяет вам регистрировать свои изменения в центральном репозитории кода только в том случае, если тесты все еще проходят.

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

Часто бывает полезно протестировать предварительные версии браузеров; см. следующие ссылки:

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

Исправления / итерация

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

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

Возможно, это не ваша вина — если в браузере есть ошибка, мы надеемся, что поставщик быстро ее исправит. Возможно, это уже было исправлено — например, если ошибка присутствует в Firefox версии 49, но ее больше нет в Firefox Nightly (версия 52), то они исправили ее. Если это не исправлено, вы можете сообщить об ошибке (см. Сообщение об ошибках ниже).

Если это ваша вина, то нужно это исправить! Выявление причины ошибки включает ту же стратегию, что и любая ошибка веб-разработки (опять же, см. Разделы «Отладка HTML», «Отладка CSS» и «Что пошло не так? Устранение неполадок JavaScript»).Как только вы обнаружили причину вашей ошибки, вам нужно решить, как ее обойти в конкретном браузере, в котором она вызывает проблемы — вы не можете просто сразу изменить код проблемы, так как это может нарушить код в других браузерах. . Общий подход обычно состоит в том, чтобы каким-то образом разветвлять код, например, использовать код обнаружения функций JavaScript для обнаружения ситуаций, в которых проблемная функция не работает, и запускать другой код в тех случаях, которые действительно работают.

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

Чтобы повторить то, что было сказано выше, если вы обнаружите ошибки в браузерах, вы должны сообщить о них:

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

10 лучших инструментов для кроссбраузерного тестирования в 2021 году (последний рейтинг)

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

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

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

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

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

.

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

Что нам нужно протестировать при тестировании браузера:

# 1) Проверка CSS
# 2) Проверка HTML или XHTML
# 3) Проверка страниц с включенным JavaScript и без него.
# 4) Функциональность Ajax и JQeury
# 5) Проверка размера шрифта
# 6) Макет страницы в разных разрешениях
# 7) Все изображения и выравнивание
# 8) Разделы верхнего и нижнего колонтитула
# 9) Выравнивание содержимого страницы по центру, LHS или RHS.
# 10) Стили страниц
# 11) Форматы даты
# 12) Специальные символы с кодировкой символов HTML.
# 13) Функция увеличения и уменьшения масштаба страницы.

Очевидно, вам придется повторить эти тесты на:

# 14) Различные операционные системы, такие как Windows, Linux и Mac.
# 15) Различные браузеры (с разными версиями), такие как Internet Explorer, Firefox, Google Chrome, Safari и Opera.

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

Лучшие инструменты для кроссбраузерного тестирования на 2021 год

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

# 1) TestComplete

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

Характеристики:

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

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

# 2) Лямбда-тест

Протестируйте свой сайт в более чем 2000 браузерах и ОС.

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

Рекомендуемая литература = >> Руководство по тестированию браузера с помощью LambdaTest

Основные характеристики:

• Запустить тесты автоматизации Selenium на масштабируемой сетке Selenium, имеющей более 2000 браузерных сред.
• Выполняйте автоматические снимки экрана и адаптивное тестирование вашего веб-сайта.
• Протестируйте свой локальный или частный веб-сайт с помощью туннеля SSH.
• Регистрация ошибок в один клик в ваших любимых инструментах отслеживания ошибок, таких как Asana, BitBucket, GitHub, JIRA, Microsoft VSTS, Slack, Trello и т. Д.
• 24 * 7 Поддержка чата

# 3) CrossBrowserTesting.com

Протестируйте свой сайт в более чем 2050 реальных настольных и мобильных браузерах.

Интерактивное тестирование и отладка на удаленных устройствах в реальном времени, просмотр своего веб-сайта в нескольких браузерах одновременно с использованием автоматизированного режима или автоматический запуск с использованием Selenium, Appium или других ваших любимых фреймворков.Гибкие команды могут тестировать быстрее с помощью параллельного тестирования и интеграции с инструментами CI, такими как Jenkins.

Основные характеристики:

• CrossBrowserTesting позволит вам запускать одиночные или параллельные снимки экрана и регрессионные тесты.
• Благодаря интуитивно понятному REST API вы получите доступ почти ко всему приложению.
• Он предоставляет вам полный доступ к инструментам разработчика и расширениям, таким как FireBug и Chrome Dev Tools.
• Ваша команда сможет масштабировать скорость автоматизации с помощью облачного тестирования Selenium и Appium.

# 4) Контроль качества Wolf

QA Wolf — новичок в блоке и настоящий современный инструмент тестирования для всей команды.

Без особого признания имени, QA Wolf — это скрытая жемчужина, которая быстро набирает обороты и на момент написания этой статьи набрала более 2700 звезд на GitHub. Этот инструмент тестирования отдает предпочтение простоте использования в качестве основного отличия и делает создание сквозных тестов быстрым, простым и достаточно мощным, чтобы каждый в вашей команде мог принять участие.

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

Основные характеристики:

• Создавайте тесты прямо из браузера — установка или настройка не требуется. Начало работы очень быстрое и безболезненное. Просто зарегистрируйтесь для получения бесплатной учетной записи, введите URL-адрес, который вы хотите протестировать, и начните просматривать свои тестовые пути.
• Преобразуйте свои действия в код. Не писать шаблонный код или изучать языки программирования. QA Wolf генерирует чистый код Javascript, когда вы просматриваете веб-сайт, тем самым позволяя любому члену вашей команды создавать тесты.
• Повторно запустить выбранный код. Не беспокойтесь о повторном запуске всего теста, если вам нужно исправить только одну или две строки кода. QA Wolf позволяет повторно запускать только выбранный вами код для быстрого устранения неполадок.
• Запускайте тесты в развертываниях Vercel / Netlify или по расписанию одним щелчком мыши. Создавайте тесты и запускайте их автоматически, когда захотите.
• Выполнить 100% тестов параллельно. Получите результаты за считанные минуты независимо от количества выполняемых тестов.
• Получайте оповещения в Slack и по электронной почте. Держите всю команду в курсе результатов тестирования, отправляя их прямо на ваш почтовый ящик или в корпоративный канал Slack.
• Анализируйте отказы с помощью видео и журналов. Анализируйте и быстро воспроизводите сбои с помощью видео, журналов и точной строки кода, на которой произошел сбой теста.
• Повторно запустить и исправить тесты прямо из браузера. Не запускайте код локально и не ждите следующей сборки CI. QA Wolf позволяет вам исправлять и поддерживать тесты прямо в браузере.
• Сотрудничайте со своей командой в режиме реального времени, поделившись ссылкой. Работать с членами команды быстро и легко. Просто пригласите их на свою панель инструментов и начните сотрудничать.

# 5) Katalon Studio

Katalon Studio — самая популярная альтернатива Selenium и Appium для кросс-браузерного тестирования, которую доверяют 850 000 тестировщиков и разработчиков.

Также предлагает масштабируемое веб-тестирование, тестирование API, мобильных и настольных компьютеров, некоторые из ключевых функций Katalon Studio:

• Совместим с последними версиями Chrome, Firefox и Edge.
• Поддержка автономного выполнения браузера в Chrome и Firefox для более быстрой обратной связи при выполнении критически важных для производительности приложений.
• Гибкая миграция тестов с Selenium (Grid, Webdriver & IDE), Postman и SoapUI.
• Минимальное обслуживание теста с шаблоном модели страница-объект.
• Механизм самовосстановления для обработки изменений пользовательского интерфейса и кода.
• Встроенная интеграция с CI / CD (Jenkins, Azure Devops, CircleCI, Bamboo, TeamCity и Travis CI).
• Масштабируйте выполнение с помощью облачных устройств из интеграций Kobiton, Perfecto, SauceLabs, LambdaTest и BrowserStack.
• Расширенные графики для визуализации основных показателей и уведомлений в реальном времени после каждого выполнения (Slack, Git и Microsoft Teams).

# 6) Browsershots

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

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

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

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

Поддерживаемые браузеры: Firefox, Google Chrome, Opera, Safari, SeaMonkey, Arora, Dillo, Epiphany, Konqueror, Lynx, Luakit, Rekonq и Midori имеют намного больше браузеров всех версий.

=> Посетить веб-сайт Browsershots

# 7) Песочница Turbo Browser

Turbo Browser Sandbox позволяет использовать практически все популярные веб-браузеры, не устанавливая их на свой компьютер.

Вы можете запускать все популярные браузеры, включая Internet Explorer, Firefox, Chrome и Opera, на своем компьютере прямо из Интернета.

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

=> Посетить тестовую среду Turbo Browser

# 8) IE NetRenderer

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

Существует также надстройка Firefox «IE NetRenderer», которая позволяет отображать веб-страницу, которую вы в данный момент читаете.

=> Посетите веб-сайт IE NetRenderer

# 9) Browsera

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

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

Характеристики:

• Найдите проблемы с компоновкой
• Найдите ошибки JS
• Можно протестировать весь сайт
• Динамическое тестирование страницы
• Может тестировать страницы за паролем для входа
• Самое приятное — установка не требуется

=> Посетить веб-сайт Browsera

# 10) IETester

В Интернете доступно множество опций, если вы хотите проверить совместимость браузера с версиями Internet Explorer.IETester — один из тех вариантов, который позволяет вам тестировать свой веб-сайт на последних версиях IE одновременно с помощью одного приложения.

IETester, бесплатный инструмент для тестирования браузеров, можно использовать для тестирования веб-сайтов в IE11, IE10, IE9, IE8, IE7, IE6 и IE5.5 на рабочем столе Microsoft Windows 8, Windows 7, Vista и XP.

=> Посетите веб-сайт IETester

# 11) BrowserStack Live

BrowserStack Live — это мобильное приложение и инструмент для тестирования браузеров.Вы можете протестировать свой веб-сайт в более чем 2000 браузерах, что сделает его одним из полных тестов совместимости браузеров.

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

Характеристики

• Настройка не требуется. Он может запускать мгновенное тестирование в реальном облаке устройства.
• Охватывает 2000+ настольных браузеров и почти все браузеры реальных мобильных устройств.
• Безопасная и частная сеть.
• Интерактивные устройства (без лаборатории устройств или виртуальных машин).

=> Посетить веб-сайт BrowserStack

# 12) Ranorex Studio

Ranorex Studio — это комплексное решение для веб-приложений и кросс-браузерного тестирования. Автоматизируйте тесты для широкого спектра веб-технологий и сред, включая веб-сайты HTML5, Java и JavaScript, приложения Salesforce, Flash и Flex и многие другие.

Ranorex даже поддерживает междоменные фреймы iframe, элементы в теневой DOM, гибридные настольные приложения на основе Chromium Embedded Framework (CEF) с открытым исходным кодом и JxBrowser.

Характеристики включают:

• Надежная идентификация объекта, даже для веб-элементов с динамическими идентификаторами.
• Общий репозиторий объектов и повторно используемые модули кода для эффективного создания тестов и сокращения затрат на обслуживание.
• Тестирование на основе данных и ключевых слов.
• Настраиваемый отчет о тестировании с видеоотчетом о выполнении теста — посмотрите, что произошло во время тестового запуска, без необходимости повторного запуска теста!
• Выполнять кросс-браузерные тесты параллельно или распространять их в Selenium Grid со встроенной поддержкой Selenium Webdriver.
• Интегрируется с такими инструментами, как Jira, Jenkins, TestRail, Git, Travis CI и другими.

# 13) Просмотр

Существуют определенные инструменты, например Browserling, для интерактивного тестирования браузера.

Основные характеристики:

• Это живой инструмент для тестирования вашего сайта в различных реальных браузерах на реальных системах.
• Интерактивное тестирование, как если бы вы тестировали в браузере своего компьютера.
• Доступ ко всем последним браузерам
• Делайте снимки экрана и делитесь ими с командой.
• Безопасный просмотр
• Может легко тестировать адаптивные веб-сайты.
• Расширения браузера доступны для Chrome и Firefox.
• API доступны

=> Посетить веб-сайт браузера

# 14) Experitest

Автоматизируйте кроссбраузерное тестирование, запустив тесты Selenium и Appium в более чем 1000 браузерах типов, версий и операционных систем.

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

# 15) Сравнение

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

Comparium упрощает процедуру тестирования, поскольку содержит все минимально необходимые инструменты в одном месте, тем самым всегда внедряя что-то новое и добавляя новые функции.

Основные характеристики:

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

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

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

Заключение

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

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

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

Как создавать сайты, совместимые с разными браузерами

Опубликовано в Производительность , автор: WP Engine

Последнее обновление 30 мая 2019 г.

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

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

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

Почему важна кроссбраузерная совместимость?

Большинство людей используют известные браузеры, такие как Google Chrome, Safari, Firefox и Opera. Однако вариантов гораздо больше, чем вы можете себе представить. Это хорошо для потребителя, но проблема в том, что каждый браузер построен по-своему. Это означает, что ваш веб-сайт может отлично работать в Chrome, но испытывать проблемы в Firefox (просто чтобы привести один пример).

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

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

Как создать кроссбраузерный веб-сайт

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

Шаг 1. Установите Doctype для ваших файлов HTML

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

«doctype» — это утверждение, которое сообщает браузерам: «Эй, это версия HTML, которую мы собираемся использовать!» Таким образом, браузерам не придется делать никаких предположений, что может уменьшить количество ошибок, с которыми столкнутся ваши пользователи.

К счастью, этот шаг на удивление прост. Все, что вам нужно сделать, это добавить следующий фрагмент кода в свои HTML-документы:

 « http://www.w3.org/TR/html4/strict.dtd »> 
 

Как вы заметите, этот фрагмент кода предназначен для HTML версии 4.01. Если вместо этого вы хотите использовать HTML5, вы можете использовать этот код:

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

Шаг 2. Используйте правила сброса CSS

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

Один из способов решить эту проблему — использовать «сброс CSS». Это наборы правил, которые вы можете добавить на свой веб-сайт, которые задают основу для работы CSS в браузерах.

Есть несколько вариантов сброса CSS, но один из наших любимых — Normalize.css, из-за того, насколько он всеобъемлющий:

Вы можете скачать normalize.css из библиотеки GitHub и используйте его в качестве отправной точки для CSS вашего сайта. Это поможет вам максимизировать кроссбраузерность на вашем сайте.

Шаг 3. Используйте кроссбраузерные библиотеки и платформы