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..

  1. Android
  2. iOS
  3. windows phone
  4. Blackberry
  5. Firefox
  6. LG web os
  7. Fire OS
  1. HTML, CSS, JS
  2. create/copy into a native project(ios, android, etc)
  3. 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