Как сайт выглядит в разных браузерах

Обновлено: 07.07.2024

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

< th scope="row">Цель:

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

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

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

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

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

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

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

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

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

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

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

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

Кроссбраузерные проблемы обычно возникают из-за того, что:

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

и другие причины.

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

Рабочие процессы для кроссбраузерного тестирования

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

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

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

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

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

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

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

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

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

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

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

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

Разработка

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

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

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

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

Сообщить об ошибке

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

Обзор

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

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

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

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

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

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

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

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

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

Как протестировать сайт WordPress в нескольких браузерах (3 простых инструмента)

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

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

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

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

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

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

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

Тем не менее, есть также 7-дневная бесплатная пробная версия, предлагающая 100 минут автоматического и 100 минут ручного тестирования. Этого времени достаточно, чтобы опробовать все функции, посмотреть, нравятся ли они вам, и даже протестировать небольшой сайт.

После регистрации учетной записи вы получите доступ к полной панели инструментов:

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

После запуска теста вы получите доступ к полной симуляции вашего сайта:

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

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

2. Сравнение

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

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

Однако Comparium немного более ограничен, чем CrossBrowserTesting. В настоящее время он поддерживает только живое тестирование в браузерах Linux и Windows 10. Платформа еще не имитирует устройства macOS, Android или iOS.

Вы можете создать бесплатную учетную запись для использования Comparium. Этот план будет включать в себя 1000 скриншотов и 40 живых сессий в месяц.Кроме того, вы можете перейти на один из премиум-пакетов по цене от 149 долларов США в год.

Чтобы начать, вы можете ввести имя пользователя и пароль или зарегистрироваться с помощью своей учетной записи Google:

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

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

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

3. Браузер

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

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

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

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

Заключение

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

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

CrossBrowserTesting: комплексный вариант премиум-класса, который поддерживает снимки экрана и тестирование в реальном времени с использованием физических устройств.
Comparium: бесплатный инструмент, поддерживающий создание скриншотов и живое тестирование в браузерах Linux и Windows 10.
Browserling: бесплатный инструмент, который можно использовать для быстрого тестирования веб-сайта, с обновлением для доступа к снимкам экрана и функциям безопасного тестирования.

У вас есть вопросы о том, как протестировать веб-сайт в разных браузерах? Дайте нам знать в разделе комментариев ниже!

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

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

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

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

Браузеры отображают стандартные элементы сайта по-разному

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

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

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

Разные браузеры могут не поддерживать определенные HTML/CSS

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

Хорошим примером этого является новый режим макета «flexbox», включенный в CSS3 (последняя версия CSS). Flexbox — это, по сути, удобный и простой способ компоновки ваших HTML-страниц. Он обеспечивает «предсказуемое поведение» HTML-элементов при изменении размера, изменении макета страницы и т. д.

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

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

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

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

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

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

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

Вы можете обратно проксировать локальный хост или локальный сервер в Browserling с помощью наших туннелей SSH. Местное руководство по тестированию.

Все соединения между вами и Browserling зашифрованы по протоколу SSL. Ваш просмотр полностью анонимен!

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

Хром
Файрфокс
Опера
Сафари
IE
Край

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

Вы можете по запросу встраивать браузеры в свои приложения и автоматизировать их с помощью удобного API. Узнайте больше о Live API.

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

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

Цены

Наши клиенты

Отзывы

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

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

Вы нужны каждому веб-агентству.

Мы полагаемся на Browserling и Testling как часть наших процессов развертывания и тестирования при публикации наших библиотек JavaScript для пользовательской базы PubNub JavaScript. Это отличный сервис для быстрого тестирования всех сред JavaScript.

У вас есть абсолютно лучший инструмент, очень быстрый и отзывчивый.

Намного лучше, чем Sauce Labs!

Browserling помогает MergEye предоставлять нашим клиентам услуги высочайшего качества.Наш процесс контроля качества сильно зависит от тестирования Live API Browserling. Без Browserling нам пришлось бы поддерживать более 20 виртуальных машин для запуска наших тестов. Browser экономит нам 12 000 долларов в год на лицензировании и рабочей силе. Мы любим Browser!

Browserling разработал специальное решение для кроссбраузерного тестирования для ECESIS Technologies.

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

Подпишитесь на обновления!

Читайте также: