Кроссбраузерное тестирование: все основные браузеры на ОДНОЙ машине

Цель этого руководства:

  • Запуск нескольких немодифицированных родных версий Internet Explorer,
    Safari, Opera, Chrome и Firefox на одной машине, бок о бок.

Покрыто в части 1:

  • Содержание
  • Какие браузеры должны быть протестированы?
  • Как создать виртуальную машину Windows XP, которая быстро загружается и не истекает?
  • Где можно загрузить необходимое программное обеспечение (изображение VM, браузеры...)?

Также рассматривается в часть 2:

  • Руководство по установке и настройке для IE, Firefox, Opera, Chrome и Safari.
  • Инструменты разработчика и ярлыки.
  • Расходы времени и дискового пространства.

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

Ответы

Ответ 1

Содержание

  • Какие браузеры должны быть протестированы?
    • Правила большого пальца: какие браузеры должны быть включены?
  • Получение
    • Windows XP
    • Windows 7+ (для IE9 +)
    • Загрузка браузера
      • Internet Explorer
      • Firefox
      • Opera
      • Chrome
      • Safari
      • Adobe Flash Player
    • Сводка загрузки
  • Sandboxie

    Часть 2: Установка и настройка
  • Internet Explorer
  • Firefox
  • Opera
  • Chrome
  • Safari
  • Инструменты разработчика (и ярлыки)
  • Измеренное время настройки и дисковое пространство
    • Время, необходимое для каждого браузера (установка и настройка)
  • Оптимальное использование
    • Домашняя страница http://10.0.2.2:8888/

1. Какие браузеры должны быть протестированы?

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

  • Могу ли я использовать - таблицу использования браузера на основе данных из StatCounter и других источников.
  • StatCounter - Статистика: версия браузера | Период времени: в прошлом месяце снимок экрана.
  • W3Counter - Просмотр архивных отчетов: January 2012 (выберите последний месяц). снимок экрана
  • Wikimedia - Вниз, чтобы открыть последний отчет, SquidReportClients.
  • Clicky - Этот сайт предлагает статистику для отдельных версий скриншот.

Правила большого пальца: какие браузеры должны быть включены?

  • Firefox: последний выпуск ESR + последняя стабильная основная версия. Примечания к выпуску | Для разработчиков | Быстрое расписание рассылки
  • Opera: 12.x + Последняя стабильная версия. История версий
    Начиная с Opera 15, Opera использует тот же движок, что и Chrome. Довольно много пользователей все еще используют Opera 12, хотя (когда Opera 15 была выпущена, UX значительно изменился).
  • Safari: 5.1.7 (Windows) + Последняя версия. Примечания к выпуску
    К сожалению, Apple отказалась от поддержки Windows, поэтому вам нужно получить Mac или запустить OS X в виртуальной машине для тестирования страниц в Safari.
  • Chrome: последняя стабильная версия. Примечания к выпуску
  • Internet Explorer: IE8+. История функций
    Это зависит от ваших клиентов. В этом руководстве рассказывается, как получить IE6 и 7, но эти браузеры уже мертвы или близки к мертвым. IE8 - последняя поддерживаемая версия Internet Explorer в Windows XP, которая все еще используется много.

Примечание

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

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

2. Подготовка

