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

Содержание

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

20 мая 2016

Facebook

Twitter

Вконтакте

Google+

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

Сегодня мы подготовили для вас список из 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+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему сайты могут по-разному отображаться и работать в разных браузерах

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

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

В чем выражается кроссбраузерность сайта и почему она так важна

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

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

сохранить структуру;

не допустить развала верстки;

избежать наложения текста на текст, изображения;

сохранить читабельность информации.

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

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

Сделать это можно одним из двух способов:

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

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

Один из самых популярных бесплатных ресурсов для проверки кроссбраузерности сайтов — Browsershots.org.

Онлайн-сервис Browsershots.org для проверки кроссбраузерности сайтов

Здесь можно бесплатно проверить сайт на корректность отображения информации в различных браузерах (около 65) и операционных системах. В зависимости от степени загруженности сервера запросами проверка занимает от пяти минут до двух часов. Если вы хотите ускорить процесс, рекомендуем приобрести доступ к так называемой «приоритетной обработке».

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

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

Если вы планируете использовать платный сервис, попробуйте BrowserStack. Этот мощный инструмент в режиме реального времени проверяет сайты на кроссбраузерность в более чем 2000 браузеров и устройств. А еще здесь есть бесплатный пробный период.

Кроме онлайн-сервисов, существуют и специальные приложения. К примеру, Multi-Browser Viewer. Этот инструмент позволяет проверить не только корректность отображения данных в разных браузерах, но и то, насколько правильно сайт функционирует.

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

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

1. Вендорные префиксы. Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:

нестандартно и прописано для определенного браузера;

это эксперимент, который еще дорабатывается;

реализует частичный функционал.

Например:

-moz- применяется в Firefox;

-ms- применяется в IE и Edge;

-webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;

-o- применяется в старых версиях Opera (на платформе Presto).

Код может выглядеть следующим образом:

-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;

— webkit-flex-wrap — это свойство для версий Chrome с 4 по 28 и версий Safari с 3.1 по 8;

-ms-flex-wrap — свойство для IE 10.

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

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

3. Разделение стилей. Используется для поддержки Internet Explorer. Этот способ предполагает определение браузера и подключение конкретного файла стилей. В IE применяются условные комментарии, которые понимает только Internet Explorer. Другие браузеры воспринимают этот код как простой комментарий.

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

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

Самые популярные браузеры среди пользователей Рунета

По данным Яндекс.Радара за июнь 2020 года, в большей степени пользователи Рунета предпочитают Google Chrome, Яндекс.Браузер и Safari.

Самые популярные браузеры среди пользователей Рунета

Что касается браузеров на мобильных устройствах, то здесь Яндекс.Браузер и Safari меняются местами.

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

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

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

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

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

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

Вот пример поехавшей верстки Яндекс.Музыки в Google Chrome. Да-да, даже такие гиганты как Яндекс, допускают мелкие ошибки. Кстати, они всё быстро поправили.

Почему так происходит?

Браузеры работают на разных движках. Они отвечают за загрузку, обработку, отображение и расчет данных.

Каждый движок воспринимает информацию по-своему. И по-разному читает html-теги и css-стили. Вот так на одном сайте в разных браузерах отображается блок с партнерами.

Автоматическая проверка кроссбраузерности

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

Browsershots

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

CrossBrowserTesting

Платный инструмент, но есть семидневная демо-версия. Для разовой проверки вполне хватит. Сервис проверит ваш в 1500 десктопных и мобильных браузерах.

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

Укажите ссылку, нажмите «Run Test» и получите результат проверки.

Saucelabs

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

После регистрации можно перейти к тестированию. Выберете в меню «Live Testing», вставьте адрес сайта и запустите проверку.

Ручная проверка кроссбраузерности

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

Но сначала нужно понять, какие браузеры нужны для теста. Тут вам помогут Яндекс.Метрика и Google Analytics. Они покажут, каким браузерами отдают предпочтение ваши пользователи.

