This document discusses testing web applications beyond default interactions and provides tools to help with this. It introduces ng-apimock for mocking APIs during testing and p.I.C for image comparison testing. The document outlines exercises for attendees to try out these tools on a sample application.

1. Testing beyond the
default click-paths
Wim Selles & Mischa Dasberg

2. Content
About us
Test beyond the default click-paths
tools
Installation + coffee break
Get your hands dirty

3. About us | wim Selles
testing since 2007 | automation since 2012
(qtp/uft | protractor | APPIUM | webdriver.io)
Speaker on 3, maybe 4, events this year
Automation geek
Open source contributor to multiple projects
Owner of some widely used (testing)modules
Working for detesters and hired by different end customers

4. About us | Mischa Dasberg
Software developer since 2002 (Java, Scala, Go, Javascript, Typescript)
Open source contributor to multiple projects
Speaker on devoxx, goto-amsterdam, javascript days, meetups
Automated testing since 2005
(junit, mockito, fitnesse, selenium, protractor, jasmine, karma)
Loves to surf and snowboard
Works for JPoint

5. The app

6. The app

7. what do we see

8. what do we see

9. how it’s really

10. how it’s really

11. what do we trust?

12. what do we trust?

13. Test beyond the default click-paths

14. Test beyond the default click-paths
What’s the biggest risk and in which phase should it be tested

15. Test beyond the default click-paths
What’s the biggest risk and in which phase should it be tested
Also Mimic and automate your end users user flow based on service behavior

16. Test beyond the default click-paths
What’s the biggest risk and in which phase should it be tested
Also Mimic and automate your end users user flow based on service behavior
Automate what automation initially doesn’t see but you can see
with manual testing

17. Tools | ng-apimock
Node plugin that provides the ability to use scenario based api mocking for
both local development and automated testing
Why mock your api’s?
Availability
Edge cases
Reproducibility
Speed

18. Tools | ng-apimock
Supports
Concurrency
Dynamic data
Delays
Recording
Mimetypes
Middleware integration

19. Tools | ng-apimock
Interfaces
Automated testing
Protractor
Webdriver
Local development
Web interface
Manual demo

20. the proof of the pudding is in the eating

21. the proof of the pudding is in the eating

22. Tools | p.I.C
p.i.c is an open source module for browsers | mobile browsers | hybrid apps
to do image comparison on (full)screens or elements.
Supports

23. Tools | p.I.C
p.i.c is an open source module for browsers | mobile browsers | hybrid apps
to do image comparison on (full)screens or elements.
Supports
Viewport screenshots

24. Tools | p.I.C
p.i.c is an open source module for browsers | mobile browsers | hybrid apps
to do image comparison on (full)screens or elements.
Supports
Viewport screenshots
Element screenshots

25. Tools | p.I.C
p.i.c is an open source module for browsers | mobile browsers | hybrid apps
to do image comparison on (full)screens or elements.
Supports
Viewport screenshots
Element screenshots

26. Tools | p.I.C
p.i.c is an open source module for browsers | mobile browsers | hybrid apps
to do image comparison on (full)screens or elements.
Supports
Viewport screenshots
Element screenshots
Fullpage screenshots

27. Tools | p.I.C
p.i.c is an open source module for browsers | mobile browsers | hybrid apps
to do image comparison on (full)screens or elements.
Supports
Viewport screenshots
Element screenshots
Fullpage screenshots
And much more

28. Installation
Disclaimer
Go to:
https://github.com/wswebcreation/rtc-demo-app
follow the instructions in the readme
Coffee-Break

29. Get your hands dirty | 1
First of all:
git checkout get-your-hands-dirty
npm run webdriver.start // start selenium
npm run e2e // runs all features
npm run e2e -- --feature=ngapimock
// runs only ngapimock feature
npm run e2e -- --feature=image.compare
// runs only image compare feature

30. Get your hands dirty | 2
exercise 1:
Go to `e2e/features/ng-apimock.feature`
Go to `e2e/step_definitions/ng-apimock.steps.ts`
Exercise 2:
Go to `e2e/features/image.compare.feature`
Go to `e2e/step_definitions/image.compare.steps.ts`

31. Recap
Some things we saw during the session
Things to remind when you go home

32. Answers
git checkout answers

33. tnx!
Wim selles | detesters |tele2
! @wswebcreation | wswebcreation.nl
GitHub.com/wswebcreation
Mischa Dasberg | jpoint | volksbank
! GitHub.com/mdasberg