Presentation about one interesting approach of testing big ajax applications using dev-team and QA-team together.

1. ТЕСТИРОВАНИЕ СЛОЖНЫХ AJAX ПРИЛОЖЕНИЙ С ПОМОЩЬЮ
SELENIUM
Сергей Швец, postindustria.com

2. План доклада
1.Необходимость введения автотестов
2.Архитектура тест-приложения
3.Подход к написанию тестов с помощью разработчиков
4.Узкие места при тестировании большого AJAX-
приложения
5.Автоматизация прогона автотестов

3. 1 2 3 4 5
НЕОБХОДИМОСТЬ ВВЕДЕНИЯ
АВТОТЕСТОВ

4. Описание Nimble
Большой AJAX-проект
Компоненты строятся “на
лету”
Частая смена DOM
Зависимость от 3rd-party
сервисов
Сильная связность
приложения

5. Проблемы тестирования
вручную
Слишком много времени
“Неожиданные” баги
перед релизом/деплоем

6. Некоторые цифры...
Проверка основного Общее время итерации
Время на регрессионное тестирование
функционала Nimble
занимает 1 день для 2
специалистов
29%
Нужно минимум две
проверки за итерацию
Одному человеку
71%
свойственно ошибаться -
необходимо два
специалиста

7. Преимущества автотестов
Экономия времени QA-специалистов
Раннее обнаружение ошибок
Повышение стабильности приложения
Уменьшение количества переоткрытых багов

8. 1 2 3 4 5
АРХИТЕКТУРА ТЕСТ ПРИЛОЖЕНИЯ

9. Проблема:
Изменение одного компонента тянет
за собой изменение по всему
приложению

10. Пример. Крах множества кейсов
Приложение После замены компонента
К1 К1
К2 НК2
К2
К5 К3 К5 К3
К4 К4
Компонент Тест-кейс

11. Подытожим...
Что происходит? Почему происходит?
Повторяемость кода
Изменение небольшого
компонента в AJAX
компонента - влечет за
приложении не
собой смену множества
учитывается в обычных
тест-кейсов
тест-кейсах

12. Решение
Сделать код тест-кейсов
повторяемым.

13. Понятие блока
Блок - функция (тест-кейс), который покрывает
небольшой неделимый участок функционала
Индикатор неделимости:
Ваш блок теряет всякий смысл, если соответствующий
компонент пропадает.

14. Архитектура
Блоки Тест-кейс
Basic Actions
login
logout login
open_settings add_new_contact
add_new_tag
remove_contact
Test Contacts
logout
add_new_contact
add_new_tag
remove_contact

15. Пример 2. Крах одного теста
Приложение После замены компонента
К1 К1
К2 НК2
К2
К5 К3 К5 К3
К4 К4
Компонент Блок

16. Преимущества и
недостатки
Минимум исправлений Дополнительные усилия на
поддержание
Возможность подключения
разработчиков Необходима документация

17. Примеры кода. Блок
Переданный объект Selenium
def login(unitTestClass, login, password):
sel = unitTestClass.selenium
sel.open("/")
sel.type("login-f_email", login)
sel.type("login-f_password", password)
sel.click("login_loginButton")

18. Примеры кода. Тест-кейс
def test_case1(self) :
action.login(self, "autotest@gmail.com", "test")
Блоки contacts.create_new_contact(self)
linker.send_email_from_contact_profile(self)
messages.send_email(self, None)
Функция - линкер

19. Пример как не надо делать
def test_mail_sync(unitTestCase):
sel = unitTestCase.selenium
sel.window_maximize()
sel.open_window("http://gmail.com/", "GMail")
time.sleep(3)
sel.select_window("GMail")
sel.type("Email", "dmitriytestovich333")
sel.type("Passwd", "ytrewq654321")
sel.click("signIn")
sel.wait_for_page_to_load("60000")
time.sleep(5)
#sel.click_at("//div[@id=':co']/div[1]/div", "")
#sel.click("//div[text()='Compose mail']")
# sel.select_frame("canvas_frame")
sel.click_at("//div[text()='Compose mail']", "")
for i in range(60):
try:
if sel.is_element_present("//textarea[@name='to']"): break
except: pass
time.sleep(2)
try:
sel.click_at("//div[text()='Compose mail']", "")
except: pass
.......
except: pass
time.sleep(1)
else: unitTestCase.fail("time out - waiting messages list failed (return from message full wiev)")
sel.wait_for_condition("selenium.browserbot.getCurrentWindow().document.getElementById("__selenium_ajax_helper").innerHTML ==
'0'", "30000")
time.sleep(2)
sel.wait_for_page_to_load("30000")
sel.wait_for_condition("selenium.browserbot.getCurrentWindow().document.getElementById("__selenium_ajax_helper").innerHTML ==
'0'", "30000")

20. Документация
НЕОБХОДИМА!

21. Что дает документация?
Блоки можно связывать
Блоки не повторяются
Картину по покрытому функционалу

22. Что должно быть в
документации?
Краткое описание назначения блока
Информация для связи блоков (место “начала” блока,
место “конца” блока)
Детальное описание тест-кейса
Пример использования (опционально)

23. Пример описания блока
Функция login:
1) Открыть урл сайта
2) Заполнить логин и пароль
3) Кликнуть на кнопку логин
4) Дождаться загрузки стартовой страницы