Согласно статистике statcounter.com и liveinternet.ru вырисовывается вот такая тройка лидеров: Google Chrome, Яндекс.Браузер и Opera. Но, вы всегда можете самостоятельно проверить, какие браузеры в ТОПе у пользователей вашего ресурса.

Проверка ТОПа в Яндекс.Метрике

Нужный отчет можно найти по цепочке: Отчеты > Стандартные отчеты > Технологии > Браузеры.

Далее смотрим на показатель отказов. Если у вас аномально высокий показатель отказов, например, 70%, то, возможно, ваш сайт некорректно отображается в этом браузере. Стоит все перепроверить.

Ищем самые популярные браузеры в Гугл.Аналитике

Аудитория > Обзор > Браузер

Обращайте внимание на показатель отказов. Если он приближается к 80-90%, то обязательно протестируйте отображение сайта в этом браузере.

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

Окей, вы выяснили, что у вас есть проблемы на сайте. И как быть? Что делать? Разберемся с некоторыми секретами html-верстальщиков.

1. Использование префиксов

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

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

2. Применение CSS хаков

CSS hacks — это часть кода, понятная определенному браузеру.
Хак — это какой-то код в файле CSS, стили которого применяются только к указанным браузерам, а другими игнорируется. Вот CSS-хак для Internet Explorer 6 (IE6):

* html .sidebar {
margin-left: 5px;
}

Тут хак — это звездочка «html». Кто-то обнаружил, что это будет работать только в IE6 и ниже. То есть внешний отступ у .sidebar будет только в IE.
Но разработчики считают использование хаков не лучшим вариантом, так как это усложняет код.

3. Условные комментарии

C помощью условных комментариев можно использовать нестандартные особенности Особенно полезно, нужно нормальное отображение в Internet Explorer.

Пример для Internet Explorer 9:

<!—[if IE 9]>

<link rel="stylesheet" href="style-for-ie9.css">

<![endif]—>

Файл style-for-ie9.css подключится только в браузере Internet Explorer 9.

4. Используйте фреймворки

Зачем изобретать велосипед? Можно применять заготовки и шаблоны, например, Bootstrap. Они дают заготовки кода, который совместим с большинством браузеров и мобильными устройствами.

5. Проверяйте на ошибки

Найти ошибки с HTML и CSS можно с помощью: HTML Validator и CSS Validator.

Подытожим

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

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

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

Тестирование кроссбраузерной совместимости, выходящее за рамки Chrome

Тестирование кроссбраузерной совместимости в последние годы набирает обороты, и для этого есть причина. В то время как технологии стремительно развиваются, люди — нет. Значительное количество людей сопротивляются изменениям или, точнее говоря, «не хотят обновлять свои технологии». В этом сценарии тестирование совместимости браузеров позволяет компаниям убедиться, что ни один клиент не останется без внимания и не получит нежелательный опыт.Таким образом, хотя браузеры, такие как Google Chrome и Firefox, доминируют на рынке, есть люди, использующие их более старые версии или другие браузеры. И их количество слишком велико, чтобы игнорировать его.

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

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

Как это повлияет на ваше приложение?

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

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

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

Поскольку невозможно протестировать все возможные комбинации браузера и устройства, вам необходимо составить короткий список наиболее важных из них, на которых нужно протестировать свое веб-приложение.По состоянию на декабрь 2020 года у Google Chrome самое большое количество пользователей. На его долю приходится около 65,96% рынка. На втором месте Safari с долей рынка 10,43%, за ним следуют Firefox (8,39%) и Edge (7,43%). В то время как другие, такие как IE, Opera имеют долю рынка примерно по 2-3% каждая.

Начать тестирование бесплатно

Учитывая количество пользователей, Google Chrome и Firefox критически важны для любого бизнеса. Однако браузеры, такие как Safari, Edge и Internet Explorer, также должны быть частью тестирования, и их подмножество можно выбрать в зависимости от вашего трафика.

Источник: Statista

Необходимо проверить: Как тестировать веб-сайты в старых версиях браузера

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

