Перейти к тексту

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

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

Вся введенная информация защищена.

  • Закрыть [x]

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

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

Вся введенная информация защищена.

  • Закрыть [x]

Облегчение тестирования Web-приложений в нескольких браузерах

Инструменты на любой вкус и кошелёк

Джошуа Фрюлингер, редактор, независимый писатель
Джошуа Фрюлингер (Joshua Fruhlinger) – независимый редактор и автор. Он живёт с Балтиморе с женой Эмбер и кошкой Хоуги.

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

Дата:  05.12.2008
Уровень сложности:  средний
Активность:  5595 просмотров
Комментарии:  


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

А разве бывает что-то кроме IE?

В самом начале нового тысячелетия разработчики вполне обходились тестированием только для Internet Explorer, но эти времена давно ушли в прошлое. Сегодня с помощью IE выполняется около 80% посещений сайтов. Это большинство, но не подавляющее; ясно, что ни одна компания не захочет сбросить со счетов 20% своей клиентской базы!

Также не следует считать, что приверженность вашей аудитории определённому браузеру отражает предпочтения пользователей Интернета во всём мире. Привычка использовать определённый браузер или ОС варьируется в зависимости от интересов пользователя и страны, в которой он проживает. Многие сайты, адресованные специальной аудитории, с большей степенью вероятности будут посещаться пользователями, работающими не в Windows и в браузере Internet Explorer. Например, около 60% посетителей сайта developerWorks используют Internet Explorer, а примерно 35% – Firefox. А среди посещающих, в частности, раздел Web-разработка, браузер Firefox используют 51%, а Internet Explorer – всего 41% пользователей.

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

Фокусы с браузерами

"Навороты"

Помните, что не у всех пользователей в браузерах включена поддержка двух технологий, на которой основаны многие Web-приложения – Flash и JavaScript. Неважно, какую из обсуждаемых в статье методик вы в конечном счете будете использовать, тестирование следует выполнять с включенными и выключенными JavaScript и Flash (в большинстве размещённых сервисов включать и выключать эти опции довольно просто). Это относится и к cookie-файлам – можно отключить их использование, очистить, одним словом, нужно сделать всё, чтобы смоделировать возможные состояния браузера, открывающего ваш сайт.

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

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

Одновременный запуск разных версий одного и того же браузера может быть сопряжён с некоторыми трудностями, так как в процессе установки большинство браузеров перезаписывает предыдущие версии. К счастью, существуют обходные пути. В случае с Firefox требуется всего лишь сохранить исполняемые файлы каждого браузера под другим именем, а затем при первом запуске каждой версии обязательно запустить менеджер профилей, чтобы профили использовались отдельно. На рисунке 1 показаны две версии браузера Firefox – последний релиз 2.0.0.10 и древняя версия 0.7, работающие одновременно.


Рисунок 1. Несколько версий Firefox запущены одновременно
Несколько версий Firefox запущены одновременно

Аналогичный процесс для Internet Explorer немного сложнее. Windows очень не хочет, чтобы вы это делали; чтобы справиться с её упрямством, нужно изменить кое-какие настройки в реестре. TredoSoft, небольшая фирма по разработке ПО, получила известность в основном за счёт выпуска бесплатного и удобного инструмента для установки нескольких версий IE, а также инструкций по созданию необходимых ключей реестра и работе с DLL. Ссылку см. в разделе Ресурсы (там приведены также ссылки на другие инструменты и расширения, которые помогут вам в рассматриваемых в статье случаях, однако ни я, ни developerWorks не можем гарантировать правильность информации, размещённой на этих ресурсах).

Тестирование в реальной жизни

Следует не только тестировать разные браузеры с различными настройками; само собой разумеется (по крайней мере в теории), что тестовые машины (или доверенные удалённые пользователи-тестеры, если речь идёт о более скромной организации) должны иметь собственные подключения к Интернету. Другими словами, не забудьте протестировать реальное соединение и убедиться, что вас не сбивает с толку загрузка изображений и скриптов по локальной сети. Введите в сценарий тестирования любые возможные факторы из реальной жизни: программы, блокирующие всплывающие окна и рекламу, персональные брандмауэры, а также другое ПО, которое, вероятно, установлено на компьютерах пользователей – всё это способно повлиять на то, как отображаются ваши страницы, и поможет лучше понять процесс реальной работы конечного пользователя. Пакет Web Tripwire Toolkit, разработанный в Вашингтонском университете (см. раздел Ресурсы), поможет понять, в каких случаях причиной странного поведения приложения являются действия пользователей, а не реализация браузера.

