Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Акулич Владислав
www.DPI.Solutions
О себе
Владислав Акулич
IT Consultant / QA
Automation Engineer
www.DPI.Solutions
www.comaqa.by
www.dpi.solutions
Мы рассмотрим:
• Angular fundamentals
• Как тестировать Single page application
• Protractor fundamentals
• Protractor, по...
Single page application
Single Page Application (SPA)
~“Одностраничное приложение”
SPA – web-приложение, размещенное на
«о...
Плюсы SPA
• SPA существенно (в разы) сокращает так
называемые “хождения по кругу”, то есть
загрузку одного и того же конте...
SPA фреймворки
• Ember - http://emberjs.com/
• AngularJS - https://angularjs.org/
• Knockout.js - http://knockoutjs.com/
•...
Angular – что же это?
MVW (Model-View-Whatever) - фреймворк
для разработки client-side web приложений
на JavaScript. Он со...
AngularJS и QA
AngularJS
• Максимально облегчить
Автоматизированное тестирование.
• Дополнительные плюсы:
- Отделяет предс...
Как Автоматизировать SPA?
• Nightwatch.js - http://nightwatchjs.org/
• CasperJS - http://casperjs.org/
• Protractor - http...
Даешь стране !!!
Почему Protractor?
• Selenium 2 WebDriver based (WebDriverJS)
• Бесшовно интегрирован с Jasmine,
Mocha, Cucumber
• Рекомен...
JS библиотеки
• Jasmine - http://jasmine.github.io/
• Mocha - http://mochajs.org/
• Cucumber - https://github.com/cucumber...
High level vision
Установка и запуск
• Устанавливаем:
• Запускаем сервер:
Test
Запуск тестов
• Configuration file:
• Запуск тестов:
Поиск элемента: Локаторы
• by.model('first')
• by.binding('latest')
• by.id('gobutton')
• by.css(‘a[title=“Add new server”...
Поиск элемента: Рекомендации
• Лучшим вариантом считается поиск по
model или binding
• Иначе поиск по css, id и многие мно...
Поиск элемента: Technical
tips element vs element.all
• Один элемент:
• Коллекция элементов:
Действия над UI элементами:
Ожидания
Protractor, вам больше не нужно
заботиться о добавлении различных
ожиданий. Инструмент сам понимает, когда
нужно ...
Дебажим тесты
1. IDE debug (WebStorm и др. для JS)
2. С помощью добавления ключевого слова
debugger в тесты
Suites
• Изменяем config. file:
• Запускаем suite:
Пример архитектуры
Protractor и Page Object
Запускаем тесты в
нескольких браузерах
оnPrepare – глобальный pre
condition
params, как простой DDT
DDT based QA Automation
Test
Тестируем non-Angular
приложения
• Очистить от «кожуры» апельсин
«AngularWebDriver», чтобы получить
универсальный фрукт «W...
Отключаем стандартные
ожидания Angular
• Config. file:
• В тесте:
Делаем тесты лаконичнее
CoffeeScript – что это...
CoffeeScript - это
небольшой язык,
который компилируется
в JavaScript. Код
компилируется один-к-...
Page Object и Coffee Script
Подведём итоги
Protractor:
• Консистентный и привычный благодаря
Selenium 2 WebDriver стек технологий
(WebDriverJS)
• Удоб...
Спасибо за внимание!
Владислав Акулич
www.DPI.Solutions
www.comaqa.by
www.dpi.solutions
Upcoming SlideShare
Loading in …5
×

Protrarctor and Angular

1,140 views

Published on

Доклад Владислава Акулича на конференции SQA Days-17,
29-30 мая 2015 г., Минск
www.sqadays.com

Published in: Education
  • Be the first to comment

Protrarctor and Angular

  1. 1. Акулич Владислав www.DPI.Solutions
  2. 2. О себе Владислав Акулич IT Consultant / QA Automation Engineer www.DPI.Solutions www.comaqa.by www.dpi.solutions
  3. 3. Мы рассмотрим: • Angular fundamentals • Как тестировать Single page application • Protractor fundamentals • Protractor, почему именно он ..? • Protractor & CoffeeScript fundamentals
  4. 4. Single page application Single Page Application (SPA) ~“Одностраничное приложение” SPA – web-приложение, размещенное на «одной» web-странице, которая для обеспечения работы приложения загружает «минимальное полное» подмножество кода, реализующее «активный» функционал, вместе с загрузкой контента страницы для «активного» функционала.
  5. 5. Плюсы SPA • SPA существенно (в разы) сокращает так называемые “хождения по кругу”, то есть загрузку одного и того же контента снова и снова. • Дополнительные «преимущества» - Отлично работает как на стационарных, так и на мобильных утройствах. - Обилие средств для создания богатого пользовательского интерфейса.
  6. 6. SPA фреймворки • Ember - http://emberjs.com/ • AngularJS - https://angularjs.org/ • Knockout.js - http://knockoutjs.com/ • Backdone.js - http://backbonejs.org/
  7. 7. Angular – что же это? MVW (Model-View-Whatever) - фреймворк для разработки client-side web приложений на JavaScript. Он создан и поддерживается в компании Google.
  8. 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. 9. Как Автоматизировать SPA? • Nightwatch.js - http://nightwatchjs.org/ • CasperJS - http://casperjs.org/ • Protractor - http://angular.github.io/protractor/#/
  10. 10. Даешь стране !!!
  11. 11. Почему Protractor? • Selenium 2 WebDriver based (WebDriverJS) • Бесшовно интегрирован с Jasmine, Mocha, Cucumber • Рекомендуют разработчики Angular.
  12. 12. JS библиотеки • Jasmine - http://jasmine.github.io/ • Mocha - http://mochajs.org/ • Cucumber - https://github.com/cucumber/cucumber-js
  13. 13. High level vision
  14. 14. Установка и запуск • Устанавливаем: • Запускаем сервер:
  15. 15. Test
  16. 16. Запуск тестов • Configuration file: • Запуск тестов:
  17. 17. Поиск элемента: Локаторы • by.model('first') • by.binding('latest') • by.id('gobutton') • by.css(‘a[title=“Add new server”]')
  18. 18. Поиск элемента: Рекомендации • Лучшим вариантом считается поиск по model или binding • Иначе поиск по css, id и многие многие другие стандартные локаторы.
  19. 19. Поиск элемента: Technical tips element vs element.all • Один элемент: • Коллекция элементов:
  20. 20. Действия над UI элементами:
  21. 21. Ожидания Protractor, вам больше не нужно заботиться о добавлении различных ожиданий. Инструмент сам понимает, когда нужно вызвать следующий тестовый шаг.
  22. 22. Дебажим тесты 1. IDE debug (WebStorm и др. для JS) 2. С помощью добавления ключевого слова debugger в тесты
  23. 23. Suites • Изменяем config. file: • Запускаем suite:
  24. 24. Пример архитектуры
  25. 25. Protractor и Page Object
  26. 26. Запускаем тесты в нескольких браузерах
  27. 27. оnPrepare – глобальный pre condition
  28. 28. params, как простой DDT
  29. 29. DDT based QA Automation Test
  30. 30. Тестируем non-Angular приложения • Очистить от «кожуры» апельсин «AngularWebDriver», чтобы получить универсальный фрукт «WebDriver»: • Пример:
  31. 31. Отключаем стандартные ожидания Angular • Config. file: • В тесте:
  32. 32. Делаем тесты лаконичнее
  33. 33. CoffeeScript – что это... CoffeeScript - это небольшой язык, который компилируется в JavaScript. Код компилируется один-к- одному в JS-эквивалент. Вы можете использовать любую существующую библиотеку JavaScript прямо из CoffeeScript, и наоборот.
  34. 34. Page Object и Coffee Script
  35. 35. Подведём итоги Protractor: • Консистентный и привычный благодаря Selenium 2 WebDriver стек технологий (WebDriverJS) • Удобная инфраструктура для работы с Angular (model / binding / etc.) • Умные ожидания для Angular • Лаконичные тесты (CoffeeScript)
  36. 36. Спасибо за внимание! Владислав Акулич www.DPI.Solutions www.comaqa.by www.dpi.solutions

×