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.
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
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
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
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`