1. Способы оптимизации ручного
тестирования веб-сайтов в
мобильных браузерах
Olya Eryomenko. QC, Maxymiser

2. Компания основана в 2006 году, является одним из мировых лидеров в
сфере оказания услуг по А/Б и многовариантному тестированию.
Среди клиентов известные мировые бренды, как Avis, EasyJet, Santander,
Virgin Media, Telegraph, Kaspersky, Hilton и другие.
Немного о компании Maxymiser ...

3. Основной продукт - ПО, которое позволяет показывать альтернативный
контент на веб-сайтах и собирать статистику действий пользователя для
определения выигрышного варианта контента.
О продукте ...

4. • ручное кросс-браузерное А/Б и многовариантное тестирование
веб-сайтов на ПК и мобильных устройствах
• на тестирование одного проекта отводится в среднем 2-3 дня в
зависимости от сложности теста и набора
браузеров/ОС/девайсов
Специфика проектов

5. Круг основных задач Quality
Controller
● тест-дизайн (то, что хорошо отображается в одном браузере, может
сломаться или не поддерживаться в другом);
● функциональное тестирование (функционал теста должен быть
реализован согласно спецификации и не ломать дефолт);
● сбор статистики действий пользователя
должен происходить корректно и
согласно требований спецификации.

6. Стандартный набор
браузеров/ОС/девайсов
Browser OS Device
IE8, IE9, IE10, IE11 Windows Desktop
Chrome (last version) Windows Desktop
Chrome (last version) Mac OS Desktop
Firefox (last version) Windows Desktop
Firefox (last version) Mac OS Desktop
Safari 5, Safari 6, Safari 5 Mac OS Desktop
Native browser, Chrome Android OS Tablet & Phone
Native browser RIM OS Tablet & Phone
Native browser IOS Tablet & Phone

7. Тестирование на мобильных
девайсах: особенности
• проблема доставки JavaScript в
мобильные браузеры из-за отсутствия
консоли;
• нет возможности просмотреть
исходный код страниц и
взаимодействовать с элементами с
помощью инструментов веб-
разработчика;
• множество разрешений экранов.

8. Как выполнить JavaScript
в мобильных браузерах?
И как применить это в
тестировании?

9. 1. из созданной закладки в браузере
2. через адресную строку
Возможные варианты
выполнение JavaScript

10. А еще варианты?
3. Создание собственного инструмента, который будет открывать
консоль на мобильном устройстве, к примеру, по нажатию на закладку

11. Как применить JavaScript в
тестировании
● поставить/посмотреть значение куки;
● найти элемент на странице по имени, классу, id и взаимодействовать с
ним;
● присвоить/изменить определенное значение элемента и пр.
Пример кода JavaScript, который заполняет текстовое поле с заданным id
document.getElementById('name-textfield').value = 3;
Также этот код можно выполнить через закладку в браузере
javascript:document.getElementById('name-textfield').value = 3;

12. Заполнение веб-форм с
помощью JS

13. Наиболее часто встречающиеся
элементы веб-формы
● однострочное или многострочное текстовое поле
document.getElementById(‘textBoxID’).value = “test”;
● поле пароля
document.getElementById(‘passwordBoxID’).value = “paSSword”;
● ниспадающий список (селект)
document.getElementById(‘selectID’).value = “Mr”;
document.getElementById(‘selectID’).selectedIndex = 3;
● радиокнопка
document.getElementById(‘radiobuttonID’).click();
document.getElementById(‘radiobuttonID’).checked = true/false;
● чекбокс
document.getElementById(‘checkboxID’).click();
document.getElementById(‘checkboxID’).checked = true/false;
● кнопка
document.getElementById(‘buttonID’).click();

14. Лучше 1 раз увидеть или Небольшой
видео-пример с использованием JS
при заполнении веб-формы

15. Возможности удаленного
веб-инспектора. Weinre

16. ● кросс-платформенная и кросс-
браузерная поддержка;
● возможность взаимодействовать с
более чем 1 мобильным устройством
одновременно;
● нет необходимости подключать
девайсы к ПК через USB (работа
осуществляется удаленно через weinre
веб-сервер, запущенный на ПК);
● возможность просмотра исходного
кода страницы, открытой на
мобильном девайсе; выполнение JS
команд, прочие возможности веб-
инспектора;
Weinre (Web Inspector Remote)

17. Компоненты Weinre
Debug Server - HTTP сервер, который вы запускаете на ПК.
Используется в коммуникации Debug Client и Debug Target.
Debug Client – веб-страница, интерфейс которой напоминает
Firefox’s Firebug или Google Chrome’s Web Inspector. Здесь
отображены Элементы, Консоль и пр.
Debug Target – веб-страница, открытая на мобильном девайсе и с
которой вы планируете работать через weinre.

18. Интерфейс Weinre

19. Использование эмуляторов
в тестировании

20. + возможность просмотра веб-сайта без наличия целого парка
мобильных устройств;
+ большой выбор эмуляторов: бесплатные и платные сервисы;
- эмуляторы, как правило, не имеют полный доступ к функциям
мобильной ОС, поэтому не могут на 100% заменить реальный
девайс;
- нет возможности протестировать скорость и производительность
сайта, т.к. эмуляторы используют железо ПК;
Плюсы и минусы

21. Эмуляция в Google Chrome
Позволяет эмулировать работу различных мобильных девайсов,
настраивать разрешение экрана, изменять юзер-агент и пр.

22. Подводим итоги
• как правило, любую задачу в
тестировании можно разрешить
несколькими способами;
• для проверки веб-сайтов на
мобильных устройствах могут быть
полезны базовые знания JavaScript,
инструменты удаленного веб-
инспектора и эмуляции.

23. Спасибо за внимание! :)
Вопросы?
Contacts:
Skype: olya_eryomenko
Mail: eryomenkoolya@gmail.com