Перед настройкой машины загрузите все необходимые файлы (см. "Сводка загрузки" в конце этого раздела). Все файлы будут совместно использоваться виртуальной машиной через общую папку Что? Как?.

  • Программное обеспечение виртуализации (VirtualBox рекомендуется, оно бесплатное даже для коммерческого использования. Инструкции ниже написаны с помощью VirtualBox.)
  • Windows XP
    • Загрузите изображение IE6 XP для VirtualBox с веб-сайта modern.IE. Извлеките файл .ova внутри и запустите его, чтобы импортировать его в VirtualBox. (Изображения также доступны для других продуктов виртуализации, таких как VMware, Parallels, Virtual PC и Hyper-V)
    • Подготовка изображения для использования:
      • Настройки VirtualBox. Включите сетевой адаптер, но не подключите виртуальную машину к реальной сети.
      • Настройки VirtualBox. Создайте общую папку только для чтения. Эта папка будет использоваться для передачи данных между ОС хоста и гостевой ОС.
      • Запустите net use x: \\vboxsvr\WinShared (предположим, что общая папка называется WinShared. Это привяжет сетевой каталог к ​​диску x:).
      • Дополнительно: установите AntiWPA, чтобы отключить проверку активации, если вы будете использовать изображение более, чем 30 дней.
      • Необязательно: Отключить файл подкачки (Компьютеp > Свойствa > Дополнительно > Производительность > Дополнительно > Виртуальная память > Изменить > Нет поискового вызовa > Установить [подтвердить]).
      • Дополнительно: отключить ненужные сервисы через Start > Run > services.msc
        Закажите строки по столбцу Startup Type и переключите все "автоматические" сервисы на "вручную" в соответствии с изображением. Всякий раз, когда вы хотите установить пакет MSI, запустите net start msiServer ( "Установщик Windows" ):
        Windows XP - services.msc
      • Дополнительно: Отключить мастер очистки рабочего стола: Desktop > Properties > Desktop > Customize Desktop > Disable "Desktop Cleanup wizard every 60 days"
      • Дополнительно: установите и настройте Песочницу (используется для запуска IE7 и IE8 на той же самой виртуальной машине IE6)
      • Дополнительно: установите CCleaner, запустите его, чтобы настроить его и очистить мусор.
      • Дополнительно: установите 7-zip (используется для нескольких Chrome)
      • Завершение работы системы через гостевую ОС (WinXP).
      • Настройки VirtualBox. Подключите виртуальную машину к реальной сети.
        (Только Internet Explorer требует Интернета во время установки).
      • Необязательно. Создайте моментальный снимок вашей виртуальной машины, чтобы вы могли восстановить, когда вы испортились на следующем шаге.
  • Windows 7+ (для IE9 +)
    • Загрузите готовые изображения виртуальной машины с веб-сайта modern.IE.
      Эти изображения подвергаются бомбардировке, истекают через 30 дней после первого использования. Когда изображения истек, они закрываются после часа использования. Если вы не хотите повторно создавать изображения каждый раз, измените аппаратные часы вашей виртуальной машины, прежде чем активировать изображение.
      Например, в VirtualBox вы можете использовать VBoxManage modifyvm NAME_OF_VM --biossystemtimeoffset +3600000000 для установки времени до 1000 часов в будущем (используйте минус, если вы хотите установить его в какой-то момент в прошлом).
  • Загрузка браузеров

Сводка загрузки

Для удобства полезно иметь все установочные файлы в общей папке. Вот краткий (полный) список всех необходимых файлов (упорядоченный за шаг):

3. Sandboxie

Sandboxie - это легкий инструмент, который запускает приложения в песочнице. Его также можно использовать для установки нескольких версий IE/Safari на одной машине Windows.

  • Загрузить: http://sandboxie.com/index.php?DownloadSandboxie
  • Патч: расширенная версия требуется, чтобы включить одновременно несколько изолированных дескрипторов. Оплатить их или посетить YouTube.
    Для запуска нескольких версий IE/Safari требуется расширенная версия. Если вы не возражаете тестировать одну версию IE/Safari за раз, стандартной версии достаточно.

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

    Для каждой новой версии IE/Safari вам необходимо выполнить следующие шаги:
  • Создать: "Песочницa > Создать новую песочницу" - введите имя, например "IE8" и подтвердите.
  • Установить: "IE8 > Запустить песочницу > Запустить любую программу"
    Выберите нужный установщик и нажмите OK.
  • Ярлык. По завершении установки используйте "IE8 > Исследуйте содержимое", найдите двоичный файл и создайте ярлык рабочего стола для приложения.

Все изменения файла/реестра в песочнице сохраняются в C:\Sandbox. Приложения в этом каталоге запускаются в песочнице по умолчанию. Другие программы можно легко запустить в песочнице через контекстное меню: "Запустить песочницу" или "Отправить в > Песочницу > IE8".

Очистка с помощью CCleaner. Запустите CCleaner в основной среде, а затем в отдельных песочницах.

