—»     —»   Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer
  Раздел: Браузеры   Комментариев: 1  

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer



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

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

Перед тем как начать, давайте отметим кое-что важное. Корректное тестирование сайтов в Internet Explorer (как указано в заголовке статьи) требует достаточно много усилий. Итак, для начала ознакомьтесь со статистикой своего веб-сайта, чтобы быть в курсе того, какой процент посетителей вашего веб-сайта использует IE.

Internet Explorer (версии от 6 до 10)

Давайте начнем с нашего старого «доброго» друга, Internet Explorer (IE). Многим уже наверняка известно, что запустить несколько разных версий данного браузера в пределах одной операционной системы – это достаточно сложная задача ввиду различий в версиях запускных файлов ПО. Сказать по правде, очень сомнителен тот факт, что разработчики Microsoft могли задумываться о проблеме кросс-браузерной поддержки, когда разрабатывали 6, 7 и даже 8 версии браузера.

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

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

Если вам интересно, то команда AOL за основу использует IE7, хотя тестирование также производится на различных версиях Chrome, Firefox, Opera, Safari и, конечно же, IE от 8 до 10 версий.

Причина к использованию IE7 заключается в результатах мировой статистики: IE 6, 7 и 8 являются наиболее распространенными браузерами в мире. Тем не менее, команда разработчиков AOL уже отказалась от 6-ой версии всего пару месяцев назад. Главная причина кроется в том, что у IE6 наблюдается большее число несовместимостей с современными технологиями, и по личным вычислениям было выяснено, что, если не ориентироваться на корректное отображение в IE6, то проекты можно закачивать на 20% быстрее по времени.

Большинство сторонних инструментов для тестирования ненадежны

Если для поиска инструментов для тестирования вы воспользуетесь поисковой системой Google, то тут же получите как минимум 10 результатов с различными подходящими решениями, 9 из которых нам точно не подойдут. Давайте рассмотрим некоторые из них и, возможно, окажется, что некоторыми из них вы пользуетесь в своей повседневной работе.

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

IETester

К сожалению, IETester – это возможно один из наиболее популярных инструментов, который используется многими разработчиками и дизайнерами для тестирования проектов на различных версиях IE. Когда мы впервые попробовали осуществить поиск, нам были предложены сотни обещаний, что «именно это приложение поможет» нам полноценно протестировать наш веб-сайт. Тем не менее, всё это было крайне оптимистично на словах, но очень печально в реальности.

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

Здесь у нас возникает несколько несоответствий при тестировании проекта в IE версий 6, 7 и 8. Точнее сказать, возникает несоответствие приложения с реальной средой настоящих браузеров. Это было подтверждено многими командами разработчиков, которые пытались использовать IETester в качестве основного инструмента для тестирования веб-сайтов. Были выявлены несоответствия взаимодействия с всплывающими окнами, с Flash и CSS фильтрами. Более того, переключение между версиями браузеров приводило к краху приложения.

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

Multiple IE

Multiple IE от TredoSoft – это очередной инструмент, отображенный в результатах Google. К несчастью, данное приложение также наполнено множеством несоответствий, включая также некорректный рендеринг. Основная проблема заключается в том, что в процессе тестирования веб-сайта на соответствие с браузером IE 6, мы все равно получаем ошибки, связанные с проблемами рендеринга, присущими браузеру IE 5.5, а ведь это совсем не то, что нам нужно, если мы решили протестировать веб-сайт именно в IE 6.

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

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

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

Expression Web SuperPreview

Следующий по списку у нас Expression Web SuperPreview от Microsoft, описание которого повествует нам об облегчении процесса тестирования и оптимизации шаблонов для различных версий браузеров.

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

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

BrowserLabs, Browsershots, BrowserCam

Некоторые из наших коллег используют BrowserLabs от Adobe, в редких случаях – Browsershots (если требуется тестирование статичной разметки). Но, опять же, ни одно из данных приложений не позволяют нам тестировать взаимодействие пользователей со страницей. То же самое можно сказать и про BrowserCam. Данные сервисы просто не предназначены для этого, но, тем не менее, крайне часто можно видеть дизайнеров и разработчиков, которые используют данные приложения.

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

Windows Virtual PC

