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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Помните, что вы не являетесь вашими пользователями - просто потому, что ваш сайт работает на Macbook Pro или high-end 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 - наиболее популярное приложение), которая могла бы, например, загружать ваш сайт в различных браузерах и:

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

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

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

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

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

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

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

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

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

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

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

Сообщение об ошибках

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

Сводка

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

В этом модуле

.

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

  • Home
  • Testing

      • Back
      • Agile Testing
      • BugZilla
      • Cucumber
      • Database Testing
      • 9000 J900 9000 J2
        • Назад
        • JUnit
        • LoadRunner
        • Ручное тестирование
        • Мобильное тестирование
        • Mantis
        • Почтальон
        • QTP
        • Назад
        • Центр качества
        • 0003
        • 000 RPM
        • 00030003 SoapUI
        • Управление тестированием
        • TestLink
    • SAP

        • Назад
        • ABAP
        • APO
        • Начинающий
        • Basis
        • BODS
        • BI
        • BPC
        • CO
        • Назад
        • CRM
        • Crystal Reports
        • Crystal Reports
        • Заработная плата
        • Назад
        • PI / PO
        • PP
        • SD
        • SAPUI5
        • Безопасность
        • Менеджер решений
        • Successfactors
        • SAP Back Tutorials
        • 9007
            • Apache
            • AngularJS
            • ASP.Net
            • C
            • C #
            • C ++
            • CodeIgniter
            • СУБД
            • JavaScript
            • Назад
            • Java
            • JSP
            • Kotlin
            • Linux
            • Linux
            • Linux js
            • Perl
            • Назад
            • PHP
            • PL / SQL
            • PostgreSQL
            • Python
            • ReactJS
            • Ruby & Rails
            • Scala
            • SQL
            • 000
            • SQL
            • 000
            • SQL
            • 000 0003 SQL 000
            • UML
            • VB.Net
            • VBScript
            • Веб-службы
            • WPF
        • Обязательно учите!

            • Назад
            • Бухгалтерский учет
            • Алгоритмы
            • Android
            • Блокчейн
            • Business Analyst
            • Создание веб-сайта
            • CCNA
            • Облачные вычисления
            • COBOL
            • 9000 Compiler 9000

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

              Кроссбраузерная совместимость важна. Очень важно. Мы установили этот факт в нашем предыдущем посте о необходимости кроссбраузерного веб-сайта. Итак, следующий шаг - как сделать сайты совместимыми с кроссбраузерностью? Как мы можем убедиться, что наш веб-сайт обеспечивает плавное и беспроблемное взаимодействие с пользователем во всех браузерах, к которым может иметь доступ ваша целевая аудитория, будь то Firefox, Chrome или даже Internet Explorer.

              При разработке веб-сайта обычно используется комбинация Javascript, CSS и HTML, при этом CSS3 и HTML5 являются последними, и мы любим новейшие версии, поэтому, как и ожидалось, разработчики выбирают их в первую очередь.

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

              Итак, приступим к делу.

              Самое первое, что делают большинство разработчиков, - это начинают разработку веб-сайта для своего любимого браузера или, в некоторых случаях, браузера, наиболее используемого вашей возможной целевой аудиторией.Предположим, что это последняя версия Google Chrome, что обычно и бывает. На веб-сайте используются все новейшие технологии CSS, JS и фреймворк. Сайт красивый, с потрясающими анимированными переходами и чистыми шрифтами. И самое главное, он работает идеально. Исправление: Отлично работает в последней версии браузера Chrome.

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

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

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

              Пора вам найти некоторые из серьезных ошибок. Итак, давайте их решим.

              не работает в разных браузерах?

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

              Найдите проблемы кроссбраузерной совместимости с мобильным браузером Opera Mini:


              Если вы используете такие элементы, как

              • CSS3 3D-преобразования
              • 2D-преобразования
              • Фоновое изображение
              • Особенности формы HTML5
              • Семантические элементы
              • Псевдокласс CSS, отображаемый заполнителем
              • API веб-аутентификации
              • Мета-тег цвета темы

              и т. Д., То ваш веб-сайт не будет работать в браузерах Opera Mini.

              Найдите проблемы кроссбраузерной совместимости с Firefox Браузер:

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

              • Файловая система и FileWriter API
              • Веб-база данных SQL
              • XHTML + SMIL анимация
              • Шрифты EOT

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

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

              Shared Web Workers, CSS overflow-anchor, Web Authentication API, если они используются, вообще не будут работать в браузерах Safari. Однако сафари частично поддерживает некоторые функции, такие как функции форм HTML5 и маски CSS. Таким образом, эти функции, если они используются, также могут привести к тому, что ваш сайт не будет работать должным образом в браузерах Safari.

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


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

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

              Проверьте Doctype

              Прежде всего вам нужно убедиться, что вы добавили DOCTYPE в свой HTML-файл.

              Если нет, сделайте это немедленно.

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

              Итак, если вы хотите, чтобы IE6 и выше имитировали поведение браузера, такого как Chrome и Firefox, вы можете добавить strict doctype .

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

              Если вы этого не сделаете, браузер будет работать в режиме Quirks и будет имитировать поведение более старых версий.

              Вы применили сброс CSS?

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

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

              И это имеет огромное значение для Internet Explorer!

              Очень известный сброс CSS Эрика Мейера может помочь вам решить эту проблему несовместимости браузера.Или вы можете использовать стандартные сбросы CSS, такие как normalize.css.

              Добавить сброс CSS довольно просто, все, что вам нужно сделать, это загрузить файл CSS и включить его в свой заголовок, например:

              Однако убедитесь, что вы добавили таблицу стилей сброса перед основной таблицей стилей.

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

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

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

              Или вы тоже можете попробовать.

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

              Предпочитайте использовать кроссбраузерные библиотеки javascript, такие как jQuery, AngularJS, ReactJS, MooTools, и некоторые фреймворки CSS, такие как Bootstrap, Foundation, 960 grid и т. Д. на них, что они не будут вводить какие-то глупые ошибки, которых можно очень легко избежать.

              Все готово? Давайте подтвердим!

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

              Вы можете использовать валидатор w3 для проверки HTML вашего сайта.

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

              Точно так же вы можете проверить и для CSS.Попробуйте использовать валидатор Jigsaw от W3. Вы снова увидите результаты вроде:

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

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

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

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

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

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

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

              Удачного тестирования!

              Автор: Дикша Агарвал

              Дикша Агарвал занимается развитием продуктов в LambdaTest, а также является страстным блоггером и пропагандистом продукта.

              .

              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, по-видимому, предлагает лучшее соотношение цены и качества.

              .

              Смотрите также

              Поделиться в соц. сетях

              Опубликовать в Facebook
              Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий