Эффективное тестирование сайта на мобильных...

Software quality assurance days

17 Международная конференция по вопросам качества ПО

sqadays.com

Минск. 29–30 мая 2015

Роман СавлюковWargaming. Киев, Украина

Эффективное тестирование сайта на мобильных устройствах

О себе

• Роман Савлюков

• QA Engineer

• Manual, mobile, performance testing…

Мы обсудим

• Как определить список устройств для тестирования

• Конфигурации мобильных сайтов

• Estimation и тесты для мобильного сайта

Мы обсудим

Мы обсудим

Список устройств

всегда

утверждается клиентом

Список устройств для тестирования

Мы обсудим

Необходимо рекомендовать

свой перечень

устройств

Список устройств для тестирования

Мы обсудим

• Статистику использования в регионах, где

проживают клиенты вашего сайта

Запросить у заказчика или выяснить самостоятельно

Необходимо учитывать:

Список устройств для тестирования

Мы обсудим

Необходимо учитывать:

• Фактическое наличие устройств для

разработки и тестирования

Сколько стоит закупитьновые устройства?

Список устройств для тестирования

Мы обсудим

Необходимо учитывать:

• Диапазон разрешений экрана

Будем поддерживать все разрешения?

Список устройств для тестирования

Мы обсудим

Необходимо учитывать:

• Техническую сложность в реализации и

поддержке специфических устройств

IE Mobile, BlackBerry, Opera Mobile etc. ?

Список устройств для тестирования

Мы обсудим

Необходимо учитывать:

• Временные затраты в целом на разработку,

тестирование и дальнейшую поддержку

Чем больше устройств – тем больше времени понадобится.

Список устройств для тестирования

Мы обсудим

'Лучше поздно, чем никогда!' - подумал старый еврей, положив голову на рельсы и

глянул вслед уходящему поезду.

Список устройств для тестирования

Финальный список устройств утверждает клиент

Мы обсудимКонфигурации мобильных сайтов

• Разный URL

• Динамический показ

• Адаптивный веб-дизайн

Мы обсудим

CSS + JS + Media CSS + JS + Media

Database

Конфигурация – Разный URL

Мы обсудим

Database + CSS + Java Script

CSS + JS + MediaCSS + JS + Media

Конфигурация – Динамический показ

Мы обсудим

Database + CSS + Java Script + Media

Конфигурация – Адаптивный дизайн

Мы обсудим

КонфигурацияURL

не изменяетсяHTML + CSS + JS

не изменяется

Адаптивный дизайн

Динамический показ

Разные URL

Конфигурации мобильных сайтов

Мы обсудим

1. Определяем функциональность для тестирования на эмуляторе и мобильных устройствах

2. Пишем тесты для эмулятора и мобильных устройств

Тест кейсы – Разный URL – Подход

Мы обсудим

Последовательность проверок:

1. Выполняем тесты предусмотренные для эмулятора

2. Выполняем тесты предусмотренные для мобильных устройств

1) основной бизнес сценарий2) сокращенные сценарии

Рекомендации – Разный URL

Мы обсудим

Google Developer Tools – F12

Эмуляторы мобильных браузеров

Мы обсудимCокращенные тестовые сценарий

1. Проверяют одну функцию

2. Каждый сценарий выполняется в горизонтальном и вертикальном положении устройства

3. Выполняются только один раз, если повторяется функциональность на разных страницах сайта

4. Должны быть объеденены в чек лист

Мы обсудим

1. Выделяем функциональность c общим и индивидуальным содержанием HTML + CSS + JS

2. Определяем функциональность для тестирования на эмуляторе и мобильных устройствах

3. Пишем тесты для эмулятора и мобильных устройств

Тест кейсы – Динамический показ – Подход

Мы обсудимРекомендации – Динамический показ

Последовательность проверок:

1. Выполняем тесты предусмотренные для эмулятора

2. Выполняем тесты предусмотренные для мобильных устройств

1) основной бизнес сценарий2) сокращенные сценарии

Мы обсудимТест кейсы – Адаптивный дизайн - Подход

1. Выясняем различие между мобильной и обычной версиями сайта

2. Пишем тесты для эмулятора и мобильных устройств

Мы обсудим

Последовательность проверок:

1. Выполняем все тесты предусмотренные для обычной версии сайта

2. Выполняем все тесты предусмотренные для мобильных устройств на эмуляторе

3. Выполняем все тесты предусмотренные для мобильных устройств на устройствах:

1) основной бизнес сценарий2) сокращенные сценарии

Рекомендации – Адаптивный дизайн

Мы обсудим

• код сторонних веб сервисов - 3th part

* * * *

Тесты для мобильных устройств

Мы обсудим

• масштабирование элементов на экране

Тесты для мобильных устройств

Мы обсудим

• анимация вместо mouse hover

на мобильных устройствах

Тесты для мобильных устройств

Мы обсудим

• нажатие по элементам на экране

touch - вместо клика

Тесты для мобильных устройств

Мы обсудимТесты для мобильных устройств

• открытие в новой вкладке через

программный интерфейс устройства

Мы обсудим

• ввод текста с экранной клавиатуры

Тесты для мобильных устройств

Мы обсудим

• скроллинг через touch по каруселям,

содержащим фото или текст

Тесты для мобильных устройств

Мы обсудим

• раскрывающиеся списки и вкладки с контентом

Тесты для мобильных устройств

Мы обсудимВыводы и оценка времени для тестирования

1. Учитываем конфигурацию сайта и количество устройств

2. Основная часть проверок выполняетсяна эмуляторах

3. Закладываем в 2 раза больше времени для ручного тестирования на мобильных устройствах

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

Мы обсудимВыводы и оценка времени для тестирования

5. Узнать что проверять на мобильных устройствах –помогут разработчики

6. Используйте изменение ориентации экрана на мобильном устройстве и эмуляторе

7. Выполняйте тесты параллельно на разных устройствах

— Когда я ночью возвращаюсь домой, жена не говорит ни слова, только смотрит на часы. — Тебе еще везет! Моя смотрит на календарь.

Роман Савлюков

savlyukov@gmail.com