Со следующим инструментом вы вероятно уже знакомы, а именно – Virtual PC от Microsoft.

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

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

Режимы браузера и документа

Итак, мы просмотрели сторонние приложения, и теперь самое время задаться вопросом о том, что же компания Microsoft предлагает нам взять на вооружение?

Как IE 9, так и IE 10 PP2 поддерживают функцию переключения с режима браузера в режим документа посредством F12 Developer Tools, предназначенного для тестирования кросс-браузерности. Дабы уточнить, тестирование на версионном уровне браузеров здесь реализовано благодаря своего рода имитации.

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

«Режим документа» определяет, к каким свойствам у страницы есть доступ, и что может быть отображено на основе doctype, указанного в документе, X-UA-совместимый мета-тэг, а также заголовки. Например, стандартный режим документа позволяет странице извлечь всё самое лучшее из процесса реализации ECMAScript 5 (ES5) в IE, в то время как стандартные режимы IE7 и 8 предлагает совершенно другие варианты.

«Режим браузера», с другой стороны, имитирует поведение различных версий браузера IE, и может быть изменен непосредственно с помощью IE Developer Tools. Имитация реализована несколькими новыми вариациями, но также включает в себя, как режим документа, так и последовательность user-agent. Если вас это удивляет, то UA используется здесь дабы удостовериться, что код, основанный на функциях пассивной обработки UA, и версия браузера подобраны корректно.

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

Стоит отметить, что IE 9 укомплектован более новым движком javascript под названием Chakra. Хотя браузер сам по себе поддерживает несколько режимов совместимости, из-за того, что сам движок JS в значительной степени отличается от того, которым укомплектованы версии 6, 7 и 8, мы можем наблюдать несколько определенных различий между тем, что мы видим в IE 9 и тем, что реализовано в инструменте тестирования.

Также, к сожалению, в работе, как режима браузера, так и режима документа можно встретить различные «причуды». Команда разработчиков из AOL пробовала запускать сценарии, в которых IE возвращает серверу некорректную строку UA, что также в результате привело к различной выдаче сторонними инструментами для тестирования и настоящими браузерами.

Наконец (и тоже странно), данные режимы демонстрируют нам несколькие нестыковки, которые даже нельзя встретить в самих браузерах IE версий 6, 7 и 8, что лишь осложняет процесс тестирования для определенной версии браузера.

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

Верные решения по тестированию совместимости с IE

Вариант 1: Виртуальный сервер + IECollection

Мы рассмотрели несколько инструментов, которые не предоставляют всеобъемлющее решение по тестированию веб-сайтов на совместимость между различными версиями браузера IE. Итак, чем же тогда пользоваться? Решение заключается в использовании выделенной виртуальной машины и инструмента под названием IE Collection.

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

Давайте рассмотрим свойства инструмента IE Collection от Utilu:

* Протестированная коллекция отдельных версий IE, включая версии от 1 до 9;
* Подтвержденная поддержка корректного рендеринга в сравнении с оригинальными браузерами IE;
* Подтвержденная поддержка корректной реализации IE javascript-движка, которым укомплектованы оригинальные версии;
* Подтвержденная поддержка корректных строчек UA (Хотя, это вряд ли стоит на первом месте, но лишним точно не будет…);
* Поддержка как 32-битных, так и 64-битных версий ОС Windows XP, 2003, Vista и 7;
* Доступ к панели инструментов IE Developer, которая идёт вместе со стандартными настройками IE Collection; совместимая с IE 5 и выше, но у вас также будет возможность установить Firebug Lite, по собственному предпочтению.

Хотя и большинство версий IE поддерживаются и функционируют в данной коллекции, существуют некоторые нестыковки при работе с IE 7 версии, если использовать Windows Vista или Windows 7 (об этом сообщается на сайте Utilu). Далее мы расскажем, как справиться с подобным ограничением, но для начала давайте разберемся с виртуальными машинами.

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

Виртуальная машина представляет собой нечто вроде «гостевой» операционной системы, запущенной внутри нормальной операционной системы, установленной на «хосте». Данный метод эффективно позволяет вам устанавливать и запускать выделенные копии почти любой операционной системы внутри вашей текущей, и разделять с ней настраиваемые элементы памяти и ресурсы жесткого диска. Например, Windows 7 VM может быть без труда запущена на Mac OS X, точно также, как и Ubuntu VM может быть запущена на Windows и так далее.

