Protractor Testing In Depth

Protractor training, fully updated for 2018+ practices:

  • 100% TypeScript
  • ()=> and other concise syntax
  • "async/await"
  • Protractor Expectations library
  • Attention to waitForAngularEnabled(false), which many applications require

Some developers have described Protractor E2E browser automation testing as tedious or fragile, sometimes so often that this is accepted as the common wisdom. While automated browser testing is not without its challenges, this reputation is exaggerated! With the right skills and techniques, Protractor testing is very practical and valuable.

There are numerous resources around the Internet to get started with Protractor, but relatively few oriented toward extensive, advanced use. Furthermore, many older learning resources reflect several years old practices, rather than current optimal practices.

The goal of this class is to be the definitive, detailed, deep explanation of how to use Protractor effectively. Developers learn techniques for concise, quickly developed automated tests - of large or complex applications. This class covers both getting started and reaching the finish line.

Our examples use Angular applications written with the current Angular, but most of the techniques apply back to AngularJS 1.x, and even to other frameworks like React. (Inquiries about applying these techniques to React applications are welcome!)

Who Should Attend?

While the topic area is testing, Protractor and related tools are oriented toward "developers in test" not toward non-developer testers.

Prerequisites / requirements

  • Experience in software development
  • Experience with Angular or a similar (we can offer this as a longer class, for non-Angular developers)
  • Editor and other tools to work on JavaScript source code.
  • A computer - this is a hands-on workshop.
  • Ability to install software, including Node, NPM, and packages.

Proven results

We have trained thousands of developers at hundreds of companies, including numerous global leaders.

Topic outline

  • Introduction and background
    • Oasis Digital introduction, student introduction
    • What are automated tests, and why E2E?
    • An Angular-specific testing pyramid
      • Non-angular unit tests
      • Unit tests, for code in Angular services
      • Integration tests, spanning services or client/server
      • Component tests, for the most complex widgets
      • Protractor/E2E scenario-based automated browser tests
      • Human testing
    • Why Protractor for Angular E2E testing?
    • Web Platform refresher
      • HTML and the DOM, Document Object Model
      • CSS, including CSS selectors for testing
      • XPath?
  • E2E technology and terminology
    • TypeScript, the language used throughout
    • Angular
    • Node, the JavaScript execution environment
    • NPM, the package manager
    • Protractor, the E2E testing tool
    • Jasmine, the testing library
    • Selenium / WebDriver, the browser automation tool
    • Browsers, including headless
    • Development tools
      • IDE / editor
      • Selenium recording tools - unfortunately not Protractor-specific
      • Browser development tools (Chrome, Firefox, etc)
      • Elementor - broken, as of 2018
  • A philosophy of E2E automated browser testing
    • Test like a user
    • Detailed instructions
    • Asynchronicity
    • Explicit waiting: only if needed
    • Black box
    • Tests are code
    • Automated browser testing drives UI/UX improvements
  • Protractor/Selenium test basics
    • Asynchronicity
    • Promises and async/await
    • Test cases
    • Test suites
    • Controlling the browser
    • Locator
    • ElementFinder
    • ElementArrayFinder
    • Expectations
    • waitForAngular - automatic waiting
    • browser.wait - explicit waiting
  • Hands-on - Getting Started
    • Installing Node, NPM
    • Adding Protractor, Selenium
    • Configuring Protractor
    • Your first test
    • Testing a button
    • Testing navigation
    • Testing a form
    • Loading data with HTTP
    • Loading data server push
  • Growing a Protractor test suite (Hands-on)
    • Page "objects"
      • Stateful page objects
    • Organizing test suites
    • Naming tests and suites
    • The right level of granularity - Optimize for debugging
    • Testing use cases, rather than features.
    • Building use cases over time; extending versus starting anew.
    • Beyond page objects / page modules
    • Managing noise
    • Keep low-level APIs out of your tests to the extent reasonable
    • Yet keep your test explicit
    • Fail quickly, saving turnaround time.
  • Automating the System Under Test
    • Resetting the system under test
    • Automated builds
    • Automated deployment
    • Database refresh vs data-tolerant test suites
    • Automated / CI execution of an E2E test suite
  • Scaling Protractor Testing
    • Multiple browsers - how many is enough?
    • Multiple operating systems - how many is enough?
    • A local Selenium grid
    • Outsourcing your Selenium grid
      • Sauce Labs
      • BrowserStack
      • TestingBot
      • CrossBrowserTesting
  • Problems and Solutions (Hands-on)
    • Timing fragility
    • Login CAPTCHAs and 2FA
    • Protractor/Angular incompatible libraries
    • Feature change fragility
    • Selecting the Target Elements
    • Timeouts, one of the worst aspects of E2E browser testing
    • Random failures
    • Latency - round trips matter
    • Post-mortem analysis - logging and screenshots
    • Browser console
    • Animated routes and widget
    • Animated data
    • Compounding frustrations and developer fatigue
  • Resources
  • Additional topics
    • Sources of slowness
    • Protractor developmenet and evolution
    • Alternatives to Protractor
    • Waiting for a condition versus checking the condition
    • Organized according to the users' understanding of the system
    • Reusable units of testing
    • Driving system design from tests
    • Continuous E2E testing during development
    • What should I test?
    • Data-driven testing
    • System simulation testing
    • Use browser.sleep(n) ?
    • Alternatives to Jasmine
    • Test reports, including screen captures

