Хоча Internet Explorer Mobile, браузер для Windows Phone від Microsoft, не можна назвати популярним, люди ним користуються. Розробники зобов'язані перевіряти, як браузер взаємодіє з веб-сайтами. Тестування вебсайтів на Windows Phone має свої особливості: воно і просте (розробникам не доводиться працювати з величезною кількістю пристроїв, як для Android), і важке (робота Internet Explorer Mobile незадовільна). Якщо Ви займаєтеся розробкою веб-сайтів, але пристрої на Windows Phone у Вас немає, то доведеться проявити креативність, щоб переконатися, що веб-сайти відображаються коректно.

У даній статті я б хотів розповісти про кількох інструментах і прийомах, які допоможуть протестувати роботу веб-сайтів на пристроях з Windows Phone. Однак, для початку швидко пройдемося по основних відмінностей між звичайною і мобільного версіями Internet Explorer.

Про Internet Explorer Mobile коротко

У минулому компанія Microsoft визнала, що Internet Explorer для мобільних пристроїв схожий на Internet Explorer для ПК, але все ж вони не ідентичні. Між двома версіями є кілька ключових відмінностей:

• Мобільна версія не підтримує перетягування об'єктів торканням в HTML5.
• Відео, які використовують Encrypted Media Extension, що не відтворюються на Windows Phone.
• У мобільній версії відсутні CSS Touch Views, крім overflow: scroll.
• На Windows Phone немає переносів для CSS3.

Відмінностей не так вже й багато, але їх необхідно знати, якщо Ви хочете домогтися коректного відображення веб-сайтів як в звичайному Internet Explorer, так і в Internet Explorer Mobile.

Інструменти для тестування

На початкових етапах розробки точністю можна пожертвувати. Головне - швидкість і взаємодія, а точного збігу макета і вийшла "картинки" можна домогтися і пізніше. Тим часом, щоб провести тестування ефективно, треба знати, який інструмент і метод тестування застосовувати.

Щоб зрозуміти, як тестувати краще, ми порівняємо результати, які видадуть інструменти тестування (емулятори і т.п.), а також результати, отримані з Nokia Lumia 920. Для початку давайте подивимося, як на Windows Phone відображаються два сайти: SmashingMag з адаптивним дизайном і Quirksmode без адаптивного дизайну.

Далі в статті ми порівняємо оригінальну "картинку" з тієї, яку дозволяють отримати інструменти тестування. Якщо відображення сайту на пристрої і в інструменті повністю співпадуть, то це буде ідеальний результат.

Емулятор в Internet Explorer

Швидше і легше всього протестувати вебсайт в Windows Phone середовищі можна за допомогою вбудованого в Internet Explorer емулятора. Так, Ви зможете створити Windows Phone середу без мобільного пристрою. Наприклад, Ви зможете задати налаштування для мобільного браузера, положення і розширення екрану і т.п. Всі настройки можна задавати в реальному часі на ПК, тому тестування на різних пристроях, дисплеях і розширеннях екрану не займе багато часу. Важливо, що Ви можете порівнювати результат для мобільного пристрою і для ПК.

Загалом, емулятор в Internet Explorer працює приблизно так само, як і емулятор для різних пристроїв на Chrome. Він ідеально підходить для швидкого (але не докладного) тестування. Навіть якщо емулятор не знадобиться Вам зараз, коли-то тестувати для Internet Explorer і Windows Phone Ви все одно почнете, тому відзначте цей емулятор для себе.

Вище видно, що Internet Explorer емулятор не підходить для тестування сайтів з адаптивним дизайном. Так, зліва Ви бачите, як сайт показується на Nokia Lumia 920, а праворуч - як він виглядає в емуляторі.

До того ж, якщо судити по зображенню вище (Nokia Lumia 920 - зліва, емулятор - праворуч), емулятор повністю ігнорує налаштування порту перегляду і лише підганяє сторінку під розмір екрану. В результаті, сайт в Windows Phone середовищі емулюється з великою кількістю неточностей.

Windows Phone емулятор

Для розробників і дизайнерів, які не обмежують себе простими інструментами, є Windows Phone емулятор , Сумісний з Windows Phone 7 і Windows Phone 8. Якщо Ви працюєте нема на Windows, то провести емуляцію можна онлайн через сервіс BrowserStack .

Незалежний Windows Phone емулятор працює на порядок краще, ніж емулятор в Internet Explorer. Він створює повноцінну копію операційної системи Windows Phone, тому через нього можна тестувати не тільки вебсайти, а й, наприклад, додатки. Для тих, кому треба провести якісне тестування тільки на Windows Phone, - немає рішення краще. Однак, якщо очікується багато крос-платформного тестування, то краще зупинитися на онлайн інструментах.

На зображенні вище видно, як сайт з адаптивним дизайном показується на Nokia Lumia 920 (ліворуч) і Windows Phone емуляторі (праворуч). Звичайно, відображення не ідеально: іконки меню і пошуку не відображаються, основна область показу трохи переміщена вгору.

