Кросс-браузерное тестирование: все основные браузеры на ОДНОМ компьютере

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

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

Охвачено в части 1:

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

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

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

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

3 ответа

содержание

  1. Какие браузеры должны быть протестированы?
    • Практические правила: какие браузеры должны быть включены?
  2. подготовка
    • Windows XP
    • Windows 7+ (для IE9+)
    • Загрузки браузера
      • Internet Explorer
      • Fire Fox
      • опера
      • Хром
      • Сафари
      • Adobe Flash Player
    • Скачать резюме
  3. Sandboxie

    Часть 2: Установка и настройка
  4. Internet Explorer
  5. Fire Fox
  6. опера
  7. Хром
  8. Сафари
  9. Инструменты разработчика (и ярлыки)
  10. Измеренное время установки и дисковое пространство
    • Время, необходимое для браузера (установка и настройка)
  11. Оптимальное использование
    • Домашняя страница на http://10.0.2.2:8888/

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

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

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

  • 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, которая до сих пор используется довольно часто.

замечание

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

Если вам не нужна большая гибкость и вы хотите быстро протестировать страницу, я рекомендую взглянуть на http://www.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 дней.
      • Необязательно: Отключите файл подкачки (Компьютер> Свойства> Дополнительно> Производительность> Дополнительно> Виртуальная память> Изменить> Без подкачки> Установить [подтвердить]).
      • Необязательно: отключите ненужные сервисы через 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"
      • Необязательно: Установите и настройте Sandboxie (используется для запуска IE7 и IE8 на одной виртуальной машине IE6)
      • Необязательно: Установите CCleaner, запустите его, чтобы настроить его, и очистите ненужные файлы.
      • Дополнительно: установите 7-Zip (используется для нескольких Chrome)
      • Завершение работы системы через гостевую ОС (WinXP).
      • Настройки VirtualBox: подключите виртуальную машину к реальной сети.
        (Только Internet Explorer требует Internet во время установки)
      • Необязательно: Создайте моментальный снимок вашей виртуальной машины, чтобы вы могли восстановить ее при следующем шаге.
  • Windows 7+ (для IE9+)
    • Загрузите предварительно созданные образы виртуальных машин с сайта modern.IE.
      Эти изображения бомбят время, они истекают через 30 дней после первого использования. По истечении срока действия изображений они отключаются через час использования. Если вы не хотите каждый раз заново создавать образы, перед включением образа измените аппаратные часы вашей виртуальной машины.
      В VirtualBox, например, вы можете использовать VBoxManage modifyvm NAME_OF_VM --biossystemtimeoffset +3600000000 установить время на 1000 часов в будущем (используйте минус, если хотите установить его на какой-то момент в прошлом).
  • Загрузки браузеров

Скачать резюме

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


3. Песочница

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

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

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

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

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

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

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

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

4. Internet Explorer
5. Firefox
6. Опера
7. Хром
8. Сафари
9. Инструменты разработчика (и ярлыки)
10. Измеренное время установки и дисковое пространство
• Время, необходимое для браузера (установка и настройка)
11. Оптимальное использование
• Домашняя страница на 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 (ленивый):
Коллекция Utilu Mozilla Firefox. Этот инструмент содержит установщики для всех версий Firefox (200+ МБ). Firebug, панель инструментов веб-разработчика и Flash также включены.

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

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

6. Опера

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

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

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


7. Хром

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

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

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

    "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"• Этолаунчер
    • --user-data-dir="..\User Data\18"• Профиль пользователя относительно местоположенияchrome.exe, Вы могли бы также использовать--user-data-dir="C:\Chrome\User Data\18" для того же эффекта. Установите настройки для самой низкой версии Chrome и продублируйте профиль пользователя для каждой версии Chrome. Старые версии Chrome отказываются использовать профили пользователей из новых версий.
    • --chrome-version=18.0.1025.45Расположение двоичных файлов:
      • Местоположение (например,18.0.1025.45) должно быть имя каталога:
      • Должен начинаться и заканчиваться номером. Точка может появиться между.
      • Числа не обязательно должны совпадать с реальным номером версии (хотя удобно использовать реальные номера версий...).

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

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


8. Сафари

Примечание. Поддержка Safari в Windows прекращена. Последняя поддерживаемая версия Safari для Windows - 5.1.7; вам понадобится виртуальная машина Mac или OS X для тестирования ваших сайтов в новых версиях 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 минут.
  • Установка браузеров не требует много времени.
  • В зависимости от количества браузеров их настройка может занять некоторое время.

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

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

  • Опера: 2 минуты
  • Internet Explorer: 3 минуты *
  • Сафари: 4 минуты *
  • Firefox: 5 минут
  • Хром: 6 минут

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


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

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

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

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

Turn off machine > Restore snapshot 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).

В качестве примера, 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 - Cross-Browser IE Testing Tools Suite

Примечание: связанная статья была удалена. Ссылки теперь идут на архив страницы Wayback Machine.

Другие вопросы по тегам