1. Акулич Владислав
www.DPI.Solutions

2. О себе
Владислав Акулич
IT Consultant / QA
Automation Engineer
www.DPI.Solutions
www.comaqa.by
www.dpi.solutions

3. Мы рассмотрим:
• Angular fundamentals
• Как тестировать Single page application
• Protractor fundamentals
• Protractor, почему именно он ..?
• Protractor & CoffeeScript fundamentals

4. Single page application
Single Page Application (SPA)
~“Одностраничное приложение”
SPA – web-приложение, размещенное на
«одной» web-странице, которая для
обеспечения работы приложения загружает
«минимальное полное» подмножество кода,
реализующее «активный» функционал,
вместе с загрузкой контента страницы для
«активного» функционала.

5. Плюсы SPA
• SPA существенно (в разы) сокращает так
называемые “хождения по кругу”, то есть
загрузку одного и того же контента снова
и снова.
• Дополнительные «преимущества»
- Отлично работает как на стационарных, так и
на мобильных утройствах.
- Обилие средств для создания богатого
пользовательского интерфейса.

6. SPA фреймворки
• Ember - http://emberjs.com/
• AngularJS - https://angularjs.org/
• Knockout.js - http://knockoutjs.com/
• Backdone.js - http://backbonejs.org/

7. Angular – что же это?
MVW (Model-View-Whatever) - фреймворк
для разработки client-side web приложений
на JavaScript. Он создан и поддерживается
в компании Google.

8. AngularJS и QA
AngularJS
• Максимально облегчить
Автоматизированное тестирование.
• Дополнительные плюсы:
- Отделяет представление от поведения
Ready to use, fully integrated mock-ing Engine
Ready to use, fully integrated Dependency
Injection AngularJS end-to-end QA Automation.

9. Как Автоматизировать SPA?
• Nightwatch.js - http://nightwatchjs.org/
• CasperJS - http://casperjs.org/
• Protractor - http://angular.github.io/protractor/#/

10. Даешь стране !!!

11. Почему Protractor?
• Selenium 2 WebDriver based (WebDriverJS)
• Бесшовно интегрирован с Jasmine,
Mocha, Cucumber
• Рекомендуют разработчики Angular.

12. JS библиотеки
• Jasmine - http://jasmine.github.io/
• Mocha - http://mochajs.org/
• Cucumber - https://github.com/cucumber/cucumber-js

13. High level vision

14. Установка и запуск
• Устанавливаем:
• Запускаем сервер:

15. Test

16. Запуск тестов
• Configuration file:
• Запуск тестов:

17. Поиск элемента: Локаторы
• by.model('first')
• by.binding('latest')
• by.id('gobutton')
• by.css(‘a[title=“Add new server”]')

18. Поиск элемента: Рекомендации
• Лучшим вариантом считается поиск по
model или binding
• Иначе поиск по css, id и многие многие
другие стандартные локаторы.

19. Поиск элемента: Technical
tips element vs element.all
• Один элемент:
• Коллекция элементов:

20. Действия над UI элементами:

21. Ожидания
Protractor, вам больше не нужно
заботиться о добавлении различных
ожиданий. Инструмент сам понимает, когда
нужно вызвать следующий тестовый шаг.

22. Дебажим тесты
1. IDE debug (WebStorm и др. для JS)
2. С помощью добавления ключевого слова
debugger в тесты

23. Suites
• Изменяем config. file:
• Запускаем suite:

24. Пример архитектуры

25. Protractor и Page Object

26. Запускаем тесты в
нескольких браузерах

27. оnPrepare – глобальный pre
condition

28. params, как простой DDT

29. DDT based QA Automation
Test

30. Тестируем non-Angular
приложения
• Очистить от «кожуры» апельсин
«AngularWebDriver», чтобы получить
универсальный фрукт «WebDriver»:
• Пример:

31. Отключаем стандартные
ожидания Angular
• Config. file:
• В тесте:

32. Делаем тесты лаконичнее

33. CoffeeScript – что это...
CoffeeScript - это
небольшой язык,
который компилируется
в JavaScript. Код
компилируется один-к-
одному в JS-эквивалент.
Вы можете использовать
любую существующую
библиотеку JavaScript
прямо из CoffeeScript, и
наоборот.

34. Page Object и Coffee Script

35. Подведём итоги
Protractor:
• Консистентный и привычный благодаря
Selenium 2 WebDriver стек технологий
(WebDriverJS)
• Удобная инфраструктура для работы с
Angular (model / binding / etc.)
• Умные ожидания для Angular
• Лаконичные тесты (CoffeeScript)

36. Спасибо за внимание!
Владислав Акулич
www.DPI.Solutions
www.comaqa.by
www.dpi.solutions