Protractor - Staying Sane!
Lee Blazek


About Me
(By day)
Angular, Mean Stack, Front-end, Node api's, with a side of iOS


About Me
(By Night)

Building apps/api's for public and canvaser's
Colorado Care
Amendment 69
on the November 2016
"Health Care is a Human Right,
not a commodity to be bought, sold, and traded!!"
- What does Protractor Really do?
- Why use Protractor?
- Protractor, webdriver, selenium, WTF? really?
- set up
- best practices for writing tests
- Do's and Don'ts(unfortunately there are a lot of don'ts but I'll save you the headache!)
- run examples
- how to debug
- elementor

What does Protractor really do?
Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.
Protractor is built on top of WebDriverJS, which uses native events and browser-specific drivers to interact with your application as a user would
Tests test your whole stack from the browser thru server to database. And that includes the network connection.
It is NOT a unit test, DON'T expect it to be like unit tests
Phonegap's point of existence is to not need to exist..
- Android
- iOS
- windows phone
- Blackberry
- Firefox
- LG web os
- Fire OS
- HTML, CSS, JS
- create/copy into a native project(ios, android, etc)
- Compile and build native app (ipa, apk..)
Cordova is a way that JS can access native device capabilities like push notifications, camera, contacts, etc.
It does this thru plugins - so one JS command is the same in all devices.
BUT
there has to be corresponding native code written per device platform in the native language per platform.

Status Bar Plugin
- iOS
- android
- windows phone
"The StatusBar object provides some functions to customize the iOS and Android StatusBar."
Why use Protractor?
Its really good for smoke testing
Good making sure all of the parts(front-end, UI, server, database work together)
Good when doing large refactors, or framework updates
Protractor, webdriver, selenium, WTF? really?
Protractor is an end-to-end test framework for AngularJS applications. Protractor is a Node.js program that supports the Jasmine and Mocha test frameworks.
Selenium is a browser automation framework. Selenium includes the Selenium Server, the WebDriver APIs, and the WebDriver browser drivers.
Protractor works in conjunction with Selenium to provide an automated test infrastructure that can simulate a user’s interaction with an Angular application running in a browser or mobile device.


| native apps |
mobile website | responsive website | desktop | |
|---|---|---|---|---|
| initial load | slow | fast | fast | fast |
| subsequent loads | fast | slow | slow | fast |
| gesture nav | yes | yes | no | no(well maybe windows now) |
| offline | yes | possible | no(maybe) | no |
| push notify | yes | no | no | safari only |
| UX | great | better | okay | good on desktop |
| User expectations | high | medium | medium | high |
Resolution Insanity
What do you do?
SVG's
Icon fonts
BUT!!
Make sure you design it with flat design so you can do that. And you may have to explain that to clients if they want to influence or provide designs
- font awesome
- material design
- Ico moon
Set up
- Install node > v6.x.x so you can use es6 features (using nvm is even better)
- npm i -g protractor
- webdriver-manager update
- make sure you are using CURRENT chrome(or safari, etc) NOT chrome canary, etc
your system
Set up
- make a "protractor.conf.js" file
- set baseUrl or variations
- set up test files in each module or in e2e folder, or a combo
your project
show conf file
Set up
- Jasmine 2.x default installed
- mocha limited support
- cucumber can be installed via custom options
- custom options
tests
semi ordered
- Make sure you load home/or login first
- best setup if our site is not hyper performant(less than 6 requests per page)
- reduces page loads and drastically increases total test run time
Sharded
- each run in a separate window
- need to load home/login in each window
- can easily overload you server or network connection cause false negative timeouts
Suites
- awesome use them
- at least a happy path suite
- good for different sections of app
Best Practices for tests?
DON'T
- Use page objects
- Don't use before eachs(unless your site is hyper perfomant <6 requests per state)
- Don't use wait for angular
DO INSTEAD
- keep all element calls in the same file as test
- use --params.sleep
- order or semi order your tests to save calls(not over load your connection
- Have happy paths, and suites along with running all tests
Expect the Un-Expected alot!
Demo
Debugging
- run small suites or single tests
- browser.pause()
- console.log()
- screenshots
- output to file
browser.pause()
- "c" move to next task in que
- "repl" to enter interactive mode and use element.all(), etc
- "ctrl+c" to quit debugger
Upcoming talks
- Protractor - Angular meetup -Tuesday August 9th
- Colorado Care and tech - Thursday August 18th - Denver
- Colorado Care and tech - Thursday August 25th - Boulder
- Colorado Care and tech - Thursday Sept 1st - Denver
Lee Blazek
- www.berzek.io
- info@berzerk.io
- twitter: @surfjedi
- linkedin: www.linkedin.com/in/leeblazek
- https://github.com/berzerk-interactive
Protractor - staying sane!
By Lee Blazek
Protractor - staying sane!
- 940