Testing beyond the default click-paths

Wim Selles & Mischa Dasberg

Content About us

Test beyond the default click-paths

tools

Installation + coffee break

Get your hands dirty

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

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

The app

The app

what do we see

what do we see

how it’s really

how it’s really

what do we trust?

what do we trust?

Test beyond the default click-paths

Test beyond the default click-paths

What’s the biggest risk and in which phase should it be tested

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

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

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

Tools | ng-apimockSupports

Concurrency

Dynamic data

Delays

Recording

Mimetypes

Middleware integration

Tools | ng-apimockInterfaces

Automated testing

Protractor

Webdriver

Local development

Web interface

Manual demo

the proof of the pudding is in the eating

the proof of the pudding is in the eating

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

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

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

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

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

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

Installation Disclaimer

Go to: https://github.com/wswebcreation/rtc-demo-app

follow the instructions in the readme

Coffee-Break

Get your hands dirty | 1First 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

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`

Recap

Some things we saw during the session

Things to remind when you go home

Answers

git checkout answers

tnx!Wim selles | detesters |tele2

! @wswebcreation | wswebcreation.nl GitHub.com/wswebcreation

Mischa Dasberg | jpoint | volksbank

! GitHub.com/mdasberg