Як тестувати WordPress на планшетах та смартфонах, яких у вас немає?

Якщо ви є власником WordPress-сайту або його розробником, на якомусь етапі ви обов'язково зіткнетеся з необхідністю тестування сайту на різних дозволах екранів, включаючи планшети та смартфони. Звичайно, було б добре мати широкий набір пристроїв, але це малоймовірно, тому в хід йдуть емулятори. У цьому уроці ми розглянемо, як можна тестувати та оптимізувати сайт на планшетах та смартфонах, яких у вас немає під рукою, за допомогою різних симуляторів.

Встановлення iOS та Android симуляторів може бути досить складним, але результат коштує витрачених зусиль

Тестування WordPress сайтів на різних платформах завжди було проблемою. Якийсь час ми бачили світло в кінці тунелю: розробка за стандартами дозволила нам перестати турбуватися про те, щоб сайт виглядав у IE6 так само, як і в останньому FireFox.

Але потім з'явилися планшети и смартфони — і кінець тунелю став далекою точкою на горизонті.

Адаптивність, звичайно, допомагає, але перед запуском або оновленням сайту його все одно потрібно протестувати на базових платформах, щоб переконатися, що його не тільки можна використовувати, але що він ефективний. Було б добре утримувати бібліотеку крутих гаджетів для тесту, але це як мінімум дорого та й затягне процес тестування до нескінченності.

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

iPhone та iPad - симуляція iOS

Найкращий спосіб перевірки сайту на iOS пристроях — використовувати програму Симулятор iOS від Apple. Ця програма є частиною XCode, інтегрованого середовища для розробки програмного забезпечення для OS X та iOS від Apple.

Якщо це звучить складно – не переживайте. Симулятор – це окрема програма, яку можна використовувати та запускати без необхідності запускати XCode. Щоб отримати XCode (і симулятор), вам потрібно буде зареєструватися та отримати Apple Developer ID, це просто та безкоштовно. Щоб завантажити XCode, перейдіть до Завантаження для Applе розробників, пошукайте по 'xcode' та виберіть версію, що підходить під вашу версію OS X.

Після того, як ви завантажили та встановили XCode:

1. Відкрийте вікно Finder і клацніть на додатків
2. Праве клацання по XCode і клацання по Показати вміст пакету у контекстному меню
3. У вікні клацніть по Contents > Developer > Platforms > iPhoneSimulator.platform > Developer > Applications
4. Ви повинні побачити у списку Симулятор iOS - Перетягніть його в Док для зручного доступу.

Коли ви відкриєте програму, вона запуститься як останній тестований вами пристрій (при першому використанні це буде iPhone). Ви можете замінити пристрій, клацнувши пункт меню ОбладнанняПрокручувати пристрої можна за допомогою того ж пункту меню або за допомогою гарячих клавіш.

Щоб протестувати WordPress (або будь-який інший сайт, звичайно), натисніть на іконку Safari і просто введіть адресу в поле.

iOS Simulator дозволяє швидке та точне тестування для iPad та iPhone

Я тестував багато різних сайтів на симуляторі та на реальному пристрої – різниці практично не було. І не забувайте, оскільки програма працює на вашому Mac, вона може доступитися до будь-якого сайту, який доступний вашому Mac, включаючи розміщені локально сайти.

Вердикт: якщо у вас Mac, то варто встановити симулятор. Як ви вже, напевно, знаєте, XCode не працює на інших платформах, що обмежує можливості користувачів інших операційних систем і означає, що вам доведеться шукати хмарне рішення на зразок BrowserStack.

Симуляція Android на OS X/Windows

Використання Android Simulator варте того, не дивлячись на складність в установці та проблеми з продуктивністю

Доступ до Android Simulator схожий на роботу з iOS Simulator (можливо, трохи складніше), але, знову ж таки, воно того варте.

На цей раз ми встановимо Android SDK, який доступний для багатьох платформ, у тому числі OS X та MS Windows.

Інструкції для OS X та MS Windows:

