FiveUI

Open Source UI Tests for the Common Good

Rogan Creswick and Benjamin Jones Galois logo

Motivation

Consistency in user interfaces follows the second law of thermodynamics.

—Jakob Nielsen (1989)

Fighting entropy

Open Source User Interface Testing

Why we're here

We want to talk about a tool designed to make user interface testing ...

fiveui logo

FiveUI

"Extensible UI Analysis in your Browser"
galoisinc.github.io/FiveUI

Inconsistency

We can all think of inconsistent user interfaces!

grumpy cat

Inconsistency causes outrage

Quote

[In Windows 8] you have this shiny tablet interface, and you sit and you use then you press the wrong button then it slaps you in the face and Windows 7 is back. And then you think OK, this is familiar, so you’re kind of getting into it and whack [Windows 8 is back].

—Mark Shuttleworth, OSCON 2012

Consistency is important!

SCADA System:

scada animation
scada Martem

Image credit: Martem Telecontrol Systems

Aspects of consistency

UI Guidelines

There is a lot of repetition...

Every text input field should have a label.

There are many UI analysis tools

... but

There aren't easy ways to integrate the tools with the guidelines in an open and extensible way.

UI testing tools

Selenium:

UI testing tools

http://wave.webaim.org/

WAVE:

FiveUI is here to help!

We've built a tool called FiveUI

With FiveUI, you can:

fiveui logo

FiveUI is...

fiveui logo

Demo

Demo

Basic UI Rules

Example:

exports.name = "Don't use empty headings";
exports.description = "Empty headings confuse layout";

exports.rule = function(report) {
  $5(':header').each(function(i, elt) {
    if ($(elt).text() == '') report.error('Heading is empty', elt);
  });
}
    

Demo

Accessibility

Demo

Playing with Content

Up Goer Five comic

(Image credit of XKCD)

Demo

Specifying Dependencies

{ "name":         "Locate Uncommon Words.",
  "description":  "Searches for words that may be confusing to some readers.",
  "dependencies": ["upGoerFive-deps.js"],  // dependencies copiled with browserify
  "rules":        ["upGoerFive-rule.js"]
}

Getting Involved

Writing Rules

Pick your favorite UI guideline and encode it!

Example:

exports.name = "imagesAltText";

exports.description = "Each image should have an alternative text description";

exports.rule = function(report) {
  fiveui.query('img')
     .filter(function (i) {
               var altAttr = $(this).attr('alt');
               return altAttr == undefined || altAttr  == '';
             })
     .each(function (i, e) {
             report.error('Image has no alt text', e);
           });
};
    

Contribute

Let's write some rules...

Credits

Authors

Galois logo http://corp.galois.com Fork me on GitHub

/

#