Вище видно, як сайт без адаптивного дизайну виглядає на Nokia Lumia 920 (ліворуч) і Windows Phone емуляторі (праворуч). Практично повний збіг.

У Windows Phone емулятора є ряд системних обмежень. Наприклад, Windows Phone емулятор 8 версії буде працювати тільки на Windows 8 і наступних версіях. Користувачі Mac OS X можуть користуватися ним тільки на віртуальній машині. Очевидно, що в даному випадку онлайн версія буде кращим рішенням.

Як і у випадку з усіма емуляторами, Windows Phone емулятор не відобразяться сайт ідеально. Однак, саме він є кращим рішенням для тестування в Windows Phone середовищі.

Тестування зі смартфоном

Найкращим і перевіреним методом тестування є тестування з реальним пристроєм. Як Ви вже зрозуміли, з емуляторами можна працювати, але тільки до певної міри. Вони досить точні, але все-таки не так, як хотілося б. І, звичайно ж, деякі процеси просто не можна протестувати за допомогою емулятора. Наприклад, зручність використання того чи іншого сайту може сильно залежати від того, як користувач взаємодіє з сенсорним екраном. Окремо відзначу, що при тестуванні зі смартфоном краще зосередитися на Windows Phone 8, так як 7 версія вже відживає своє.

Якщо Ви не хочете купувати реально працюючий смартфон, то Ви можете скористатися сервісами Perfecto Mobile , CrossBrowserTesting.com або DeviceAnywhere . Дані сервіси допоможуть отримати онлайн доступ до реальних Windows Phone пристроїв для об'єктивного тестування.

Якщо ж Ви хочете купити смартфон, то найкращим варіантом буде придбати відразу три смартфона. Наприклад, Nokia Lumia 1520, 920 і 430. Так, Ви охопите весь ціновий діапазон Windows Phone пристроїв.

Дистанційна налагодження через WEINRE

Коли основні помилки знайдені, їх треба виправити. Причому, зробити це треба з розумом. У цьому розробнику може допомогти інструмент під назвою WEINRE (WEb INspector REmote). Робота з Windows Phone версією інструменту не відрізняється від роботи з версіями для інших платформ, хоча і функцій в ній менше.

WEINRE - інструмент з відкритим кодом, розроблений для віддаленої налагодження вебсайтів, в тому числі і на Windows Phone. Безперечними перевагами WEINRE є безкоштовність і можливість вносити зміни в код. Microsoft рекомендує використовувати WEINRE для виправлення помилок на Windows Phone пристроях.

За допомогою WEINRE Ви можете вносити зміни в DOM в реальному часі. Інструмент не підтримує просунуті властивості JavaScript налагодження (сам він працює на Node.js), але все ж являє собою відмінний варіант для віддаленої налагодження.

Використовувати WEINRE дуже просто. Так як він працює на Node.js, встановити і запустити сервер інструменту можна за допомогою двох простих команд. Для Windows:

npm -g install weinre

weinre -httpPort 8080 -boundHost -all-

Для Mac OS X і Linux:

sudo npm -g install weinre
weinre -httpPort 8080 -boundHost -all-

WEINRE треба запустити на локальному хості (localhost: 8080). Щоб провести налагодження помилок на Windows Phone, Ви повинні:

• Відкрити localhost: 8080 на машині розробки.
• В Target Script відділі відкрився сайту знайдіть тег <script> і додайте його на тестований сайт.
• Відкрийте сторінку на Windows Phone в звичайному режимі.
• На машині розробці інструмент можна знайти шляхом: localhost: 8080 / client / # anonymous.

Зверну увагу, що запускати WEINRE не можна під час процесу розробки. Це може поставити під загрозу безпеку продукту, що розробляється.

Якщо Ви хочете використовувати WEINRE як інструмент розробки, Вам треба буде заздалегідь підготувати всі тестовані пристрої, причому це можуть бути і реальні пристрої, і пристрої в "хмарі", і емулювати версії пристрою. WEINRE є найкращим інструментом для тестування в реальному часі. Цей інструмент повинен бути присутнім в арсеналі кожного розробника на Windows Phone. Інструмент працює у всіх великих браузерах.

Що щодо Windows Phone 10?

На момент написання статті жоден веб-сервіс не володів функціональністю для тестування з бета версією Windows Phone 10. До того ж, поки в доступі немає жодного пристрою, на якому встановлена ​​ця ОС. Якщо Ви хочете потестувати сайт на Windows Phone 10, поновіть Windows Phone пристрій до 10-ї версії або ж запустіть емулятор в інсталяції Windows 10 на ПК за допомогою останнього Windows Phone SDK і Visual Studio 2013.

висновок

Як працює Ваш сайт на Windows Phone пристроях? Приблизно 3% користувачів, які потраплять на сайт з мобільних пристроїв, - користуються Windows Phone пристроями. Слід переконатися, що сайт працює коректно. Як Ви бачите, тестувати сайт на Windows Phone непросто - позначається відсутність хороших емуляторів і інструментів. Раджу використовувати онлайн сервіси Perfecto Mobile, CrossBrowserTesting.com, DeviceAnywhere і WEINRE як найбільш зарекомендували себе.