1. скачайте Android SDK.
2. У Windows, запустіть інсталяційний файл, на Mac розпакуйте інсталяційний пакет.
3. Перейдіть у встановлену/розпаковану папку, клацніть на Tools > Android, з'явиться командний рядок, потім відкриється програма Менеджер Android SDK
4. Зайдіть у папку Android 4.3 і клацніть по Install (x) PackagesЦе запустить процес установки. Це може тривати деякий час.
5. Коли інсталяцію завершено, вам потрібно налаштувати віртуальні пристрої для симулювання. Клацніть на Tools > Manage AVDs в меню Менеджер SDK.
6. Ви можете створити власний пристрій або клацнути на Визначення пристроїв і вибрати готовий пристрій, потім клацнути по Створіть AVD, Потім OK. Ваш пристрій має з'явитися у списку List of existing Android Virtual Devices.
7. Виберіть пристрій та клацніть Start. Вирішіть, чи ви хочете масштабувати до реальних розмірів за допомогою опції "Scale the display to real size(скоріше за все, воно буде дуже маленьким) і клацніть Запуск.

Оскільки симулятор стартує Android, запуск може тривати досить багато часу. Але якщо ви не бачите на екрані появи Android, щось пішло не так.

Після того, як Android запустився, ви можете знайти браузер і почати працювати з сайтами так само, як ви це робили в iOS Simulator, але опцій для зміни пристроїв немає, що трохи дратує. Для цього використовуйте кнопки: Mac OS X: FN + Control + F11 або F12 (відпустіть кнопки і натисніть знову для прокручування); Windows: CTRL + F11 або F12.

Вердикт: Android SDK більш складний в установці, але коли справа зроблено, у вас будуть ті ж переваги, що у iOS Simulator: робота з реальною ОС та доступ до розміщених локально сайтів. Але емулятор іноді може бути дуже повільним у роботі.

А легше варіанта немає?

Якщо вам не подобається лише думка про встановлення SDK, ви завжди можете розглянути варіант онлайн-тестування на прикладі сервісу BrowserStack.

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

Але каверза в тому, що сервіс не безкоштовний (тарифи стартують від $19 на місяць для одного користувача, є безкоштовна пробна версія на 30 хвилин симуляції), а локальне тестування вимагає установки Java, що не є проблемою для Windows, але, як знають користувачі Mac можуть викликати проблеми на Apple.

Сервіс працює за допомогою віртуальних машин основних ОС, на яких або запускається браузер, або для мобільних пристроїв запускається симулятор.

Так що коли ви тестуєте сайт на iPad, ви запускаєте iOS Simulator на OS X! Тому сервіс може бути трохи повільним, але це цілком терпимо.

То що вибрати?

Варіант вибору залежить від вашої впевненості в установці SDK, а також у тому, яку платформу ви використовуєте.

BrowserStack дозволяє за допомогою одного інтерфейсу тестувати роботу вашого сайту на всьому, включаючи різні операційні системи та браузери. Вони навіть мають встановлені інструменти розробника у браузерах, наприклад, в Internet Explorer 10 на Windows 8 є Firebug. Сервіс чудово відпрацьовує свої $19 на місяць.

Я б рекомендував використовувати якнайбільше симуляторів для кращої ефективності та тестування локальних сайтів.

Використовувати симулятор для тестування різних тем набагато зручніше, ніж використовувати купу реальних пристроїв.

Для користувачів OS X це тягне за собою встановлення XCode і Android SDK. Що стосується Windows користувачів, то ви, схоже, залишаєтесь з одним лише Android SDK. Так що найкращим рішенням буде комбінація: по можливості локально встановлені симулятори і BrowserStack для тих варіантів, які ви не можете симулювати локально (особливо якщо ми говоримо про інші ОС).

Такий варіант покриє весь простір варіантів і дасть вам впевненість у тому, що ваш сайт, сайт вашого клієнта або ваша тема відмінно працюватиме на всіх основних платформах.

На скільки платформ ви проводите тестування зараз? Які інструменти використовуєте? Поділіться з нами у коментарях.

Джерело: wpmudev.org

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/