Все мы знаем, или должны знать, что наши Web-приложения нужно тестировать в разных браузерах и операционных системах. В принципе все это понимают, но зачастую бывает проще не предпринимать в этом направлении никаких усилий. Если задаться вопросом, какое количество комбинаций браузеров и операционных систем могут использовать клиенты при посещении вашего сайта, проведение полного набора кроссбраузерных тестов может показаться слишком дорогим решением.
А разве бывает что-то кроме IE?
В самом начале нового тысячелетия разработчики вполне обходились тестированием только для Internet Explorer, но эти времена давно ушли в прошлое. Сегодня с помощью IE выполняется около 80% посещений сайтов. Это большинство, но не подавляющее; ясно, что ни одна компания не захочет сбросить со счетов 20% своей клиентской базы!
Также не следует считать, что приверженность вашей аудитории определённому браузеру отражает предпочтения пользователей Интернета во всём мире. Привычка использовать определённый браузер или ОС варьируется в зависимости от интересов пользователя и страны, в которой он проживает. Многие сайты, адресованные специальной аудитории, с большей степенью вероятности будут посещаться пользователями, работающими не в Windows и в браузере Internet Explorer. Например, около 60% посетителей сайта developerWorks используют Internet Explorer, а примерно 35% – Firefox. А среди посещающих, в частности, раздел Web-разработка, браузер Firefox используют 51%, а Internet Explorer – всего 41% пользователей.
К счастью, имеются инструменты и методики, несколько облегчающие и удешевляющие этот процесс. Наша статья познакомит вас с разнообразными стратегиями тестирования; вы сможете выбрать то, что лучше всего вам подходит, в зависимости от ваших потребностей и ресурсов. Я начну с объяснения некоторых более тщательных способов тестирования, но имейте в виду, что существуют и другие варианты, которые можно применить в тех случаях, когда ограничения во времени или ресурсах вынуждают выполнять менее глубокое тестирование.
Наиболее очевидный, тщательный и в большинстве случаев самый дорогой способ тестирования приложений в разных браузерах и операционных системах – это, собственно, и есть тестирование в разных браузерах и ОС. Во многих отношениях браузер представляет собой самую простую часть уравнения, поскольку большинство самых популярных средств тестирования бесплатны. Тем не менее следует помнить, что, по всей вероятности, вам придётся тестировать не несколько разных браузеров, а несколько разных версий одного браузера. У вас, как у разработчика, на компьютере наверняка установлены последние и лучшие версии браузеров (прежде всего именно поэтому тестирование в нескольких браузерах приобрело такую популярность). Однако взглянув на статистические данные по типу браузеров, использующихся для доступа к вашему сайту, вы, скорее всего, придёте к выводу, что по крайней мере у некоторых ваших клиентов дела обстоят совсем по-другому.
Одновременный запуск разных версий одного и того же браузера может быть сопряжён с некоторыми трудностями, так как в процессе установки большинство браузеров перезаписывает предыдущие версии. К счастью, существуют обходные пути. В случае с Firefox требуется всего лишь сохранить исполняемые файлы каждого браузера под другим именем, а затем при первом запуске каждой версии обязательно запустить менеджер профилей, чтобы профили использовались отдельно. На рисунке 1 показаны две версии браузера Firefox – последний релиз 2.0.0.10 и древняя версия 0.7, работающие одновременно.
Рисунок 1. Несколько версий Firefox запущены одновременно
Аналогичный процесс для Internet Explorer немного сложнее. Windows очень не хочет, чтобы вы это делали; чтобы справиться с её упрямством, нужно изменить кое-какие настройки в реестре. TredoSoft, небольшая фирма по разработке ПО, получила известность в основном за счёт выпуска бесплатного и удобного инструмента для установки нескольких версий IE, а также инструкций по созданию необходимых ключей реестра и работе с DLL. Ссылку см. в разделе Ресурсы (там приведены также ссылки на другие инструменты и расширения, которые помогут вам в рассматриваемых в статье случаях, однако ни я, ни developerWorks не можем гарантировать правильность информации, размещённой на этих ресурсах).
Конечно же, прежде чем установить все эти браузеры и заставить их работать, нужно узнать, где их можно взять! Например, с сайта 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
RightLynx – плагин для Internet Explorer и Firefox. При нажатии правой кнопки мыши он создаёт всплывающее окно, в котором текущая страница показывается в том виде, в каком она была бы отображена в Lynx. При этом в постоянно открытом активном терминальном окне отпадает необходимость, а Web-сервис загружает страницу в Lynx и отправляет результирующий текст обратно на ваш компьютер. Оба эти инструмента бесплатны и просты в установке, а ссылки на них можно найти в разделе Ресурсы.
Вы, возможно, не поверили своим глазам, когда прочитали о Lynx в предыдущем разделе. Тем из вас, кто слишком молод, чтобы это знать, напомню, что Lynx – это текстовый браузер, разработанный ещё в начале 1990-х годов и запускающийся из командной строки UNIX® (хотя есть версии для DOS и, следовательно, и для Windows). На рисунке 3 показан раздел Web-разработка, отображаемый в браузере Lynx.
Рисунок 3. 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
Существует несколько инструментов, в том числе 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
Опять-таки, рынок мобильных браузеров довольно сильно фрагментирован, однако во многих дорогих смартфонах сейчас применяются модифицированные версии браузеров для настольных систем. В iPhone используется Safari, а ещё во множестве смартфонов – Opera Mobile, и значительный объём тестирования в "телефонных" браузерах можно выполнять прямо на десктопе, хотя стопроцентной гарантии это не даёт. (iPhoney – это приложение для OS X, в которой используется стандартная компьютерная версия Safari, но, по крайней мере, с её помощью можно получить представление о том, как ваш сайт может выглядеть на маленьком экранчике iPhone; ссылку для бесплатной загрузки см. в разделе Ресурсы).
Конечно, существует ещё множество телефонов, выходящих в Интернет из "огороженного сада" под названием WAP. В Сети можно найти бесчисленные бесплатные WAP-эмуляторы, которые просто запускаются в окне браузера, если у вас возникнет необходимость протестировать WAP-сайт.
В общем, для мобильных устройств сложнее всего проводить качественное тестирование, не выходя за рамки вашего предприятия. Но есть и другие варианты, о чём я расскажу в следующем разделе.
Дочитав статью до этого места, вы можете прийти в отчаяние. Возможно, проект нужно сдавать завтра. Возможно, мои доводы вас не убедили. Возможно, существуют жёсткие ограничения по финансированию или по времени. Возможно, ИТ-отдел недоволен, что вы устанавливаете на ваш компьютер старые версии браузеров или ковыряетесь в реестре. Что же делать? Неужели придётся выполнить тестирование только на самых последних версиях Firefox и IE?
Выход есть: можно использовать специальный сервис, который выполнит тестирование за вас. Вы указываете URL, а сервис покажет вам, как будет выглядеть размещённая по этому адресу страница на разных платформах. Вы теряете возможность экспериментировать с сайтом с вашей тестовой машины, зато получаете доступ к довольно большому набору платформ за очень низкую цену, а иногда совершенно бесплатно.
Примером такого рода бесплатного сервиса может служить сайт Browsershots.org. На рисунке 6 показаны различные доступные вам опции (здесь отсутствуют мобильные платформы и Lynx). Для каждой выбранной опции вы получите PNG-файл с экранной копией, расположенной по указанному вами URL-адресу страницы, отображенной в данном браузере для данной ОС. Весь процесс может занять полчаса или дольше, поэтому есть смысл запускать эту операцию в фоновом режиме и заняться в этот момент чем-то ещё, но в результате можно получить ценную информацию совершенно бесплатно.
Рисунок 6. Настройка получения результатов с Browsershots.org
Если тестирование обязательно нужно выполнить до завтра – и на всех платформах и браузерах, и если вы располагаете соответствующим бюджетом, можно пойти немного дальше. Например, за ежемесячную плату сайт Browsercam.com предоставляет доступ к более широкому набору платформ и браузеров, в том числе к некоторым мобильным платформам. Так как страницы формируются динамически, можно тестировать Ajax-приложения и другие страницы на основе JavaScript. Некоторые сервисы, например Litmusapp, могут интегрироваться с вашими потоками операций по тестированию и разработке, предлагая поддержку управления версиями и способы публикации тестовых результатов во внешних клиентах .
Подобные сервисы также хорошо подходят для мира мобильных устройств, где новые модели появляются быстрее, чем большинство людей успевает это замечать. DotMobi Virtual Developer Lab – хороший пример специального сервиса, ориентированного на мобильные устройства; он предлагает доступ к сотням различных устройств и позволяет управлять ими множеством способов. В обоих случаях интерфейс не совсем такой, как при работе с реальным устройством, но он почти всегда максимально приближен к ожидаемому результату; а поскольку этот сервис предназначен исключительно для мобильных устройств, он послужит дополнением к вашим внутренним тестам или другому подобному сервису для настольных систем.
В идеале, тестировать следует каждое Web-приложение, чтобы гарантировать его правильную работу в любом браузере, в котором его можно открыть. Но в связи с фрагментированностью рынка браузеров и растущим значением постоянно изменяющегося мира мобильных платформ добиться этого на практике очень сложно. Тем не менее к этому идеалу можно приблизиться. Существует масса инструментов для кроссплатформенного тестирования Web-приложений. Неважно, располагаете вы достаточными ресурсами, чтобы позволить себе рабочую станцию с несколькими виртуальными ОС или их хватает только на запуск вашего приложения через специальный сервис – в любом случае у вас есть возможность понаблюдать, как ваше приложение в работает в различных пользовательских средах. А обеспечить эффективную работу вашего приложения на максимальном количестве конфигураций и платформ – ваша прямая обязанность перед пользователями.
Научиться
- Оригинал статьи: Cross-browser Web application testing made easy (EN).
- Инструментарий Web Tripwire Toolkit, разработанный в Вашингтонском университете, поможет понять, в каких случаях причиной странного поведения приложения являются действия пользователей, а не реализация браузера (EN).
- Ресурсный центр по Ajax на IBM developerWorks: ознакомьтесь с подробной информацией по Ajax, а также по устранению зависимостей от браузера (EN).
- Оптимизированные и предсказуемые Ajax-приложения, Джудит Майерсон (developerWorks, октябрь 2007 г.): в статье содержатся полезные советы по созданию Ajax-приложений на разных платформах .
- Перечень инструментов для автоматического тестирования и отладки Ajax-приложений: этот исчерпывающий и обновлённый список поможет вам разработать стратегию тестирования Ajax-приложений (EN).
- TheCounter.com Global Statistics: получите подробные статистические данные по изменению моделей использования браузеров (EN).
- Автоматическое переключение между ОС на Linux-системе с двойной загрузкой, Марк Картер (Marc Carter) и Фил Уиллоуби (Phil Willoughby) (developerWorks, март 2006 г.): в статье представлено введение в этот процесс (EN).
- Одновременный запуск нескольких версий Firefox: Азбука OS X (EN).
- Новый Firefox 2 и установка нескольких версий Firefox: узнайте, как это сделать в Windows (EN).
Получить продукты и технологии
- 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).
Обсудить