Talking testing, agility and automation... and anything else.



18
Dec 16

Re-Run Flakey Tests with Protractor-Flake

If you’ve worked with E2E tests for any amount of time, you will have experienced tests that, for whatever reason, randomly fail; aka flakey tests. Such failures can be caused by any number of things: a network glitch, browser barf, app hiccup, act of God, etc….

Test flake can seriously undermine the trust in automation, and drive your automation engineer to drink (or perhaps just drink more). A wise test engineer will embrace that flake happens, and account for it in their automation strategy.

One popular strategy is to re-run failed tests. This way, if a test fails, it gets re-run ‘n‘ number of times, and if it passes, life is good. Enter Protractor-Flake.

Protractor-Flake parses your Protractor test output, looking for failures, and re-runs any failing tests (note: at the spec file level) at the end of your test run. It works really well and is simple to setup. Here’s how…

First install it as a dependency:

Then you can run it directly by using it in place of Protractor (note: the ‘–‘ denotes the end of args passed to protractor-flake, and the beginning of args passed to Protractor):

Or you can use it programmatically. I like to create a simple node script, which allows me to add logging and reporting (future blog post). Here’s an example:

Saving the above script as a file, 'flake', you could then run your tests thusly:

Now obviously, you should be killing off flakey tests to the best of your ability, but Protractor-Flake can save you from non-test-related flakiness, and keep your tests green! You can see a working example in my protractor-example repo on GitHub.


14
Feb 16

Protractor: How To Page Object

bookPage objects, for lack of a better word, are good. Page objects are right. Page objects work.

And if you’re writing e2e tests, you should know what they are, and how to use them. Let’s page object!

What is it?

You’ll find a veritable plethora of definitions and examples on the webs… or TLDR: page objects create a user-centric model of your application.

Why should I care?

This page object model is then used to manipulate your application, abstracting away the html/css from your tests. The benefits are many:

  1. saves maintenance time: updating the page object updates all tests that use it
  2. organizes your code and keeps it DRY
  3. declutters your spec files by moving logic to the page object
  4. use a cool buzzword that is actually useful!

How to page object?

A simple page object:

Let’s go line by line…

We use a constructor to create our page object. We could (and I sometimes do) use an object literal, but not when I’m extending a basePage (a topic for another post).

Here we start creating our model by setting this.username to our app’s css (using Protractor’s JQuery-like $ locator).

The idea here is that in our tests, we’ll call this property, githubPage.username, to refer to the app’s css code. This save us from having raw selectors (eg. $('div.vcard-username') ) strewn about in our tests. Thus, if (when) the css changes in your application, you simply update the page object, and you’re green again. No hunting for uses through tests. It also makes your tests read better, and just look cleaner. You should never have raw selectors in you tests… keep ’em in the page object.

We’ll also put methods in our page object:

We’ll also add methods to our page objects. Here we create a method for hitting the enter key; something we’ll use throughout our tests. This not only keeps wonky looking webdriver code out of our tests, it also keeps our code DRY.

Examples of when you might want to add a method to your page object:

  • actions you’ll using in multiple tests
  • actions that take multiple steps: eg. enter search text and hit return
  • wrap selectors or wonky looking webdriver code
  • wrap another method and add logging or whatnot to it

And finally, we use Node’s module.exports to create a reference to our page, that will allow us to require it in our tests. Note, we also instantiate it here, by using the new keyword and parenthesis. I’m not a fan of instantiating a page object within a test… it’s cruft that should be done elsewhere whenever possible.

That’s the basic gist. For more examples, take a peek at my working Protractor example project up on GitHub


08
Aug 15

Protractor: Navigating Pages Without Angular

compassI’m currently using Protractor to build e2e test automation for my team. And while Protractor is especially helpful for Angular applications, my app is non-angular. This has presented some challenges… and because of it’s asynchronous nature, some truly maddening challenges at that :)

Case in point: page loads.

Because I don’t have Angular telling Protractor when a page has finished loading, I need to handle it myself. Thus I stole some ideas from my work with Geb, namely, the to() and at() methods. These two methods navigate to, wait for, and verify all page changes. Here’s how it works…

First, in my basePage (that is extended from all other pages), we have two friendly methods:

These methods rely on each page having the properties url and pageLoaded. For example, the page object could include:

The url property is just a string. It can be fully qualified, or relative (which then gets appended to the baseUrl). The pageLoaded property uses Protractor’s Expected Conditions and() method, that allows you to use any number of functions to both wait for the page, and test that we’re on the correct page.

In this example, I only need one EC function, hasText, but you can add as many as necessary, separated by commas (eg. you could wait for a spinner to NOT be displayed, for a header to be displayed, AND check the page title). Each function need only return true.

Finally, we can call these in our specs thusly:

In the beforeEach block, we call qsHomePage.to(), which calls both the to() method to navigate to the page, and the at() method to wait/verify the page.

Then in the spec, we click on the home page link, and use at() inside an expect() to verify we’re on the right page. We can do this because we return the result of the Expected Conditions. If all are true, the test passes; if even one returns false, the test fails.

The result is a clean way to navigate pages without Angular.

I use this in my protractor_example code up on the GitHub


25
May 15

Google Calendar Event List Javascript Script

13A reasonable amount of moons ago, Google shut down support for their Google Calendar API V2. Understandable, except I was using a script on a few sites to pull down calendar events! Fine… so I suffered like the rest of the huddled masses, and was forced to embed the fuggly Google Calendar on my sites, while waiting for someone to spend the time to update the script to use the new version of the API.

It didn’t happen.

Months went by… and no updated script. I finally got tired of looking at it, so today I spent a couple hours learning how the API worked, and cobbled together a little javascript script that pulls down my duet’s gcal events, and displays them on our website.

I’ve shared the code up on GitHub. It simply grabs future events (via an async call), from a public Google Calendar, and inserts them into a div on a webpage. No authentication needed, and it should be easy to refactor to include any data you want.

Hope it helps someone…


16
Nov 14

Screencast: Protractor Test Automation Framework Example Code

I’ve been playing around with Protractor, a great, new(ish) testing framework from our friends at Google. I’ve shared my example code on GitHub for those that might be interested in such things.

Examples in the code include:

  • Using page objects
  • Running on TravisCI
  • Running tests on Sauce Labs and Browserstack
  • Running multiple browsers at once

I’ve also made a quick screencast that walks you through downloading and running the example code.

Cut to the chase, in the video we:

  • Install Node (okay, I don’t show this but you need do to it!)
  • Download the example code from GitHub
  • run npm install to install the project dependancies
  • Briefly discuss a config file
  • run protractor conf.js to run the tests