Конечно же, прежде чем установить все эти браузеры и заставить их работать, нужно узнать, где их можно взять! Например, с сайта Microsoft® невозможно загрузить Internet Explorer 5, а посетив страницу Mozilla Foundation, трудно понять, как получить Firefox 1.0. К счастью, предприимчивые обитатели всемирной паутины создали архивы старых программ. Добровольное Web-сообщество evolt.org имеет богатую коллекцию старых браузеров на любой самый изысканный вкус, от IE до Opera и т. п., и хотя некоторые недавние релизы браузеров Mozilla отсутствуют, их можно найти на файлообменниках типа filehippo.com и т. п., что не так уж сложно. Что же касается Apple Safari, ранние версии этого браузера можно найти, посетив страницу проекта Multi-Safari (результат бескорыстного труда одного разработчика), причём упакованы они таким образом, что их можно без труда запускать одновременно (все ссылки см. в разделе Ресурсы).

Экономим пространство на экране

Одна из проблем, с которой можно столкнуться на практике при работе с несколькими браузерами, – слишком много окон на экране. Хотя по большей части избежать этого нельзя, существует возможность немного их систематизировать с помощью пары удобных инструментов. IE Tab – плагин для Firefox, позволяющий запускать экземпляр Internet Explorer во вкладке Firefox. Это не эмуляция – здесь действительно используется механизм обработки страниц IE, и это означает, что то, что вы видите, будет абсолютно так же отображаться в Explorer, хотя работать это будет только в Windows. На рисунке 2 показан плагин в действии.


Рисунок 2. Использование IE Tab
Использование IE Tab

RightLynx – плагин для Internet Explorer и Firefox. При нажатии правой кнопки мыши он создаёт всплывающее окно, в котором текущая страница показывается в том виде, в каком она была бы отображена в Lynx. При этом в постоянно открытом активном терминальном окне отпадает необходимость, а Web-сервис загружает страницу в Lynx и отправляет результирующий текст обратно на ваш компьютер. Оба эти инструмента бесплатны и просты в установке, а ссылки на них можно найти в разделе Ресурсы.

Lynx: хорошо забытое старое

Вы, возможно, не поверили своим глазам, когда прочитали о Lynx в предыдущем разделе. Тем из вас, кто слишком молод, чтобы это знать, напомню, что Lynx – это текстовый браузер, разработанный ещё в начале 1990-х годов и запускающийся из командной строки UNIX® (хотя есть версии для DOS и, следовательно, и для Windows). На рисунке 3 показан раздел Web-разработка, отображаемый в браузере Lynx.


Рисунок 3. Lynx в действии
Lynx в действии

Тестирование сайта в Lynx может на первый взгляд показаться совершенно бессмысленным занятием: в конце концов, практически любой человек, который захочет посетить ваш сайт, будет делать это с помощью современного графического браузера. Однако "скелет" сайта, отображающийся в браузере Lynx, очень похож на то, что "видят" при посещении сайта самые важные ваши гости: поисковые роботы и "пауки", индексирующие ваш сайт для поисковых систем и создающие значительный объём вашего трафика. Lynx может быть отличным инструментом, помогающим убедиться, что важные критерии поиска не "спрятаны" за Ajax-виджетами.

Виртуализация и эмуляция

Конечно же, браузеры создают лишь половину проблем при тестировании; вы, возможно, пожелаете выполнять тестирование на нескольких операционных системах. Очевидно, что это гораздо дороже загрузки на машину для разработки нескольких бесплатных браузеров. Понятно, что наиболее тщательный способ такого тестирования – иметь компьютер под Windows, Макинтош, Linux®-систему, а также физические версии любых других систем, которые необходимо протестировать. На это может уйти весь годовой бюджет, выделенный на Web-разработку. К счастью, существует множество способов превратить один компьютер в несколько платформ для тестирования.

Один из наиболее простых и очевидных способов состоит в создании систем с двойной загрузкой, в которых несколько ОС установлено на одной машине, а выбор загружаемой системы осуществляется при запуске компьютера. В общем, все ОС размещаются на отдельных разделах жёсткого диска, однако так называемые Live-дистрибутивы хранятся на CD или флешках, что помогает избежать сложностей, связанных с разными форматами жёстких дисков. Исторически загрузка двух ОС связана с Linux и другими дистрибутивами с открытым исходным кодом, однако с появлением Макинтошей на основе архитектуры x86 на многих машинах стало возможным загружать и Windows, и OS X.