Instructors

Our instructors have extensive Angular development experience, so much so that we use the phrase "developer/instructor". Meet some of them here:

Kyle Cordes

Kyle has worked on web applications since the late 1990s, including line-of-business, low-level infrastructure, and enterprise data streaming systems. Kyle has led numerous projects with a wide variety of development tools and libraries. Kyle created Angular Boot Camp in late 2013.

Bill Odom

Bill has been a software designer, developer, or systems architect for over two decades. Most recently, Bill has served as a consultant and senior software developer for Fortune 1000 firms in the Midwest. He's been building web applications across a variety of platforms, tools, and technologies since the earliest days of the web.

Paul Spears

Paul leads the curriculum development process for Angular Boot Camp. He has an intense interest and passion for effective class structure, examples, and pedagogy. Paul leads software projects at Oasis Digital and works to spread state-of-the-art Angular techniques both in these projects and across the development community as a speaker and panelist.

Training FAQs

Q: Is this taught "in person"?
A: We offer training both in-person and online via remote conferencing.
Q: How does the remote option work?
A: Much like an in-person class, it is conducted by our expert trainers, in real time. The trainers can answer questions, assist with trouble students are having, etc. We strive to offer as much of the in-person experience as possible, online.
Q: Are there open enrollment public classes?
A: We currently only offer an open-enrollment "public" class for our flagship Angular Boot Camp.
Q: How does the recorded class work?
A: In a recorded class, the biggest obstacle is the lack of live question-and-answer To deliver a great result, we practice teaching with live groups before creating the recorded class. In this way, we aim to answer as many of the common (and less common) questions as possible. We also do as much "live coding" as makes sense for the topic, in a recorded class.
Q: Can we schedule a private class any time?
A: Our classes are taught by developers who use the subject technologies in their daily work, so we don't assign "any" available developer/trainer to any particular class, but only to classes with a strong experience and knowledge match. Please contact us to arrange a date.

Two ways to learn

1) Online, recorded course

Coming soon

For some of our class topics, we are working on an online course offering. It will have numerous short video segments, teaching each topic in detail, plus longer segments in which we demonstrate the techniques in the use.

This format makes it possible for us to provide great depth of content, while as a viewer you can carefully study the portions of interest, and skip those of less interest; or rewatch the live coding example segments to pick up more nuances.

This content is still in development - if you're interested please contact us (using the form, or contact information at the bottom of the page).

2) Private workshop

Available now!

For corporate groups and other organizations, we offer live, in-person instruction. These teams typically have advanced needs and are looking for hands-on assistance, so for larger groups we send two expert instructors. Each private class is preceded by a technical discussion so that we can understand your needs and customize the content to deliver maximum value.

Contact us about this class