The document outlines various tools and frameworks for end-to-end (e2e) testing, including Puppeteer, Jest, Kakunin, and Galen Framework. It provides installation instructions, example test setups, and discusses features such as image comparison and dynamic layout testing. Additionally, it emphasizes the ease of writing tests and the ability to enhance testing quality during the prototyping phase.

1. RAPID TESTS
DEVELOPMENT

2. TOMASZ GÓRSKI
E2E DEVELOPER
KAKUNIN CONTRIBUTOR

3. TESTS IN “RAD”?

4. PAGE USED FOR TESTS

5. WHICH TOOL?

7. • Node library
• Provided by Google
• Allows to write E2E tests for Chromium
GET STARTED WITH…
• npm install puppeteer --save

8. PUPPETEER TEST EXAMPLE

9. PUPPETEER RECORDER
• Google Chrome extension
• Generates Puppeteer scripts
• Records clicks and type events (limited)

10. PUPPETEER RECORDER

11. PUPPETEER RECORDER

12. PUPPETEER RECORDER

13. PUPPETEER RECORDER

14. PASTE THE GENERATED
CODE…

15. PUPPETEER TEST EXAMPLE

16. IMPROVE TESTS
RESULTS

17. PUPPETEER WITH JEST
npm install puppeteer jest jest-puppeteer --save

18. PUPPETEER JEST RESULTS

20. • Node library
• Interactive recorder
• Allows to write E2E tests for Chromium
GET STARTED WITH…
• npm install -g taiko

21. HOW DOES IT WORK?

22. LAUNCH THE BROWSER!

23. WRITE THE TEST!

24. GENERATE THE CODE!

25. TAIKO TEST EXAMPLE

26. WHAT IF YOU DON’T HAVE
MUCH CODING EXPERIENCE?

28. • Node library
• E2E framework
• Over 50 generic steps which help writing tests
• Check it out on kakunin.io
GET STARTED WITH…

29. EXAMPLE KAKUNIN TEST
Feature: Primality test
Scenario: The number is prime
Given I visit the "prime" page
When I fill the "primeForm" form with:
| testInput | 5 |
And I click the "validateButton" element
Then there is element "theNumberIsPrime" with value "f:isVisible"

30. EXAMPLE PAGE OBJECT

31. RUN THE KAKUNIN TESTS
npm run kakunin

32. COMPARING IMAGES

34. PROTRACTOR-IMAGE-COMPARISON
• Lightweight Protractor plugin
• Allows to save screens
• Allows to compare screens with baseline
• npm install protractor-image-comparison --save

35. CONFIGURE THE PLUGIN

36. ADD A NEW STEP

37. GENERATE IMAGE
npm run kakunin

38. GENERATED IMAGE

39. MOVE THE IMAGE TO BASELINE

40. MAKE SOME CHANGES

41. THE ACTUAL PAGE

42. COMPARE SCREENS
npm run kakunin

43. CHECK THE GENERATED DIFF

44. CHECK THE GENERATED DIFF

45. AVAILABLE METHODS
• saveElement() - saves an image of the screen element
• saveScreen() - saves an image of the screen
• saveFullPageScreens() - saves a full page image of the screen
Saving methods:
Compare methods:
• checkElement() - runs the comparison against an element
• checkScreen() - runs the comparison against the screen
• checkFullPageScreen() - runs the comparison against the full page image

46. WHAT ABOUT LAYOUT
TESTING?

48. GET STARTED WITH…
• Allows to test dynamic layouts
• Adds a special syntax to describe layout
• npm install -g galenframework-cli

49. CREATE A GALEN CONFIG FILE
galen config
You can set default browser in the config file!

50. LET’S REMIND WHAT
WE’RE TESTING!

51. JUST THE SIMPLE PAGE…

52. HOW DOES IT WORK?

53. GALEN FRAMEWORK

54. EXAMPLE .GSPEC
@objects
#HEADER
greyHeader css .jumbotron
greyHeaderContainer css .primality-header
#MAIN
mainSection css .text-center
= Test section =
greyHeader:
contains greyHeaderContainer
height 257px
above mainSection 32px
css background-color is "rgba(233, 236, 239, 1)"

55. RUN THE GALEN TEST
galen check <catalogWithGspecs> --url <url> --size <size> --htmlreport <catalog>
• <catalogWithGspecs> could be a single file or a catalog e.g. ‘isPrimeNumber.gspec’
• <url> - e.g. 'http://localhost:8081'
• <size> - e.g. ‘1280x800’
• <catalog> - e.g. ‘reports’
And the results…

56. EXAMPLE GALEN REPORT
Main report page
Report details

57. EXAMPLE GALEN REPORT

58. EXAMPLE GALEN REPORT

59. SUMMARY
• Testing does not have to be time-consuming
• Testing can be RAD friendly
• We can lower tests quality during prototyping phase

60. QUESTIONS?

61. THANK YOU