UI Test Kitchen

Jay Landro

Front End Architect

Now more

than ever!

Applications have changed
Bad UX is expensive
CSS is hard
Accessibility affects everyone

Process greatly simplified by CLIs...

Hors D'oeuvres

As ironic as it seems, the challenge of a tester is to test as little as possible. Test Less but test smarter

-Federico Toledo

Testing leads to failure, and failure leads to understanding.

-Burt Rutan


import test from 'ava';

test('bar', async t => {
    const bar = Promise.resolve('food');

    t.is(await food, 'dinner');
});

Concurrency
Asyc of all kinds
Pushes Atomic (stateless)
Snapshots
Watch mode

Magic Assert === 🎉

Jest


test('Link changes the class when hovered', () => {
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  tree.props.onMouseEnter();
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  tree.props.onMouseLeave();
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

Snapshot Testing
Async, Promises, Callbacks
Mocking
Fast!

MAIN COURSE!

Terminology

Unit Testing

e2e - End to end testing

Integration Testing

Regression Testing

Acceptance Testing

System Testing

Usability Testing

Functional Testing

WebDriver

Bindings

Biggest Browser Automation Hurdle:

Animations!

Tool1 - browser.waitForVisible(selector[,ms][,reverse]);
Tool2 - browser.waitUntil(condition[,timeout][,timeoutMsg][,interval]);
Tool3 - browser.execute(script[,argument1,...,argumentN]);

Spectron & Headless Chrome

PhantomJS is Dead

...almost...

Isn't that for Electron?

Why yes, yes it is...

It is also a very recent build of Chrome

With an APIs.

mmmm, APIs

Headless Chrome

it's a big deal...

Dessert

Browser Plugin

Core API

Command Line