Ответ — нет. Во-первых, принятие решения исключительно на основе объема приведет к тому, что ряд браузеров не будет присутствовать на рынке. Также следует учитывать ваш целевой рынок. Например, Windows XP все еще используется миллионами людей, и эти пользователи, скорее всего, будут использовать Internet Explorer.Если ваш целевой рынок использует IE, ваш веб-сайт должен быть совместим с IE.

Другими решающими факторами, повлиявшими на это решение, могут быть бизнес-показатели и добавленная стоимость. Большинство пользователей Safari запускают его на устройствах Apple, что является разумным показателем высокой покупательной способности. Это делает Safari важным браузером для тестирования, несмотря на относительно небольшой объем пользователей (по сравнению с Chrome).

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

Уместны ли браузеры, такие как Edge, Safari и IE, для кросс-браузерной совместимости?

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

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

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

Учитывая тот факт, что Edge был запущен с Windows 10, многие люди, использующие предыдущие версии Windows, по-прежнему используют IE, несмотря на отсутствие производительности и функций. Edge еще не вышел на рынок с более новыми версиями ОС Windows.

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

Давайте поищем конкретные рынки, такие как Германия, Великобритания и США, чтобы определить, имеют ли такие браузеры, как Safari, IE и Edge, большее значение чем мы думаем.

Структура использования браузера в Германии

Доля рынка веб-браузеров в Германии в 2018 году показывает, что Google Chrome является наиболее часто используемым веб-браузером, за ним следуют Safari и Firefox. IE также составляет значительную долю рынка в 5,7%. Однако Edge по-прежнему отстает с 4,04% и, как ожидается, со временем будет расти, поскольку IE устареет с более новыми версиями Windows.

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

Источник: Statista

Схема использования браузера в Великобритании

В Великобритании Chrome остается на первом месте. Но Safari и IE превосходят Firefox, а Edge занимает пятое место по доле рынка. Далее показано, как игнорирование определенных браузеров, основанное на доле на мировом рынке, может повлиять на прибыль компаний, работающих в разных регионах.

Источник: Statista

Схема использования браузера в США

В США заметны Chrome, Safari, Edge и Firefox.

Источник: Statcounter

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

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

Поиск правильного баланса

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

Как проводить тестирование кроссбраузерной совместимости с учетом осуществимости?

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

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

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

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

В двух словах

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

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

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

Предварительные требования:	Знакомство с основными языками HTML, CSS и JavaScript.
Цель:	Чтобы получить представление о высокоуровневых концепциях кроссбраузерного тестирования.

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

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

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

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

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

Протестируйте его в паре стабильных браузеров в вашей системе, например Firefox, Safari, Chrome или IE / Edge.
Проведите небольшое тестирование доступности, например, попробуйте использовать свой сайт только с клавиатурой или используйте свой сайт с помощью средства чтения с экрана, чтобы проверить, доступен ли он для навигации.
Протестируйте на мобильной платформе, например 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 для обнаружения ситуаций, в которых проблемная функция не работает, и запускать другой код в тех случаях, которые действительно работают.

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

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

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

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

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

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

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

10 самых распространенных типов веб-разработчиков

Сколько разработчиков вы знаете в своей жизни? Если вы работаете с группой из них, вы … Читать дальше

BrowserShots

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

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

Песочница браузера

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

Он предоставляет широкий спектр браузеров, включая некоторые старые версии Internet Explorer, а также версии браузеров Canary или Development.

Мультибраузер

Настольное приложение, объединяющее несколько браузеров из IE 7-11, Edge, Firefox, а также версий Chrome.Вы можете использовать его для тестирования своего сайта как для настольных компьютеров, так и для мобильных устройств с помощью эмулятора и с возможностью запуска теста вручную или автоматически.

LambdaTest

Онлайн-сервис, позволяющий запускать кросс-браузерные тесты для разных платформ. Вы можете, например, выбрать, тестировать ли ваш сайт в Firefox или Chrome, который работает в Windows, Linux или macOS.

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

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

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

BrowserStack

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

SauceLabs

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