24. Пример документированного блока

25. 1 2 3 4 5
ПОДХОД К НАПИСАНИЮ ТЕСТОВ С
ПОМОЩЬЮ РАЗРАБОТЧИКОВ

26. Почему разработчик?
Разработчик знает
особенности работы
системы
Дополнительное
тестирование
разработчиком
Экономия времени на
написание тест-кейса

27. Что делает разработчик?
Разбивает тест-кейс на блоки
Реализует блок в коде
Документирует функцию
Добавляет функцию в репозиторий

28. Что делает QA?
Поставляет разработчику тест-кейсы ( юзер-стори)
Следит за блоками
Соединяет блоки в тест-кейсы
Тестирует новый функционал вручную

29. Процесс
QA Разработчик
Требования
Создание описаний
Реализация блоков
Документация и
добавление блока
Создание тест-кейсов
Тестирование приложения

30. 1 2 3 4 5
“УЗКИЕ” МЕСТА В НАПИСАНИИ
ТЕСТ-КЕЙСОВ

31. Проблема ожидания AJAX-
запросов:
В Selenium не существует механизма
ожидания AJAX-запроса

32. Варианты решения
Ожидание через pause
Ожидание отстройки какого-то элемента
Добавление сторонних библиотек в страницу: jQuery,
Prototype, Dojo

33. Наше решение
Встроенный div в котором находится актуальное
количество запросов.
js_condition =
”selenium.browserbot.getCurrentWindow().
document.getElementById("__selenium_ajax
_helper").innerHTML == '0'”
selenium.waitForCondition(js_condition,
timeout)

34. Демонстрация

35. Демонстрация

36. Тестирование 3rd party. Необходимые
механизмы
Работа Selenium с двумя окнами
Выбор фреймов
Циклы для обработки задержек при синхронизации

37. Работа Selenium с окнами и фреймами
Открытие окна и переключение между окнами
sel.open_window("http://gmail.com/", "GMail")
time.sleep(3)
sel.select_window("GMail")
Выбор фрейма
sel.select_frame("canvas_frame")
Возврат из фрейма
sel.select_frame("relative=top")

38. Работа с циклом
Построение цикла для ожидания события синхронизации:
for i in xrange(10):
if <check smth>:
break
else:
time.sleep(60)
<do smth>

39. Демонстрация

40. Демонстрация

41. Еще советы...
При перестройке DOM используйте pause - это
дополнительная проверка на юзабилити
Используйте css локаторы для выбора элементов, где
возможно - ускоряет работу теста
Sizzle - css-селектор для jQuery легко добавляется как в
сервер так и в Selenium IDE.

42. 1 2 3 4 5
АВТОМАТИЗАЦИЯ

43. Решение 1. “Кустарное”
Запуск GUI приложений через X-сервера. e.g. Xvfb /
Xephyr
Анализ сырых логов Selenium тестов с подключением
Selenium билд (bash- скриптинг)

44. Преимущества и
недостатки
Сложно в поддержке
Быстрое в реализации
Плохо масштабируемо
Дешевое (запуск на
одном компьютере) Только FF/Webkit (linux
машина)
Ссылка на пример настройки: http://bit.ly/fjq8ge

45. Решение 2. Selenium Grid
Установка Selenium Grid + Hudson Selenium Plugin
Настройка отдельных нод (Windows/Linux/Mac)
Интеграция всего путем бесконечных настроек

46. Преимущество и
недостатки
Масштабируемо Сложность в настройке
Быстрый прогон тестов Дорогое (расходы на
содержание тест фермы)
Поддержка всех платформ
и браузеров Сложности в поддержке
Ссылка на пример настройки: http://bit.ly/gT5MvA

47. Спасибо за внимание!
email: shvets.serg@gmail.com