Перейдите к: Часть 2

Ответ 2

Содержание части 2 (перейти к части 1)

& ЕПРС; 4. Internet Explorer
& ЕПРС; 5. Firefox
& ЕПРС; 6. Opera
& ЕПРС; 7. Chrome
& ЕПРС; 8. Safari
& EMSP; 9. Инструменты разработчика (и ярлыки)
& EnSP; 10. Измеренное время настройки и дисковое пространство
& ЕПРС; & ЕПРС; & ЕПРС; & Бык; & EnSP; Необходимое время для браузера (установка и настройка)
& EnSP; 11. Оптимальное использование
& ЕПРС; & ЕПРС; & ЕПРС; & Бык; & EnSP; Домашняя страница в http://10.0.2.2:8888/

Установка и настройка

Советы по настройке браузера:

  • Домашняя страница
  • Отключить проверку: "Браузер по умолчанию" и "Обновления".
  • Активировать инструменты разработчика

4. Internet Explorer

Windows 7 не позволяет запускать старые экземпляры IE но см. примечание ниже. Вот почему нужна виртуальная машина Win XP.

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

  • IE6 - установлен по умолчанию в WinXP
  • IE7/IE8 - Установить в Sandboxie (WinXP)
  • IE9 + - Получите готовые изображения виртуальной машины Windows с сайта modern.IE.
    Эти изображения истекают через 30 дней после первого использования. Когда изображения истек, они закрываются после часа использования. Если вы не хотите повторно создавать изображения каждый раз, измените аппаратные часы вашей виртуальной машины, прежде чем активировать изображение.
    Например. Если вы используете VirtualBox, запустите терминал и выполните следующую команду (замените заглавные имена на что-то разумное):
    VBoxManage modifyvm NAME_OF_VM --biossystemtimeoffset <OFFSET IN MS, prefixed by plus or minus>

Полностью автономные установщики для IE6 (и даже IE5.5) доступны на этом сайте.

Для IE6 и IE7 необходимо установить панель инструментов разработчика Internet Explorer. IE8 + имеет встроенные инструменты разработчика F12.

Конфигурация

  • Запустите настройки IE6: главная страница, безопасность, файлы cookie, браузер по умолчанию.
  • IE7: избавиться от первой страницы запуска через реестр (IE7 Sandboxie). См. этот пост на форуме Microsoft TechNet.
  • IE8: избавиться от диалога "Настройка Windows Internet Explorer 8". Это можно сделать, запустив IE8, затем щелкнув "Позже" или изменив реестр.

Фактически возможно запустить IE6 - 8 в Windows 7 с помощью виртуализации приложений. VMWare ThinApp отлично работает, но для настройки требуется значительно больше времени, потому что вам нужно запечатлеть установку Internet Explorer. Кроме того, пакет программного обеспечения очень дорог (кейгены доступны, но неэтичны).

5. Firefox

Вариант 1 (ленивый):
Утилита Mozilla Firefox Collection. Этот инструмент содержит инсталляторы для всех версий Firefox (200+ МБ). Также включены Firebug, панель инструментов Web Developer и Flash.