CrossBrowserTesting

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

TestingBot

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

Просмотр

Если вам нужно быстро и легко протестировать сайт в Internet Explorer, BrowserLing может быть тем инструментом, который вам нужен.

Легко и интерактивно тестируйте свой веб-сайт в некоторых браузерах, включая старые, такие как Internet Explorer 10 и 11, Safari 4 и 5.

Сравнение

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

Кукольник

Puppeteer — это модуль Node.js, который предоставляет API для взаимодействия с браузерами Chrome и Firefox.

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

Драматург

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

Playwright поддерживает браузер на основе Chromium, Firefox и Webkit (например, Safari).

Nightwatch.js

NightWatch.js — модуль Node.js для сквозного тестирования. С помощью простого в использовании API вы можете проверить, содержит ли элемент определенный текст, является ли он видимым или скрытым, и даже проверить класс, идентификатор и свойства CSS.

Кипарисовик

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

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

WebDriverIO

Платформа автоматизации тестирования Node.js. Он поддерживает многие библиотеки JavaScript, такие как React.js, Vue и Angular, прямо из коробки.

Поскольку он основан на W3C WebDriver и Chrome DevTools, стандартном и общепринятом протоколе, тест может выполняться локально или в облачной службе, такой как SauceLab, BrowserStack и TestingBot.

Селен

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

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

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

— всестороннее руководство

Готовность устройств

Подготовьте мобильные устройства или симуляторы / эмуляторы или облачные инструменты тестирования.
до начала тестирования.

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

Проверить SSL, CSS и HTML
Выравнивание и интервалы между веб-элементами (флажки, кнопки, раскрывающиеся списки, текст
поля и т. д.)
Проверить макет страницы на устройствах с разным разрешением
Дизайн, эффекты и стили одинаковы на всех страницах
Навигация по страницам правильная
URL-ссылок правильно перенаправлены
Поиск и справка работают нормально
Прокрутка- (вертикальная и горизонтальная) рабочая
Видимость шрифтов (цвет и размер)
Выравнивание текста
Подсказки и наведение мыши в порядке
Медиа (аудио, видео и изображения) правильно отображаются и работают
Формы работают нормально — сохранение, отправка, отмена, импорт, экспорт и т. Д.
Файл (загрузка и скачивание)
Непрерывное подключение к API
Отображается запрос сеансов и файлов cookie
Формат даты согласован
Проверить функцию увеличения и уменьшения масштаба
Убедитесь, что всплывающие окна работают постоянно
Анимация работает

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

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

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

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

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

Некоторые функции средств автоматизации кроссбраузерного тестирования:

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

Примеры таких инструментов:
Тестсигма,
SmartBear
CrossBrowserTesting,

BrowserStack и т. Д.

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

: ручное или
Автоматическое кроссбраузерное тестирование

Ручное кроссбраузерное тестирование	Автоматическое кроссбраузерное тестирование
Больше времени	Меньше затрат времени (пробный запуск)
Последовательное тестирование	Параллельное тестирование
Склонен к ошибкам	Точный
Различные тесты для разных браузеров	Многоразовый — один тестовый пример для всех браузеров
Меньше тестового покрытия	Лучшее тестовое покрытие

Вот блог, в котором обсуждается ручное и
Автоматизированный кросс
Браузерное тестирование

Читать блог

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

Браузеров, устройств и комбинаций ОС слишком много для тестирования

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

Браузер * устройства * ОС * браузер
версии

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

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

Разное разрешение экрана может нарушить макет страницы

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

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

Частые обновления браузеров

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

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

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

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

Попробуйте Testsigma

Автоматизация кроссбраузерного тестирования с помощью
Тестсигма

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

