The document discusses end-to-end testing frameworks and strategies. It recommends Hermione as an end-to-end testing framework that allows running tests in parallel across browsers, is easy to set up and use, and includes features like test retries and flexible skipping. It provides examples of writing tests using Hermione, including setting up page objects and fixtures, debugging tools, and best practices for continuous integration.

1. END-TO-END
TESTING

2. ▸Yandex
▸Luxoft, GettyImages
▸MyHeritage
▸Front-end Science
SERGEY PUZANKOV
puzankov@frontend-science.com
@puzankovcom

3. TESTING FRONT-END

4. MANUAL
TESTING

5. MERGE TO MASTER

6. DEMO

7. FIX PROCESS

8. PROJECT STATUS

9. TESTING
AUTOMATION

11. QA
▸Code style
▸CSS regression

12. QA
▸Unit tests
▸Functional tests
▸Integration tests
▸End-to-End tests

13. TESTING
DB
UI BACK-END

14. UNIT TESTING
DB
UI BACK-END

15. FUNCTIONAL TESTING
DB
UI BACK-END
UI MOCKUP SERVER

16. INTEGRATION TESTING
DB
UI BACK-END
DB
UI BACK-END

17. END TO END TESTING
DB
UI BACK-END

18. END-TO-END TEST
FRAMEWORKS

19. JS FRAMEWORKS
▸Protractor
▸Nightwatch.js
▸TestCafe
▸Codecept.js
▸WebdriverIO + Mocha
▸Hermione

20. HERMIONE

21. HERMIONE
https://github.com/gemini-testing/hermione

22. RUNS TESTS IN PARALLEL
▸If you have grid with 10 browsers You could
run in 10 bowsers 10 sessions in each. So
you could run 100 tests in parallel.

23. EASY TO START AND USE
▸Just 1 small config and 1 test file to start.
▸All WebriverIO methods available for use.

24. EXTENSIBLE
▸Write You own plugins.
▸Use existing.

25. RETRIES FAILED TESTS
▸Sometimes browser fails.

26. RETRIES FAILED TESTS
▸Sometimes browser fails.
▸Just because it IE.

27. RETRIES FAILED TESTS
▸Sometimes browser fails.
▸Catch browser failure and restart test.

28. EXECUTES SEPARATE TESTS
▸Easy to debug - run just failed files or tests.

29. FLEXIBLE SKIP
▸Skips tests in specific browsers.

30. FLEXIBLE TEST CONFIGURATION
▸Specify predefined devices: platform,
browser, resolution.
▸Specify sets: browsers, resolution, tests
files.

31. LET’S CODE!

32. INSTALL
npm install -g hermione

33. INSTALL
module.exports = {
sets: {
desktop: {
files: 'tests/desktop'
}
},
browsers: {
chromeLast: {
desiredCapabilities: {
browserName: 'chrome'
}
}
}
};

34. TEST
const assert = require(‘chai’).assert;
const pageUrl = 'https://github.com/gemini-testing/hermione';
describe('github', function() {
it('should find hermione', function() {
return this.browser
.url(pageUrl)
.getText('#readme h1')
.then(function(title) {
assert.equal(title, 'Hermione')
});
});
});

35. FILES

36. LET’S TEST

37. RUN TESTS
hermione

38. RUN TESTS

39. MOST QUICK START GUIDES

40. describe('Page loaded', function() {
it('should have title', function() {
return this.browser
.url(url.root)
.getText('.header h1')
.then(function(text) {
assert.equal(text, 'todos')
});
});
it('should have example type title', function() {
return this.browser
.url(url.root)
.getText('.source-links h5')
.then(function(text) {
assert.equal(text, ‘Vanilla JavaScript Example')
});
});
});
PAGE LOADED

41. describe('New todo input', function() {
it('should have input with placeholder', function() {
return this.browser
.url(url.root)
.getAttribute('.new-todo', 'placeholder')
.then(function(text) {
assert.equal(text, 'What needs to be done?')
});
});
});
GET ATTRIBUTE

42. describe('Add new todo', function() {
beforeEach(function (done) {
return this.browser
.url(url.root)
.localStorage('DELETE', { key: 'todos-vanillajs' })
.then(function() {
done();
})
});
it('should add new todo', function() {
return this.browser
.url(url.root)
.setValue('.new-todo', 'Clean up the room')
.keys('Enter')
.getText('.todo-list li:nth-child(1) .view label')
.then(function(text) {
assert.equal(text, 'Clean up the room')
});
});
});
BEFORE EACH

43. describe('Login', function() {
beforeEach(function (done) {
return this.browser
.url(url.root)
.deleteCookie('token'})
.then(function() {
done();
})
});
// …
});
COOKIES