Для того чтобы начать работать с виртуальной машиной, вам понадобятся две вещи: инструмент виртуализации для создания виртуальной машины, установленный в вашей ОС и диск или образ операционной системы, которую вы хотите запустить на виртуальный машине. Если вы являетесь служащим нормальной компании, то у вас наверняка есть доступ к лицензионным версиям Windows. Если вы студент колледжа, то вы также наверняка можете получить бесплатные лицензионные копии Windows XP SP3, Vista и 7 в вашем учебном заведении.

Вы можете установить множества различных настроек для тестирования Windows и IE, но если вы используете IE Collection, мы рекомендуем вам держаться следующего:

* Windows 7 для IE 6, 8, 9, 10;
* Windows XP (SP3) для IE 7.

На сегодняшний день вам не нужно беспокоиться о версиях IE ниже 6, но версии от IE 4 до 5.5 также лучше всего будут работать при XP SP3.

В компании AOL, разработчики используют комбинацию VirtualBox, Parallels и VMware для того, чтобы создавать виртуальные машины. Мы же предпочитаем использовать VirtualBox от Sun ввиду следующих преимуществ:

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

Короче говоря, VMware считается более лучшим вариантом, если нужно работать с отдельным сервером. В конечном счёте, все три опции вполне корректны. К тому же, как Parallels, так и VMware предлагают вам пробные версии. Поэтому, здесь всё зависит от вашего предпочтения.

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

Давайте рассмотрим три этапа настройки:

1. Если вы используете MAC, то мы рекомендуем вам использовать образ 32-битной ОС Windows 7 Pro или Ultimate (либо, конечно же, установочный диск), с минимально выделенными 17 гб дискового пространства, требуемые для установки. Выделите 512 мб ОЗУ для виртуальной машины (эту настройку можно выставить в панели опций) – этого должно вполне хватит на нужды тестирования в не выделенной машине, но вполне нормально, если вы выставите больше памяти. Виртуальную машину можно создать посредством VirtualBox, которую мы настроили на работу при разрешении экрана в 800х600 и 1024х768 пикселей. Пользователи Windows имеют две опции. Если вы уже используете Win 7, можете пропустить второй этап настройки, где мы рассказываем о начале установки IE Collection. Если же вы используете другую версию Windows и на виртуальной машине хотели бы запустить Win 7, то следуйте указаниям для пользователей MAC, которые описаны выше. Пользователи Mac и Windows должны загрузить виртуальную машину или установку Windows на выделенном рабочем столе перед тем, как перейти ко второму этапу.

2. Далее скачивайте IE Collection с веб-сайта Utilu, а затем устанавливайте Windows 7 на виртуальную, либо на основную машину, в зависимости от ваших настроек. Это даст вам доступ к IE 6, 8 и 9. В целях раздельного тестирования, мы также обычно устанавливаем IE 10, но важно не забывать о том, что версия всё ещё в стадии разработки.

3. Для пользователей MAC и Windows: для решения проблемы с неработающим IE 7 в Win 7, вам нужно создать еще одну виртуальную машину, на которой будет установлен Windows XP installed (лучше, если это будет SP3).
Так как проблем в работе IE 7 из IE Collection и оригинального браузера IE 7 в данной ОС не было зарегистрировано, то нам и следует отталкиваться отсюда. Как было указано в предыдущей инструкции, добудьте где-либо образ или установочный диск Windows XP, и создайте новую виртуальную машину при помощи VirtualBox. Загрузите её, установите IE7 посредством ссылки, приведенной выше, и на этом всё.

Действительно всё! Некоторые разработчики предпочитают запускать IE 6 и 7 в Windows XP (этап 3), вместо того, чтобы запустить их в Windows 7 или Vista, так как XP до сих пор является ОСью, которую используют большинство пользователей во всем мире, которые, к тому же, до сих пор не обновили IE до версии 8 или 9. Данный вариант тоже вполне корректен. Настройки достаточно гибки, чтобы поддерживать незначительные различия в пользовательских настройках.

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