Мгновенный доступ к тысячам сред: Testsigma освобождает нас от установки и
лицензионные проблемы программного обеспечения и ОС и т. д.Доступны все среды
в облаке, и к нему можно получить немедленный доступ.
Кодирование на простом английском языке: Сценарии автоматизации могут быть
написано простым английским языком, поэтому предварительные знания кодирования не требуются.Кодировать и запускать тесты автоматизации действительно легко для всех. Мы можем
немедленно запускайте наши тестовые примеры на инструменте.
Параллельное тестирование:
Мы можем просто добавить несколько сред к нашему тестированию и легко запустить
параллельное тестирование для экономии времени и усилий.
Поддерживает непрерывную интеграцию: Обеспечивает интеграцию с
Инструменты CI / CD, такие как Jenkins и т. Д., Для поддержки непрерывной интеграции.
Интеграция сторонних производителей: Обеспечивает интеграцию с
JIRA, Github, Slack и др.
Тест на локальных машинах с использованием облака Testsigma:

Вы можете тестировать локально размещенные веб-приложения на локальных машинах с помощью облака Testsigma.
Реальных устройств: Доступ к тысячам реальных устройств есть
доступны для тестирования, вам просто нужно их выбрать.
Высокая масштабируемость: Вам не нужно беспокоиться о масштабировании
или вниз по вашей тестовой инфраструктуре в соответствии с потребностями тестирования. Testsigma сделает это автоматически. Также,
когда на рынке выходит новая версия браузера или ОС, она добавляется
Тестсигма доступным средам.
Функциональное и визуальное тестирование:
Testsigma поддерживает функциональное тестирование, а также
визуальное тестирование пользовательского интерфейса (UI). Он проверяет последнее изображение
приложение к базовому изображению, а затем сообщает о различиях.
Отчетность: Отчетность настраивается в соответствии с пользователем
требования. Предоставляет скриншоты, логи, видеозаписи, подробные отчеты
как часть отчетности.
Группа поддержки: Быстрая и квалифицированная команда поддержки, чтобы помочь и
предоставить вам лучшие решения.

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

Облачное кроссбраузерное тестирование

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

Возможности облачного кросс-браузерного тестирования:

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

Преимущества:

Для инфраструктуры не требуется настройка
Наличие реальных устройств
Доступ онлайн 24 * 7
Масштабируемый
Параллельное тестирование
Доступен из любого места
Стабильность тестовой среды

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

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

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

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

Инструменты этой категории помогают при кроссбраузерном тестировании вашего сайта в Chrome, Firefox, IE, Edge, Safari и других браузерах.

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

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

Проверка кода: сообщают ли некоторые браузеры об ошибках кода?
Производительность: сайт работает медленно или даже вызывает сбои?
Адаптивный дизайн: постоянно ли адаптируется дизайн?
Несоответствия пользовательского интерфейса: есть ли еще недостатки дизайна?
Другое странное поведение: что-то еще просто не работает?

Вот краткое изложение десяти лучших инструментов кросс-браузерного тестирования.

