This document provides an overview of end-to-end testing with Protractor by summarizing various terminology, demonstrating example tests, and discussing continuous integration practices. It defines key Angular and testing concepts like directives, dependency injection, Jasmine, and WebDriver. Example tests are shown for a calculator app and a mock Facebook app. Continuous integration is discussed in the context of running Protractor tests within Docker containers as part of the software delivery pipeline.

1. *Survival Guide*

2. ANDRÁSI LÁSZLÓ
• (2007)
• PHP to Python
• Symfony to Django
• Employee to Freelancer,
• (2010)
• Single to Married
• (2011)
• Sleeeeep to Dad
• Freelancer to Employee (Lensa)
• Django to Flask(…)
• Python to Polyglot
github.com/laco
twitter.com/a_laco
2

3. TOC
• History
• Terminology
• Demo
• CI
3

4. TOC V2
• Demo
• Terminology
• CI
• Back to Demo

5. DEMO1- SLOW
CALCULATOR
• https://github.com/juliemr/protractor-demo

6. DEMO2 - FBOOK
• Comming soon (1-2 days) https://github.com/laco/protractor-demo-fbook
• User Stories:
• User can login/logout
• User can leave status messages
• User can like status messages
• Technical:
• single page angular app
• python3 backend
• containerization (docker)

7. TERMINOLOGY
7

8. ANGULARJS
• A structural framework for dynamic web apps.
• “Angular is what HTML would have been, had it been
designed for applications.”
• Angular was built with the CRUD application in mind.
• Games and GUI editors are examples of applications with
intensive and tricky DOM manipulation. These kinds of
apps are different from CRUD apps, and as a result are
probably not a good fit for Angular.

9. • Two-way data binding - sync data between the model and the view
• Dependency Injection - Creates and wires objects and functions
• Template - HTML with additional markup
• View - what the user sees (the DOM)
• Controller - the business logic behind views
• Scope - context where the model is stored so that controllers, directives and expressions can access it
• Model - the data shown to the user in the view and with which the user interacts
• Directives - extend HTML with custom attributes and elements
• Expression - access variables and functions from the scope
• Filter - formats the value of an expression for display to the user
• Module - a container for the different parts of an app including controllers, services, filters, directives which
configures the Injector
• Services - reusable business logic independent of views
• Injector - dependency injection container
• Compiler - parses the template and instantiates directives and expressions

10. END-TO-END TESTING
User Browser JS App
Server-side
(backend)
Model (DB)
Acceptance
Testing
✔️ ✔️ ✔️ ✔️ ✔️
Automated
Acceptance
Testing
❌ ✔️ ✔️ ✔️ ✔️
Most
common…
(CI)
❌ ✔️ ✔️ ✔️
❌
*(dummy)
* use some kind of “Hexagonal Architecture” !!!

11. • Unit tests > Integration tests > Functional
tests (e2e) > System tests (e2e)
• Unit tests are fast and cheap!
• Best practice: Happy path scenarios

12. WEBDRIVER
• W3C Spec:
https://w3c.github.io/webdriver/webdriver-
spec.html
• Open Source Implemtentation of the spec:
Selenium Webdriver
https://github.com/SeleniumHQ/selenium

13. WEBDRIVERJS
• JavaScript bindings for WebDriver (NodeJS
package)
• lot of “Promises”

14. PROMISES
• What is a Promise?The simplest explanation:
it is an easy way to avoid writing the Pyramid
of Doom
• https://github.com/kriskowal/q

15. PYRAMID OF DOOM

16. • A Promise is an object representation of
an event. In the course of it’s life, a
Promise goes from a pending state, when
it’s called, to a resolved or rejected state,
when it’s been completed, or it could also
stay pending forever and is never
resolved.
• http://flaviocopes.com/deferred-and-
promises-in-javascript/

18. PROTRACTOR
• End-to-end test framework specifically for AngularJS apps
• built on top of WebDriverJS
• key benefits:
• It supports Angular-specific locator strategies
• You don’t need to add waits or sleeps to your test (Understands
Angular’s run loop)
• It uses Jasmine
• It is easy to set up “page objects”

19. JASMINE
• a behavior-driven development framework for testing
JavaScript code.
• suites contains specs with expectations (describe(), it(),
expect() (matchers))
• beforeEach, afterEach, nesting describe blocks,
• Spies (test doubles)
• Beware: two main versions:1.3 and 2.x.

20. HOW IT WORKS
• Your tests call Protractor APIs
• Protractor extends/calls webdriverjs (the selenium-
webdriver node package?)
• webdriverjs calls a (local or remote) Selenium
server
• Selenium server calls a browser driver
• Browser driver uses your app as a user would

22. CI

23. CI & CD
• Protractor tests as part of the delivery pipeline (with containers of course… :D)
• Step 1: Put Protractor and the browser inside the container
• Step II: Put Protractor and the browser into a second container and link the
app container
• Step III:
• App container
• Protractor container
• Selenium container (with browser) - https://github.com/SeleniumHQ/docker-
selenium

24. LINKS…
• http://www.ng-newsletter.com/posts/practical-protractor.html
• https://w3c.github.io/webdriver/webdriver-spec.html
• https://seleniumhq.github.io/docs/
• http://www.pauljeter.net/web-development/conferences/ng-
conf/protractor-testing-in-angularjs-ben-clikinbeard-2015-ngconf/
• https://docs.angularjs.org/guide/e2e-testing
• http://googletesting.blogspot.hu/2014/11/protractor-angular-testing-made-
easy.html

25. GITHUB.COM/LACO/PROTR
ACTOR-DEMO-FBOOK