«Это должно работать в Internet Explorer»

Нелюбимая фраза каждого фронтенд-разработчика. К счастью, со времен, когда в Интернете доминировал IE6, все стало немного проще.

Сам IE значительно улучшил производительность JavaScript и соответствие стандартам (Edge в этом отношении выглядит еще лучше — согласно таблице совместимости ES6 на kangax.github.io, Edge 12 опережает Safari 9 на 60% поддерживаемые функции).

По данным caniuse.com, на IE11 сейчас приходится менее 5% использования Интернета — Chrome занимает две первые строчки (версия для ПК и мобильная версия учитываются отдельно).

Тестирование в IE, когда вы не используете Windows

Если ваша основная машина для разработки работает под управлением Linux или Mac OS X, то вы, очевидно, не можете просто установить IE. Даже у пользователей Windows может быть установлена ​​только одна версия за раз, и вам может потребоваться поддержка более старых версий, особенно если вы пишете корпоративное программное обеспечение.

К счастью, новая более приятная Microsoft поддерживает вас. Сайт разработчиков modern.ie предоставляет ряд инструментов, облегчающих жизнь:

  • Виртуальные машины
  • RemoteIE
  • Сканирование сайта
  • Генерация скриншотов

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

Виртуальные машины

Посетите https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/, и вы найдете ряд предварительно созданных виртуальных машин, содержащих разные версии Windows и IE, доступных для нескольких различных платформы ВМ. Я использовал VirtualBox, но Vagrant был бы отличным выбором, если вы хотите что-то автоматизировать.

Инструкции помогут вам начать работу, но если вам нужно получить доступ к серверу, работающему на вашем локальном компьютере (что, вероятно, весьма вероятно), необходимо выполнить еще пару шагов.

  • Во-первых, сопоставьте все необходимые порты с хост-компьютера на виртуальную машину. В VirtualBox это можно сделать, щелкнув правой кнопкой мыши виртуальную машину в диспетчере VirtualBox, выбрав «Настройки», затем «Сеть» и нажав «Переадресация портов». Добавьте порты для всех запущенных вами тестовых серверов.
  • Если вы используете какие-либо записи /etc/hosts, вам необходимо скопировать их на компьютер с Windows. Windows 7 и более поздние версии хранят эти файлы в папке «C:\Windows\System32\drivers\etc».
  • Откройте командную строку на компьютере с Windows и запустите «ipconfig». Найдите IP-адрес «шлюза по умолчанию» — это IP-адрес, который вы можете использовать для доступа к серверу, работающему на вашем компьютере.

полифилл.ио

Если вам нравится использовать современный JavaScript, такой как ES6 и React, вы, скорее всего, обнаружите, что использовали некоторые функции в своем коде, которые не поддерживаются в каждом браузере (не только в IE — например, Firefox еще не поддерживает выборка API).

Обычно вы просто добавляете полифил каждый раз, когда впервые используете одну из этих функций (или когда вы позже понимаете, что она недоступна в каком-то браузере!). Альтернативой этому является polyfill.io, разработанный Financial Times.

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

Также есть Modernizr и featuretests.io, которые используют тесты функций, а не строку User-Agent, и позволяют выполнять другой код в зависимости от наличия разных функций.

Автоматизированное тестирование

Используя средства запуска тестов JavaScript, такие как Karma, вы можете выбирать, на какие браузеры ориентироваться. В Karma это делается путем заполнения опции «браузеры» в karma.conf.js и установки необходимых «лаунчеров». Возможно, вам будет полезно выбрать несколько браузеров на вашем CI-сервере и придерживаться одного (например, PhantomJS) при выполнении тестов на рабочих станциях разработчиков.

Для функциональных тестов, например. в Selenium SauceLabs и BrowserStack предоставляют размещенные решения для большого количества браузеров, ОС и устройств. Это требует денежных затрат, но вы, вероятно, сочтете это более рентабельным, чем управление всем этим внутри компании, если только вы не крупная компания с ресурсами, чтобы справиться с такими вещами.

Другие советы?

Без сомнения, есть много других инструментов и методов, которые могут помочь. Если у вас есть, пожалуйста, сделайте комментарий!