44. describe('Add new todo', function() {
it('should add new todo', function() {
return this.browser
.url(url.root)
.setValue('.new-todo', 'Clean up the room')
.keys(‘Enter’)
.saveScreenshot(‘./debug/client/debug.png’)
.getText('.todo-list li:nth-child(1) .view label')
.then(function(text) {
assert.equal(text, 'Clean up the room')
});
});
});
DEBUG

45. describe('Add new todo', function() {
it('should add new todo', function() {
return this.browser
.url(url.root)
.setValue(‘.new-todo', 'Clean up the room')
.keys(‘Enter’)
.debug()
.getText('.todo-list li:nth-child(1) .view label')
.then(function(text) {
assert.equal(text, 'Clean up the room')
});
});
});
DEBUG

46. DEBUG

47. describe('Remove items', function() {
beforeEach(function (done) {
return this.browser
.url(url.root)
.localStorage('POST', { key: 'todos-vanillajs', value: '{"todos":[]}' })
.setValue(pageObject.mainInput, 'Clean up the room')
.click(pageObject.mainHeader)
.setValue(pageObject.mainInput, 'Check email')
.click(pageObject.mainHeader)
.then(function() {
done();
})
});
it('should remove item', function() {
return this.browser
.click(pageObject.labelOfFirstItem)
.click(pageObject.destroyFirstItem)
.getText(pageObject.labelOfFirstItem)
.then(function(text) {
assert.equal(text, 'Check email')
});
});
});
PREPARE DATA

48. OTHER ACTIONS

49. ACTIONS http://webdriver.io/api.html

50. PAGE OBJECT

51. module.exports = {
mainHeader: '.header h1',
exampleType: '.source-links h5',
mainInput: '.new-todo',
labelOfFirstItem: '.todo-list li:nth-child(1) .view label',
counterNumber: '.todo-count strong',
destroyFirstItem: '.todo-list li:nth-child(1) .destroy'
};
PAGE OBJECT
describe('New todo input', function() {
it('should have input with placeholder', function() {
return this.browser
.url(url.root)
.getAttribute(pageObject.mainInput, 'placeholder')
.then(function(text) {
assert.equal(text, 'Pls enter task')
});
});
});

52. LOCALIZATION

53. it('should add new todo', function() {
return this.browser
.url(url.root)
.setValue(pageObject.mainInput, texts.todoLine1)
.keys('Enter')
.getText(pageObject.labelOfFirstItem)
.then(function(text) {
assert.equal(text, texts.todoLine1)
});
});
L10N
{
"inputPlaceHolder": "What needs to be done?",
"todoLine1": "Clean up the room",
"todoLine2": "Check email"
}

54. BROWSERS

55. BROWSERS
▸PhantomJS - RIP.

56. BROWSERS
▸Use ChromeWebDriver.
https://sites.google.com/a/chromium.org/chromedriver/downloads

57. BROWSERS
▸Docker with browser.

58. BROWSERS ZOO
▸Grid.

59. CI

60. CONTINUOUS INTEGRATION
DEV E2ESTA
GE
PRO
D
DEV E2E STA
GE
PRO
D E2E
DEV E2E STA
GE
PRO
D E2EE2E

61. CI PREPARATION
▸Env setup.
▸Clear after tests.
▸Endpoints for reset data.
▸Specify suits for different envs and
domains.

62. BIT.LY/E2E-LAB

63. THANK YOU
FOR

64. QUESTIONS
puzankov@frontend-science.com
@puzankovcom