The document discusses painless visual testing of user interfaces using examples rather than traditional UI testing methods. It presents several advantages of using examples over UI tests, including that examples are faster to write and maintain, more resilient to changes, and better suited to automation. Specific tools mentioned that can help with example-based testing include Sikuli for image-based testing and Galen for layout validation.

1. Painless visual testing
Gojko Adzic | @gojkoadzic | gojko.net | Agile Tour Vienna 2017

3. Wireframes are
examples

11. Why can't we do this
for UI examples?

12. Rules of UI Testing
1. It's slow
2. It's brittle
3. Automation isn't too helpful

14. Euclidean axioms of
UI Testing
1. It's slow
2. It's brittle
3. Automation isn't too helpful

15. Why is it brittle?

17. www.sikuli.org

20. const underTest = require('../src/write-connector');
describe('write-connector', function () {
beforeEach(function () {
pathInfo = {
position: { left: 10, top: 20 }, d: 'svgpathstring',
color: '#FFFFFF', width: 4
};
});
it('should set dashes if the line style is dashed', function () {
pathInfo.lineStyle = 'dashed';
expect(underTest(pathInfo).children()[0].serialize()).toEqual(`
<path xmlns="http://www.w3.org/2000/svg" d="svgpathstring"
stroke-dasharray="8, 8" stroke="#FFFFFF" stroke-width="4"/>`);
});
it('should not set dashes if the line style is solid', function () {
pathInfo.lineStyle = 'solid';
expect(underTest(pathInfo).children()[0].serialize()).toEqual(`
<path xmlns="http://www.w3.org/2000/svg" d="svgpathstring"
stroke="#FFFFFF" stroke-width="4"/>`);
});
});

21. it('should include connector labels', function () {
expect(underTest(theme, {
id: 1, title: 'center node',
ideas: {
1: {
id: 2,
title: 'child node 1',
attr: { parentConnector: { color: '#888888', label: 'child connector label' } }
}
}
}, textEngine, options)).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
'width="270" height="40">' +
'<g transform="translate(60,20)" style="fill:none;">' +
'<g transform="translate(-60,-20)"><path d="M60,20L150,20" stroke="#888888" stroke-width="1"/></g>' +
'<g transform="translate(-81,-18)"><LABEL title="child connector label" color="#4F4F4F"/></g>' +
'<g transform="translate(-60 -20)">' +
'<rect x="0" y="0" width="120" height="40" rx="10" ry="10" style="fill:#E0E0E0;stroke:#707070;"/>' +
'<NODE title="center node"/>' +
'</g>' +
'<g transform="translate(80 -20)">' +
'<rect x="0" y="0" width="130" height="40" rx="10" ry="10" style="fill:#E0E0E0;stroke:#707070;"/>' +
'<NODE title="child node 1"/>' +
'</g>' +
'</g>' +
'</svg>');
});

23. Syntax Error!

24. https://github.com/jamesshore/quixote
var header = frame.get("#header");
var navbar = frame.get(".navbar");
navbar.assert({
top: header.bottom.plus(10),
left: frame.page().left,
width: frame.viewport().width
});

25. galenframework.com
@objects
comments #comments
article-content div.article
= Main section =
@on mobile, tablet
comments:
width 300px
inside screen 10 to 30px top right
near article-content > 10px right
@on desktop
comments:
width ~ 100% of screen/width
below article-content > 20px

26. WHAT!

27. Automation
isn't too helpful

29. Automate to assist humans
not to replace them

31. appraise.qa

32. 1. It's slow

33. Unit tests

34. UI tests

36. UI Unit Tests

37. Why this is different?
• easy to change examples
• easy to add more
• easy to change flow
• look & feel, not interactions
• documentation, not just test
• designed for massive parallelisation (coming soon)

38. HumansVsComputers.com