Веб-приложения и технологии стремительно развиваются. Мы уже вступили в эру Single Page Application и идем к Progressive Web Application. В большинстве современных проектов идет разделение команд на front-end и back-end, и не только команд, но идет раздельная релизная политика. Это требует более детальных подходов к тестированию front-end. В этом докладе мы рассмотрим кейсы, который есть на практике при тестировании задач front-end и инструменты автоматизации, которые могут решать задачи описанные в этих кейсах: чтение request/response browser network и соответственно мокирование response.

1. Mocks and newtwork tricks
in UI automation

2. About myself

3. Agenda
• Front-end and web-application development
• Used tools and experimental web-app
• Test cases and thier implemetation with used tools

4. Client Server
Run server-side
application
request a web page
return an HTML doc
Server-side application

5. Server-side application with AJAX
Client ServerRun server-side
application
request a web page
return an HTML doc
AJAX engine
HTTP request
XML data

6. Client Server
initial request
HTML
Single page application
request
response(json, ..)

7. Progressive web application

8. Tools

10. 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)

11. 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'

12. Reading sent request data
(here are some restrcitions)
Support ParallelizationSupport Parallelization

13. Selenium
1. Configure driver capabilities and browser options
2. Use it

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

17. Browser-mob-proxy

19. Puppeteer

20. Puppeteer

21. Puppeteer

23. Cypress

24. Cypress

25. Cypress

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

28. Reading response data
ParallelizationSupport

29. Browser-mob-proxy

31. Puppeteer

32. Puppeteer

34. Cypress

35. Cypress

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

38. Combo - Reading request/response data
ParallelizationSupport

39. Browser-mob-proxy

40. Browser-mob-proxy

41. Browser-mob-proxy

42. Browser-mob-proxy

43. Browser-mob-proxy

44. Puppeteer

45. Puppeteer

46. Puppeteer

47. Cypress

48. Cypress

49. Cypress

50. Cypress

51. 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'

52. Simple mock
ParallelizationSupport

53. Browser-mob-proxy

54. Browser-mob-proxy

55. Browser-mob-proxy

56. Puppeteer

57. Puppeteer

58. Cypress

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

60. Mock returnung empty values in fields
ParallelizationSupport

62. Browser-mob-proxy

63. Browser-mob-proxy

64. Puppeteer

65. Puppeteer

66. Cypress

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

68. Mock returnung error in fields
ParallelizationSupport

69. Browser-mob-proxy

70. Browser-mob-proxy

71. Puppeteer

72. Puppeteer

73. Cypress

74. Cypress

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

76. Mock reposne error
ParallelizationSupport

77. Browser-mob-proxy

78. Browser-mob-proxy

79. Puppeteer

80. Puppeteer

81. Cypress

82. TC on block service (fake TC)
1. go to trello table
2. block /card service
3. add a card
ER: card should not added

83. Mock block service
ParallelizationSupport

84. Puppeteer

85. Puppeteer

86. Mock issues
• Support and update: mocked responses match with actual data from
API