Mocks and newtwork tricks
in UI automation
About myself
Agenda
• Front-end and web-application development
• Used tools and experimental web-app
• Test cases and thier implemetation with used tools
Client Server
Run server-side
application
request a web page
return an HTML doc
Server-side application
Server-side application with AJAX
Client ServerRun server-side
application
request a web page
return an HTML doc
AJAX engine
HTTP request
XML data
Client Server
initial request
HTML
Single page application
request
response(json, ..)
Progressive web application
Tools
Format
• Test case, that QA(tester) can write for automation
• Test case with exact steps
• Support from listed tools
• Implementation with listed tools(how to use)
TC on reading sent request data
1. go to
'https://trello.com/invite/b/ChLCiaJe/a981f2be7541bed7ec913a6394b
263fd/test'
2. login
3. Click on the 'Add one more card' button
4. Set a card name as 'test1'
5. Click on the 'Add card button'
ER: POST card/ was sent, in the request body name field equals 'test1'
Reading sent request data
(here are some restrcitions)
Support ParallelizationSupport Parallelization
Selenium
1. Configure driver capabilities and browser options
2. Use it
Browser-mob-proxy
1. Download and set up browser-mob-proxy
2. Configure proxy
3. Wrap browser-bom-proxy methods -
https://github.com/lightbody/browsermob-proxy
Browser-mob-proxy
Puppeteer
Puppeteer
Puppeteer
Cypress
Cypress
Cypress
TC on reading response data
1. go to
'https://trello.com/invite/b/ChLCiaJe/a981f2be7541bed7ec913a6394b
263fd/test'
2. login
3. Click on the 'Add one more card' button
4. Set a card name as 'test1'
5. Click on the 'Add card button'
ER: POST card/ was sent, from reposne body name field equals added
card title
Reading response data
ParallelizationSupport
Browser-mob-proxy
Puppeteer
Puppeteer
Cypress
Cypress
TC on combo - reading request/response
1. go to trello table
2. add a card
3. remember added card id from response
4. edit card
ER: PUT cards/{id} was sent, where id is remembered card id
Combo - Reading request/response data
ParallelizationSupport
Browser-mob-proxy
Browser-mob-proxy
Browser-mob-proxy
Browser-mob-proxy
Browser-mob-proxy
Puppeteer
Puppeteer
Puppeteer
Cypress
Cypress
Cypress
Cypress
TC on simple mock(fake TC)
1. go to trello table
2. add a card with mocked POST card/ response, in response body just
return {name: 'mocked card'}
ER: added card title should be 'mocked card'
Simple mock
ParallelizationSupport
Browser-mob-proxy
Browser-mob-proxy
Browser-mob-proxy
Puppeteer
Puppeteer
Cypress
TC on mock returnung empty values in fields(fake
TC)
1. go to trello table
2. add a card with mocked POST card/ response, in response body just
return {name: ''}
ER: added card should not present on the board
Mock returnung empty values in fields
ParallelizationSupport
Browser-mob-proxy
Browser-mob-proxy
Puppeteer
Puppeteer
Cypress
TC on mock returnung error in fields(fake TC)
1. go to trello table
2. add a card with mocked POST card/ response, in response body just
return {name: {error: 'some error in the field'}}
ER: card should not added
Mock returnung error in fields
ParallelizationSupport
Browser-mob-proxy
Browser-mob-proxy
Puppeteer
Puppeteer
Cypress
Cypress
TC on mock reposne error (fake TC)
1. go to trello table
2. add a card with mocked POST card/ response, response status is 500
ER: trere should be error handler on UI, card should not be added
Mock reposne error
ParallelizationSupport
Browser-mob-proxy
Browser-mob-proxy
Puppeteer
Puppeteer
Cypress
TC on block service (fake TC)
1. go to trello table
2. block /card service
3. add a card
ER: card should not added
Mock block service
ParallelizationSupport
Puppeteer
Puppeteer
Mock issues
• Support and update: mocked responses match with actual data from
API

QA Fest 2019. Дмитрий Прокопук. Mocks and network tricks in UI automation