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


7 простых способов протестировать кроссбраузерную совместимость / Хабр

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

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

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

#1 — Xenocode Browser Sandbox

Xenocode Browser Sandbox — это гейм-чейнджер для тестирования браузеров на компьютерах с Windows. Всего лишь одним кликом мыши, вы можете открыть и работать в браузере, без всякой инсталляции. Вы можете тестировать различные версии IE, Firefox, Google Chrome и Safari. В прямом смысле тестировать, а не только получать скриншоты.

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

#2 — CrossBrowserTesting.com

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

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

#3 — IETester

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

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

#4 — BrowsrCamp

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

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

#5 — Litmus

В течении нескольких месяцев, популярность Litmus значительно возросла, и он стал одним из самых благоприятных инструментов для тестирования кроссбраузерности. К сожалению его бесплатные возможности ограничены и позволяют тестировать только IE7 и Firefox 2.

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

#6 — NetRenderer

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

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

#7 — BrowserShots

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

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

Bonus #8 — Adobe MeerMeer

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

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

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

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

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

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

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

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

BrowserShots

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

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

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

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

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

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

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

Лямбда-тест

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

Связанные

.

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

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

.

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 Компилятор 9000

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

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

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

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

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

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

              Сводка

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

              В этом модуле

              .

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

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

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

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