Недостаток двойной загрузки состоит в том, что переключение между ОС занимает довольно длительное время. Всё обстоит по-другому при создании виртуальных сред, в которых несколько ОС запускаются одновременно. Раньше такие технологии применялись лишь на мощных серверах, а сейчас они доступны любому владельцу стандартного настольного ПК. Если вы намереваетесь обслуживать пользователей более чем одной ОС, вам потребуется тестовая машина, на которой установлены какие-либо средства виртуализации. На рисунке 4 показано использование Virtual PC на Power Mac для просмотра раздела Web-архитектура сайта developerWorks одновременно в четырёх разных браузерах, запущенных в двух операционных системах.


Рисунок 4. Четыре браузера одновременно: Safari в OS X, Firefox в OS X, Firefox в Windows XP и Internet Explorer
Четыре браузера одновременно: Safari в OS X, Firefox в OS X, Firefox в Windows XP и Internet Explorer

Существует несколько инструментов, в том числе VMWare и Virtual PC, облегчающих запуск Windows и большинства других x86-совместимых ОС на любом стандартном ПК. Одна ОС выступает в роли рабочей (host OS), а другие запускаются в виртуальной машине. Это позволяет тестировать ваши приложения на, скажем, Windows Vista, Windows XP и последней версии дистрибутива Ubuntu, запущенных в соседних окнах экрана безо всякой перезагрузки. Вам по-прежнему придётся покупать все эти ОС (а они не бесплатны), но по крайней мере компьютер для этого нужен всего один.

Вы, наверное, обратили внимание, что среди других операционных систем, перечисленных в предыдущем абзаце, я не упомянул Mac OS X. К сожалению, OS X можно запускать только на компьютерах Макинтош, однако для них предусмотрены возможности виртуализации. Таким образом, если вы хотите с помощью одного компьютера протестировать максимальное количество сред, подумайте об использовании Макинтоша с процессором Intel® и одного из двух имеющихся для этой платформы основных продуктов для создания виртуальных сред: VMWare Fusion или Parallels Desktop (ссылки см. в разделе Ресурсы). Имея такую конфигурацию, можно выполнять тестирование в OS X, Windows, Linux и любой другой операционной системе, поддерживающей архитектуру x86. Недостатком, конечно же, является то, что ни ПО, ни оборудование небесплатно, и даже недёшево.

Работа с мобильными устройствами

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

Для многих мобильных платформ имеются бесплатные SDK, в состав которых входят эмуляторы устройств, работающие на настольных ПК. Например, можно загрузить SDK для платформы Google Android (ссылку см. в разделе Ресурсы). Процесс получения доступа к браузеру не совсем очевиден (нужно установить плагины Android в среду разработки Eclipse, а затем запустить один из примеров приложений), но, выполнив это, вы получите доступ к браузеру, базирующемуся на WebKit, среде с открытым исходным кодом, лежащей в основе как Safari, так и браузера смартфонов Nokia S60. На рисунке 5 показан эмулятор браузера в действии.


Рисунок 5. Браузер Android SDK
Браузер Android SDK

Опять-таки, рынок мобильных браузеров довольно сильно фрагментирован, однако во многих дорогих смартфонах сейчас применяются модифицированные версии браузеров для настольных систем. В iPhone используется Safari, а ещё во множестве смартфонов – Opera Mobile, и значительный объём тестирования в "телефонных" браузерах можно выполнять прямо на десктопе, хотя стопроцентной гарантии это не даёт. (iPhoney – это приложение для OS X, в которой используется стандартная компьютерная версия Safari, но, по крайней мере, с её помощью можно получить представление о том, как ваш сайт может выглядеть на маленьком экранчике iPhone; ссылку для бесплатной загрузки см. в разделе Ресурсы).

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

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

Аутсорсинг тестирования

Дочитав статью до этого места, вы можете прийти в отчаяние. Возможно, проект нужно сдавать завтра. Возможно, мои доводы вас не убедили. Возможно, существуют жёсткие ограничения по финансированию или по времени. Возможно, ИТ-отдел недоволен, что вы устанавливаете на ваш компьютер старые версии браузеров или ковыряетесь в реестре. Что же делать? Неужели придётся выполнить тестирование только на самых последних версиях Firefox и IE?

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

Примером такого рода бесплатного сервиса может служить сайт Browsershots.org. На рисунке 6 показаны различные доступные вам опции (здесь отсутствуют мобильные платформы и Lynx). Для каждой выбранной опции вы получите PNG-файл с экранной копией, расположенной по указанному вами URL-адресу страницы, отображенной в данном браузере для данной ОС. Весь процесс может занять полчаса или дольше, поэтому есть смысл запускать эту операцию в фоновом режиме и заняться в этот момент чем-то ещё, но в результате можно получить ценную информацию совершенно бесплатно.