LambdaTest
Selenium
Ghost Inspector
Browsera
Perfecto
Experitest
Sauce Labs
Browserling
Functionize
Leader Mabl. Мы можем получать комиссию, когда вы переходите по ссылкам на нашем сайте — узнайте больше о том, как мы стремимся оставаться прозрачными.
Обзоры 10 лучших онлайн-инструментов для кроссбраузерного тестирования
Вот краткое описание каждой онлайн-платформы для кроссбраузерного тестирования в моем списке, показывающее, что она делает лучше всего, а также скриншоты для демонстрации некоторых функций.
1. LambdaTest
2. Selenium
3. Ghost Inspector
4. Browsera
5. Perfecto
6. Experitest
7. Sauce Labs
8. Браузер
9. Функционировать
9. 4 .Mabl
EndTest
TestingBot
IE NetRenderer
Вкладка IE
Smartbear TestComplete
Datadog
Browsersbots
Live Browser122 Sandbox считать?
Какие инструменты кроссбраузерного тестирования вы используете? Что из того, что вы использовали, хорошо работает? Использовали что-нибудь, что доставило больше хлопот, чем они того стоят? Дайте нам знать в комментариях ниже.
7 инструментов кроссбраузерного тестирования, которые вам понадобятся в 2019 году
Эта статья была создана в сотрудничестве с LambdaTest. Спасибо за поддержку партнеров, которые сделали возможным использование SitePoint.
Эта статья была обновлена в третий раз в апреле 2019 года, чтобы отразить инструменты кроссбраузерного тестирования, которые появились и ушли, а также отразить текущую статистику использования браузеров на сегодняшний день.
Во-первых, что такое кроссбраузерное тестирование?
Кроссбраузерное тестирование — это формальность тестирования веб-приложений и веб-сайтов во всех распространенных веб-браузерах, которые используют сегодня пользователи. Это гарантирует, что мы обеспечиваем единообразие взаимодействия с пользователем везде, а не только в браузере, который нам нравится.Вот некоторые из вещей, на которые следует обратить внимание:
Проверка кода: сообщают ли некоторые браузеры об ошибках кода?
Производительность: сайт работает медленно или даже вызывает сбои?
Адаптивный дизайн: постоянно ли адаптируется дизайн?
Несоответствия пользовательского интерфейса: есть ли еще недостатки дизайна?
Другое странное поведение: что-то еще просто не работает?
Что произойдет, если я не пройду тест?
Несоответствия на самом деле очень нормальны.Дело в том, что все веб-браузеры ведут себя и отображают веб-сайты немного по-разному, а некоторые браузеры могут даже не поддерживать функции, которые мы изначально намеревались использовать; и когда эти несоответствия появляются, это может иметь прямое влияние на наш доход (среди прочего).
Возьмем, к примеру, электронную коммерцию. 69,89% проверок прекращаются, и 17% из них связаны с ошибками и сбоями веб-сайта. Если предположить, что бизнес будет накапливать полмиллиона продаж в год, это 59 407 продаж, потерянных из-за ошибок и сбоев, которые можно было предотвратить с помощью кросс-браузерного тестирования.
Поскольку Microsoft объявила, что откажется от собственных движков EdgeHTML и Chakra в пользу широко распространенных движков Blink и V8, это означает, что многие из основных браузеров сегодня предлагают аналогичные уровни совместимости кода. Хотя это шаг назад с точки зрения здоровой конкуренции, это означает, что если веб-сайт работает в Google Chrome, он, скорее всего, будет работать в Brave, Opera и Microsoft Edge. В сочетании с тем фактом, что даже Microsoft проинструктировала нас прекратить использование Internet Explorer, кроссбраузерное тестирование стало проще, чем когда-либо прежде, поскольку только Safari и Firefox используют свои собственные движки.
С технической точки зрения, веб-браузеры, которые мы должны поддерживать сегодня, — это те, которые используют наши пользователи и клиенты, информацию, которую достаточно легко найти с помощью Google Analytics или какого-либо другого программного обеспечения для отслеживания веб-аналитики. Но если у вас нет таких данных, вот мировая статистика *:
Хром: 61,75%
Safari: 15.12%
Firefox: 4,92%
UC: 4,22%
Opera: 3,15%
Internet Explorer: 2.8%
Samsung Интернет: 2,74%
Microsoft Edge: 2,15%
* По состоянию на ноябрь 2018 г.
Также имейте в виду, что существует несколько выпусков каждого веб-браузера для нескольких ОС. Звучит страшно? Не совсем, но — это чертовски скучно тестировать сайты на всех из них!
К счастью, существует ряд отличных инструментов для кроссбраузерного тестирования, поэтому сегодня мы рассмотрим 7 из них.
Имея немедленный доступ к более чем 2000 веб-браузеров, работающих на реальных устройствах Android и iOS, хорошо известный BrowserStack позволяет разработчикам и другим заинтересованным сторонам участвовать в кросс-браузерном тестировании, будь то создание нескольких снимков экрана, отладка ошибок в реальном времени или собственно взаимодействовать с браузером изначально и видеть, как макет меняется при изменении размера окна.Нет необходимости идти на компромисс с симуляторами и эмуляторами, BrowserStack предлагает вам полный контроль, поскольку вы будете взаимодействовать с настоящими браузерами на удаленных машинах.
Это не , как настоящая вещь, это — это настоящая вещь.
BrowserStack также поддерживает Selenium, инструмент с открытым исходным кодом, который поможет вам автоматизировать различные тесты, чтобы вам не приходилось делать это вручную.
Хотя перечисленные выше функции являются довольно стандартными, когда дело доходит до инструментов кросс-браузерного тестирования, что действительно отличает BrowserStack, так это то, что вы можете начать работу всего с 12 долларов.50 в месяц, инициатива для фрилансеров, предлагающая более легкую функциональность.
CrossBrowserTesting от SmartBear предлагает как ручное, так и автоматическое тестирование с помощью Selenium, более 1500 удаленных браузеров на мобильных и настольных компьютерах и имеет такую же настройку подписки, что и BrowserStack (за исключением их «Плана для фрилансеров»). Благодаря полному доступу к расширениям браузера и инструментам разработчика, таким как Chrome Dev Tools и FireBug, возможности взаимодействовать с помощью движений пальцем и многому другому, и, наконец, средствам для отладки внешних ошибок, CrossBrowserTesting не сильно отличается от BrowserStack.
CrossBrowserTesting и BrowserStack также позволяют пользователям сравнивать версии (в реальном времени или снимки экрана), запускать несколько тестов (или делать несколько снимков экрана) одновременно и даже делиться результатами.
All-in-all, подходящая альтернатива BrowserStack, однако я бы выбрал BrowserStack, если для вас важно количество поддерживаемых браузеров (BrowserStack поддерживает еще 500).
Благодаря неограниченному тестированию браузера в реальном времени, неограниченному тестированию автоматизации, неограниченному тестированию отклика, неограниченному тестированию скриншотов и круглосуточной поддержке, у вас не будет ни малейшего беспокойства относительно ограничений при использовании Lambdatest.А с самым дешевым тарифным планом, начинающимся всего с 15 долларов в месяц, Lambdatest предлагает лучшую отдачу от вложенных средств. Фактически, существует даже высокофункциональная опция «пожизненно бесплатно», что делает его одним из самых доступных инструментов кроссбраузерного тестирования, доступных сегодня на рынке, и очень подходящим для тех, кто впервые озабочен кроссбраузерным тестированием.
В качестве дополнительного бонуса все опции включают бесплатные минуты автоматизации; это если вы не выберете их мощную опцию автоматизации!
Все опции также включают:
2000+ собственных тестовых браузеров
Отслеживание проблем с помощью журналов тестирования
Функциональность локального тестирования
Автоматическое тестирование скриншотов
Адаптивное и визуальное сравнительное тестирование
Доступ к расширению WordPress и Chrome
Интеграция с Trello, Asana, Jira и Slack
Короче говоря, платформа автоматизации LambdaTest — это онлайн-сетка селена, которая дает вам возможность запускать тестовые сценарии в более чем 2000 браузерных средах.
Несмотря на то, что это один из самых дешевых инструментов кроссбраузерного тестирования по цене 19 долларов в месяц (по стоимости уступает только Lambdatest), не позволяйте простому веб-сайту Browserling вводить вас в заблуждение. Если автоматизированное тестирование не беспокоит вашу команду, использование браузера является довольно экономичным вариантом.
Кроме того, у них есть расширения для Chrome, Firefox, Opera и Safari!
Experitest предлагает довольно стандартные функции, но с меньшими затратами, начиная с 9 долларов в месяц, и даже имеет привлекательный вариант freemium, такой как Lambdatest.При этом Experitest не так хорошо выглядит на Lambdatest, поэтому Experitest может быть лучшим вариантом, только если у вас ограниченный бюджет.
Что отличает инструменты кроссбраузерного тестирования Functionize от конкурентов, так это широкое использование искусственного интеллекта и тот факт, что если вы настроите тесты для одного браузера , нет необходимости перекодировать тесты для других, что может сэкономить немало денег. время. Все они посвящены автономному тестированию (с использованием технологии Adaptive Event Analytics ™), так что вы можете больше времени уделять анализу результатов.
Не указано, сколько браузеров поддерживает Functionize, однако они предлагают тот же стандарт функций, что и другие инструменты кросс-браузерного тестирования, такие как отладка кода и визуальное тестирование.
К вашему сведению: их инструменты кроссбраузерного тестирования поставляются как часть более крупной платформы, и их цены не являются общедоступными.
Несмотря на то, что Sauce Labs предлагает функциональность, аналогичную другим инструментам кроссбраузерного тестирования, начинается от 89 долларов в месяц (для тестирования на реальных устройствах).Однако они существуют довольно давно и заявляют, что имеют «самое большое в мире облако для непрерывного тестирования», поэтому, если у вас есть бюджет, стоит попробовать.
Заключение
Несмотря на то, что большинство инструментов кроссбраузерного тестирования, представленных сегодня на рынке, поддерживают очень высокие стандарты с точки зрения предлагаемых функций, что позволяет командам разработчиков расширить охват тестированием и обеспечить более согласованный пользовательский интерфейс на всех устройствах и экранах всех размеров, у многих из них есть хотя бы одна маленькая черта, которая отличает их от конкурентов.
Будь то Functionize с их подходом к интерфейсному тестированию на основе ИИ, Experitest с их конкурентоспособными ценами или BrowserStack с их недорогим вариантом, предназначенным для фрилансеров, один из этих инструментов наверняка удовлетворит потребности ваших команд. Если вы ищете потрясающий универсальный вариант, Lambdatest, по-видимому, предлагает лучшее соотношение цены и качества.
Кроссбраузерное тестирование, тестирование совместимости
Поскольку доступен широкий спектр веб-браузеров, конечные пользователи используют разные веб-браузеры для доступа к вашим веб-приложениям, теперь стало критически важным тестировать веб-приложения в нескольких браузерах.В разных браузерах клиентские компоненты, такие как 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.

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

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