Вариант 2:
Несколько версий Firefox можно легко установить и выполнить одновременно.

  • Загрузить Официальный Mozilla Диспетчер профилей.
  • Загрузите соответствующие версии Firefox из http://releases.mozilla.org/pub/mozilla.org/firefox/releases/. Старые версии можно найти на ftp.mozilla.org.
  • Установите каждую версию Firefox. Удобно выбрать один основной каталог ( "Firefox" ) и использовать номера версий в качестве имен для подкаталогов ( "3.6" ).
  • Расширения: запустите старую версию Firefox и получите свои любимые расширения:
    • Firebug - обязательный для старых версий Firefox. Не нужны последние версии Firefox, у которых есть хороший набор встроенных средств разработки.
    • HttpFox - простой и эффективный инструмент для измерения HTTP-запросов.
    • Веб-разработчик - чрезвычайно полезная панель инструментов для веб-разработки. Экономит много времени.
    • Консоль 2 - Улучшает встроенную консоль (Ctrl Shift> J).
  • Предпочтения: Tools > Options (Windows), Edit > Preferences (Linux)
    • Общее: Домашняя страница
    • Безопасность: снимите все настройки, кроме "Предупреждать меня, когда сайты пытаются установить дополнения".
      (Не забудьте просмотреть настройки предупреждающего сообщения, нажав кнопку внизу).
    • Дополнительно:
      • Общие сведения:
        • Проверить браузер по умолчанию: off
        • Отправить отчеты о сбоях: выкл
      • Обновление: отключить все обновления
  • Очистка: закройте все вкладки, нажмите Ctrl Shift Del и проверьте все. Затем закройте Firefox.
  • Firefox Диспетчер профилей:
    screenshot
    • Дублировать каждый профиль с помощью опции Copy.
    • A диалог screenshot. Выберите подходящее имя (например, Firefox 3.6) и пункт назначения.
    • Используйте параметр Firefox version, чтобы выбрать версию Firefox по умолчанию для профиля.
    • Также проверьте флажок Start new instance [-no-remote], чтобы одновременно запускать несколько одновременных версий Firefox.
  • Завершение
    • Используйте кнопку Start Firefox, чтобы запустить экземпляр Firefox.
    • Пусть проверка совместимости надстройки выполняется и обновляется там, где это необходимо.
    • Очистите кеш, историю и т.д., используя Ctrl Shift Del.
    • Повторите этот шаг для каждой версии Firefox.

6. Opera

Opera. Список всех установщиков доступен на Opera.com. Без проблем могут быть установлены несколько версий. Во время установки выберите "Пользовательский" и другой каталог.
При установке также выберите один и тот же профиль для всех пользователей.

Важное предпочтение: Настройки > Настройки > Дополнительно > Безопасность > Не проверять наличие обновлений.

Примечание. Opera 15+ использует тот же механизм рендеринга и JavaScript, что и Chrome.

7. Chrome

Chrome. Автономные установщики могут быть загружены из File Hippo.
Также можно запускать несколько версий Chrome рядом.

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

  • Загрузите желаемую версию из Файл Hippo.
  • Создать основной каталог, например. C:\Chrome\.
  • Извлеките установщик (= без установки), используя 7-Zip например. После извлечения создается архив chrome.7z. Также извлеките этот файл и опустите созданный каталог Chrome-bin.
    Теперь вы видите chrome.exe и каталог, похожий на 18.0.1025.45.
    Переместите chrome.exe в 18.0.1025.45, а затем переместите этот каталог в C:\Chrome. Остальные файлы в Chrome-bin можно безопасно удалить.

  • Создайте ярлык для каждой версии:

    "C:\Chrome\18.0.1024.45\chrome.exe" --user-data-dir="..\User Data\18" --chrome-version=18.0.1025.45

    Объяснение этого ярлыка:

    • "C:\Chrome\18.0.1024.45\chrome.exe" & bull; Это запуска
    • --user-data-dir="..\User Data\18" & bull; Профиль пользователя относительно местоположения chrome.exe. Вы также могли бы использовать --user-data-dir="C:\Chrome\User Data\18" для того же эффекта. Задайте настройки для самой младшей версии Chrome и дублируйте профиль пользователя для каждой версии Chrome. Старые версии Chrome отказываются использовать профили пользователей из новых версий.
    • --chrome-version=18.0.1025.45 & bull; Местоположение двоичных файлов:
      • Местоположение (например, 18.0.1025.45) должно быть именем каталога:
      • Нужно начинать и заканчивать цифрой. Между ними может появиться точка.
      • Цифры необязательно должны соответствовать номеру реальной версии (хотя удобно использовать реальные номера версий...).

Относительно конфигурации: все настройки могут быть установлены в chrome://settings/. Обычно я изменяю домашнюю страницу и настройки "Под капотом".

С множеством выпусков Chrome нецелесообразно устанавливать все версии. Я создал VB script, который автоматизирует эти шаги, поэтому я могу просто сохранить инсталляторы, а затем запустить script, когда мне нужно протестировать старую версию Chrome: https://gist.github.com/Rob--W/2882558

8. Safari