Вариант 2: Выделенная виртуальная машина для каждой версии IE

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

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

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

Если вы настраиваете выделенные виртуальные машины для отдельных версий IE, мы рекомендуем вам использовать следующие настройки:

* Windows XP (SP3) для IE 6,
* Windows Vista (SP2) для IE 7,
* Windows Vista (SP2) для IE 8,
* Windows 7 для IE 9 и 10.

Многие задаются вопросом о том, что, если возможно использовать выделенные виртуальные машины, то почему крупные организации (вроде AOL) не используют данный подход… Мы можем ответить лишь за себя: нам пришлось отказаться от данного подхода ввиду того, что запуск 3-4 виртуальных машин внутри одной системы все равно требует крайне много ресурсов, что приводит к невозможности использования остальных приложений.

При минимальной конфигурации в 512мб ОЗУ на каждую выделенную виртуалку, нам нужно иметь 2гб ОЗУ (если не больше) только лишь на нужды тестирования. Конечно, это удобно и позволительно, если у вас есть 8гб ОЗУ или больше. Но если нет, то остаётся лишь надеяться, что ваша система выдержит такие нагрузки.

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

Вариант 3: VNC или RDP + выделенные машины для тестирования

Надежное тестирование на кросс-браузерность – Часть 1: Internet Explorer

Некоторые компании (типа ZURB) предпочитают использовать некую форму доступа к удаленному рабочему столу, что позволяет дизайнерам и разработчикам авторизоваться на выделенной машине или в сеть выделенных машин, и производить тестирование на них. Преимущество данного метода заключается в пониженном требовании к ОЗУ для каждого клиента. А реализовано это может быть несколькими образами: VNC и RDP – первое, что приходит в голову.

Virtual network computing (VNC) представляет собой систему шаринга выделенных рабочих столов, которая позволяет вам управлять другим компьютером на расстоянии. Система передает как события клавиатуры, так и мыши. Примерно по тому же принципу, RDP позволяет пользователям осуществлять подключение к приложениям внутри сети, но права данного протокола принадлежат Microsoft. Если вы используете Mac OS X, то VNC уже встроен в систему, но некоторые VNC-клиенты также доступны извне (например, RealVNC). Что касается RDP, то MAC-пользователи могут использовать встроенную в продукцию Apple функцию – Remote Desktop или же Remote Desktop Connection от Microsoft.

Возможно, вас мучает вопрос о том, в чем же разница между VNC и RDP. RDP предлагает вам более гибкое управление, шрифты и другие графические примитивные элементы, а VNC немного «отстаёт» в этом вопросе. Хотя, стоит отметить, что VNC позволяет осуществлять разделение сессии с целевой машиной, что может быть полезным, если работают несколько пользователей. В RDP такой функции не наблюдается (по крайней мере, насколько нам это известно).

Учитывая всё вышесказанное, вы вероятно зададите вопрос: «Если вопрос с оперативной памятью, таким образом, решён, то почему же и этот вариант игнорируется многими крупными компаниями типа AOL?» Основная причина кроется в том, что тестирование по сети с завидной частотой приводит к потере некоторых пакетов данных, что может значительно повлиять на процесс тестирования интерактивных приложений или веб-сайтов. Плюс ко всему, веб-сайты, в которых используется множество медиа-элементов, основанных на Canvas, SVG и так далее, не могут быть досконально протестированы по сети. Но не нужно переносить наш или чей-либо опыт и предпочтения на свой счет. Нам известны многие команды, которые используют именно данный подход.

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

Заключение

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

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

До связи!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Internet Explorer
Опубликовал Design FactoRy   Прочитано (раз): 10641   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 1 февраля 2012 @ 21:36
Написал: Sana2020 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересная статья,но лично для меня лучшим и надежным остается и есть браузер internet explorer!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Тэн
Тэны для водонагревателей Электролюкс. Доставка! Гарантия
петербург.купитьтэн.рф
Зеленый чай купить
Купите Зелёный Чай от известного дома. Прямые поставки. Докризисные цены
tea-philosophy.ru
Купить анализатор антенн
Приборы для настройки спутниковых антенн купить, доставка, Самовывоз
unicom.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930