1. Browsershots

2. Browser Sandbox

3. IE Testers

3.1. Netrenderer

3.2. Microsoft Edge

3.3 My Debugbar

4. Webshot by Mobile Ready

5. Browsera

6. CrossBrowserTesting

7. BrowserStack

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

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

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

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

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

Почему сайты могут по-разному отображаться и работать в разных браузерах

В чем выражается кроссбраузерность сайта и почему она так важна

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

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

Самые популярные браузеры среди пользователей Рунета

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

Почему так происходит?

Автоматическая проверка кроссбраузерности

Browsershots

CrossBrowserTesting

Saucelabs

Ручная проверка кроссбраузерности

Проверка ТОПа в Яндекс.Метрике

Ищем самые популярные браузеры в Гугл.Аналитике

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

1. Использование префиксов

2. Применение CSS хаков

3. Условные комментарии

4. Используйте фреймворки

5. Проверяйте на ошибки

Подытожим

Тестирование кроссбраузерной совместимости, выходящее за рамки Chrome

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

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

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

Разработка

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

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

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

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

10 самых распространенных типов веб-разработчиков

BrowserShots

Песочница браузера

Мультибраузер

LambdaTest

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

BrowserStack

SauceLabs

CrossBrowserTesting

TestingBot

Просмотр

Сравнение

Кукольник

Драматург

Nightwatch.js

Кипарисовик

WebDriverIO

Селен

— всестороннее руководство

Готовность устройств

Рекомендации по кроссбраузерному тестированию

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

: ручное или Автоматическое кроссбраузерное тестирование

Вот блог, в котором обсуждается ручное и Автоматизированный кросс Браузерное тестирование

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

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

Автоматизация кроссбраузерного тестирования с помощью Тестсигма

Облачное кроссбраузерное тестирование

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

1. LambdaTest

2. Selenium

3. Ghost Inspector

4. Browsera

: ручное или
Автоматическое кроссбраузерное тестирование

Вот блог, в котором обсуждается ручное и
Автоматизированный кросс
Браузерное тестирование

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

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

Автоматизация кроссбраузерного тестирования с помощью
Тестсигма