Рисунок 6. Настройка получения результатов с Browsershots.org
Настройка получения результатов с Browsershots.org

Если тестирование обязательно нужно выполнить до завтра – и на всех платформах и браузерах, и если вы располагаете соответствующим бюджетом, можно пойти немного дальше. Например, за ежемесячную плату сайт Browsercam.com предоставляет доступ к более широкому набору платформ и браузеров, в том числе к некоторым мобильным платформам. Так как страницы формируются динамически, можно тестировать Ajax-приложения и другие страницы на основе JavaScript. Некоторые сервисы, например Litmusapp, могут интегрироваться с вашими потоками операций по тестированию и разработке, предлагая поддержку управления версиями и способы публикации тестовых результатов во внешних клиентах .

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

Заключение

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


Ресурсы

Научиться

Получить продукты и технологии

  • Android SDK: этот бесплатный инструментарий Google для разработки ПО для мобильных устройств содержит плагин Eclipse, эмулирующий мобильный браузер (EN).

  • Архив браузеров evolt: очень богатая коллекция старых браузеров – загружайте и тестируйте. Отсутствуют некоторые недавние релизы, зато имеются все версии Internet Explorer до шестой (EN).

  • Firefox на filehippo.com: отсюда можно загрузить любую версию Firefox, начиная с версии 1.0 (EN).

  • Multi-Safari: загрузите несколько версий Web-браузера Apple и запустите их одновременно (EN).

  • IE Tab: запуск Internet Explorer во вкладке Firefox (EN).

  • RightLynx Lynx Preview Tool: посмотрите, как выглядят ваши страницы в Lynx, не выходя из графического браузера. Работает с Firefox и Internet Explorer (EN).

  • Lynx: назад в будущее с помощью этого текстового браузера.

  • Virtual PC и VMWare: ПО для запуска виртуальных ОС для архитектуры x86 (EN).

  • Parallels Desktop и VMWare Fusion: популярные продукты для запуска виртуальных ОС для компьютеров Макинтош с процессорами Intel (EN).

  • WapTiger: посмотрите, как выглядят WAP-страницы прямо на вашем ПК (EN).

  • iPhoney: посмотрите, как будут выглядеть ваши сайты на сверхпопулярном iPhone (EN).

  • Browsershots.org: бесплатный сервис для кроссплатформенного тестирования (EN).

  • Browsercam.com: платный сервис, позволяющий удалённо взаимодействовать с вашей Web-страницей на множестве платформ (EN).

  • Litmusapp: специальный платный сервис, интегрирующийся с вашими рабочими процессами разработки (EN).

  • DotMobi Virtual Developer Lab: этот платный сервис предоставляет доступ к сотням различных мобильных устройств с целью их тестирования (EN).

Обсудить

Об авторе

Джошуа Фрюлингер (Joshua Fruhlinger) – независимый редактор и автор. Он живёт с Балтиморе с женой Эмбер и кошкой Хоуги.

Помощь по сообщениям о нарушениях

Сообщение о нарушениях

Спасибо. Эта запись была помечена для модератора.


Помощь по сообщениям о нарушениях

Сообщение о нарушениях

Сообщение о нарушении не было отправлено. Попробуйте, пожалуйста, позже.


developerWorks: вход


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


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

Выберите ваше отображаемое имя

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

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

(Должно содержать от 3 до 31 символа.)


Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Оценить эту статью

Комментарии

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=SOA и Web-сервисы
ArticleID=355930
ArticleTitle=Облегчение тестирования Web-приложений в нескольких браузерах
publish-date=12052008
author1-email=dw@jfruh.com
author1-email-cc=

Теги

Help
Используйте форму поиска, чтобы найти любой контент с данным тегом в My developerWorks. Используйте ползунок, чтобы отразить больше или меньше тегов.

КнопкаПопулярные теги отображает самые распространенные теги для данной области контента (например: Java, Linux, WebSphere).

Кнопка Мои теги отображает Ваши теги для данной области контента (например: Java, Linux, WebSphere).

Используйте форму поиска, чтобы найти любой контент с данным тегом в My developerWorks. Кнопка Популярные теги отображает самые распространенные теги для данной области контента (например: Java, Linux, WebSphere). Кнопка Мои теги отображает Ваши теги для данной области контента (например: Java, Linux, WebSphere).