Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

33 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Mocks and newtwork tricks in UI automation
  2. 2. About myself
  3. 3. Agenda • Front-end and web-application development • Used tools and experimental web-app • Test cases and thier implemetation with used tools
  4. 4. Client Server Run server-side application request a web page return an HTML doc Server-side application
  5. 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. 6. Client Server initial request HTML Single page application request response(json, ..)
  7. 7. Progressive web application
  8. 8. Tools
  9. 9. 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)
  10. 10. 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'
  11. 11. Reading sent request data (here are some restrcitions) Support ParallelizationSupport Parallelization
  12. 12. Selenium 1. Configure driver capabilities and browser options 2. Use it
  13. 13. 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
  14. 14. Browser-mob-proxy
  15. 15. Puppeteer
  16. 16. Puppeteer
  17. 17. Puppeteer
  18. 18. Cypress
  19. 19. Cypress
  20. 20. Cypress
  21. 21. 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
  22. 22. Reading response data ParallelizationSupport
  23. 23. Browser-mob-proxy
  24. 24. Puppeteer
  25. 25. Puppeteer
  26. 26. Cypress
  27. 27. Cypress
  28. 28. 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
  29. 29. Combo - Reading request/response data ParallelizationSupport
  30. 30. Browser-mob-proxy
  31. 31. Browser-mob-proxy
  32. 32. Browser-mob-proxy
  33. 33. Browser-mob-proxy
  34. 34. Browser-mob-proxy
  35. 35. Puppeteer
  36. 36. Puppeteer
  37. 37. Puppeteer
  38. 38. Cypress
  39. 39. Cypress
  40. 40. Cypress
  41. 41. Cypress
  42. 42. 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'
  43. 43. Simple mock ParallelizationSupport
  44. 44. Browser-mob-proxy
  45. 45. Browser-mob-proxy
  46. 46. Browser-mob-proxy
  47. 47. Puppeteer
  48. 48. Puppeteer
  49. 49. Cypress
  50. 50. 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
  51. 51. Mock returnung empty values in fields ParallelizationSupport
  52. 52. Browser-mob-proxy
  53. 53. Browser-mob-proxy
  54. 54. Puppeteer
  55. 55. Puppeteer
  56. 56. Cypress
  57. 57. 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
  58. 58. Mock returnung error in fields ParallelizationSupport
  59. 59. Browser-mob-proxy
  60. 60. Browser-mob-proxy
  61. 61. Puppeteer
  62. 62. Puppeteer
  63. 63. Cypress
  64. 64. Cypress
  65. 65. 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
  66. 66. Mock reposne error ParallelizationSupport
  67. 67. Browser-mob-proxy
  68. 68. Browser-mob-proxy
  69. 69. Puppeteer
  70. 70. Puppeteer
  71. 71. Cypress
  72. 72. TC on block service (fake TC) 1. go to trello table 2. block /card service 3. add a card ER: card should not added
  73. 73. Mock block service ParallelizationSupport
  74. 74. Puppeteer
  75. 75. Puppeteer
  76. 76. Mock issues • Support and update: mocked responses match with actual data from API

×