Примечание. Поддержка Safari в Windows прекращена. Последняя поддерживаемая версия Safari для Windows - 5.1.7; вам понадобится Mac или OS X VM для тестирования ваших сайтов в более новых версиях Safari.

Safari делает не поддерживает несколько версий или профилей пользователей бок о бок. Safari 4 близко к смерти, поэтому вам нужно только проверить 5. *. Все версии Safari можно загрузить с "Старые приложения" .

  • Загрузите и установите Safari 5.0.
  • Запустите Safari, укажите свои настройки.
  • Создайте новую песочницу Sandboxie для каждой дополнительной установки.
    Важно сначала установить старую версию, чтобы пользовательский профиль мог быть адаптирован более новыми версиями.
  • Дополнительную информацию об установке в Sandboxie см. в разделе "Sandboxie" и "Internet Explorer".

Инструменты разработчика должны быть включены через Preferences > Advanced > Show Developer menu in menu bar. После установки Safari удалите обновление программного обеспечения Apple через Control panel > Add/Remove software.

9. Инструменты разработчика (и ярлыки)

10. Измеренное время настройки и дисковое пространство

  • Настройка базовой среды занимает 30 минут.
  • Установка браузеров не требует много времени.
  • В зависимости от количества браузеров их настройка может занять некоторое время.

  • Настройка WinXP VM с помощью браузеров, перечисленных в этом руководстве + Opera 12 beta:
    • Размер загрузки: 585MB
    • 12 браузеров
    • Время: 1:09 час (32 минуты, чтобы добраться до IE).
    • Размер устройства: 1.1G/импортированный размер: 2.2G.
    • Подробный журнал: http://pastebin.com/R7WGPK99
  • Настройка огромной WinXP VM для подробных тестов совместимости с браузерами:
    • 24 браузера
    • Используемое время: 2:15 часов
    • Размер устройства: 1.4G/импортированный размер: 3.0G
    • Журнал: http://pastebin.com/SJEgxNyr

Время, необходимое для каждого браузера (установка и настройка)

  • Опера: 2 минуты
  • Internet Explorer: 3 минуты *
  • Safari: 4 минуты *
  • Firefox: 5 минут
  • Chrome: 6 минут

* исключает время создания песочницы Sandboxie (< 1 минута).

11. Оптимальное использование

Когда вы закончите установку, используйте CCleaner для очистки мусора, а затем:

  • Экспортируйте устройство (этот прибор можно сохранить в другом месте в качестве резервной копии).
  • Удалить вновь созданную виртуальную машину
  • Импортируйте устройство (эти шаги уменьшают размер файла виртуальной машины)
  • Создание моментального снимка (для использования в качестве контрольной точки)

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

Turn off machine > Restore snapshot

Домашняя страница http://10.0.2.2:8888/

гостевая ОС может получить доступ к ОС хоста по IP-адресу 10.0.2.2. Доступ к серверу, работающему на порту 8888, можно получить у гостя через http://10.0.2.2:8888/, даже если у хоста нет подключения к Интернету.

По этой причине рекомендуется установить http://10.0.2.2:8888/ в качестве домашней страницы.

Возможные варианты использования:

  • Протестируйте одну страницу.
  • Автоматически показывать определенную страницу в зависимости от открытого агента пользователя (например, путем перенаправления).
  • Fiddling: создайте скрипт в Chrome и протестируйте его в Firefox.
  • Поделиться текстом и ссылками.

Все предыдущие могут быть легко реализованы на простом сервере (например, я использовал Node.js).

Ответ 3

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

modern.IE - это обязательство моей Microsoft упростить кросс-браузерное тестирование для браузеров Internet Explorer. Microsoft создала modern.IE, чтобы предоставить разработчикам и дизайнерам набор инструментов для облегчения тестирования браузера IE.

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

Второй метод modern.IE предлагает изображение виртуализации каждого браузера от IE 6 до IE 10, которое можно запускать на программном обеспечении виртуализации, таком как VirtualBox, Virtual PC, Hyper-V или VMWare Player в Windows, Mac или Linux.

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

modern.IE - Набор инструментов для тестирования IE с использованием перекрестного браузера