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.

Frontend as a service automated testing layers and ci pipelines, based on tinkoff experience

41 views

Published on

Modern software is different from what we’ve been used to seeing for years. Software as a service is a trend to provide API in modern development, but frontend is not far behind and can be provided as a SaaS. Also era of microservices is raging in backend development and services/microservices are coming in frontend development too. All this exists within the framework of a rigidly described API, and contract tests, and your fate is to thoroughly test the frontend at various levels, and various combinations. The talk will bring the light about the typical frontend project structure, testing levels like unit, functional, integration, principles of building CI / CD, the selected tools, their pros and cons, and how it goes from commit to release based on Tinkoff bank experience

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Frontend as a service automated testing layers and ci pipelines, based on tinkoff experience

  1. 1. Frontend as a Service automated testing: layers and CI pipelines, based on Tinkoff experience
  2. 2. Lead Software Test Automation Engineer EPAM Frontend Automation Team Lead Tinkoff
  3. 3. Agenda • Frontend architecture • Testing layer for frontend • Unit/integration tests • Automation tool • CI/CD
  4. 4. Frontend as a Service Monolith Service Service Microservice Microservice Microservice Microservice ? Backend Frontend Contract data SDK Library/module
  5. 5. Typical frontend architecture button input … … Dump components grid toolbar … … Data rendering Smart components Includes dump components, Communicate with services login main … … Pages Routes Services auth grid … …
  6. 6. Frontend architectures Monolith Services Microservices Services Smart components Pages Services Dump components Pages Pages/Components service microservice service service service service service microservice microservice microservice microservice microservice microservice microservice microservice microservice microservice microservice
  7. 7. Real life architecture Monolith Smart components Pages ServicesDump components External dump components Dump component 1 Dump component 2 Dump component 3 Dump component 4 Internal Service component 1 Internal Service component 2 Smart components Dump components Smart components Dump components
  8. 8. Tasks/issues Tasks: • Regression testing • Service testing • Automation tool • CI • Automation in sprint Issues: • Lack of resources • Test data • Depend on backend stability • Frontend tech dept(refactoring) • External service updates
  9. 9. Testing layers What should we test from architecture prospective? • Dump components • Smart components • Pages • Services Is it enough, we develop features, not only components? • Integration • Rendering tests • E2E/System tests • Markup tests
  10. 10. Dump components
  11. 11. Dump components
  12. 12. Smart components
  13. 13. Smart components
  14. 14. Dump/smart components How to test dump/smart components? Manual testing Automation testing Unit testing
  15. 15. Dump/smart components – manual testing • Testing environment Usual test stand No option to test components in isolation Time to verify where, how to test component Time on testing Do testing
  16. 16. Damp/smart components – manual testing • Storybook Option to test components in isolation Documentation for components Time on testing/regression Option to compare with markup Option to use mocks
  17. 17. Dump/smart components – automation testing • Testing environment Usual test stand No option to test components in isolation Time to verify where, how to test component Time(opening browser, find need component) Option to use mocks Reduce time on regression
  18. 18. Dump/smart components – automation testing • Storybook Option to test components in isolation Documentation for components Time(open browser, stability) Option to compare with markup Reduce time on regression
  19. 19. Dump/smart components – unit testing Option to test components in isolation Unit/integration tests as a documentation Time on testing Part of CI Prevent bugs Time to write tests because of data preparationTestbed +
  20. 20. Dump components – unit testing
  21. 21. Dump components – unit testing
  22. 22. Dump components – unit testing
  23. 23. Automated testing • Verify events – how frontend sends requests and create payloads/logic on frontend depends on action
  24. 24. Automated testing • Verify rendering based on different test data
  25. 25. Automated testing • Usual e2e tests, because we are delivering features
  26. 26. Automated testing • Markup testing using screenshots
  27. 27. Initial approach No option to work with request/response data No option to make mocks Great tool for E2E/System tests Option to run tests in parallel Easy to integrate with Selenoid/Selenium Grid Option to run auto tests on Chrome/FF/IE
  28. 28. Tool for automated testing that fits points above + Browser - last commit in September 2017 Hard to run test in several flows Need to write wrappers and parsers Slow autotests Option to work with request/response data Option to make mocks Protractor pluses
  29. 29. Tool for automated testing that fits points above Option to work with request/response data Option to make mocks Great debug Not good for E2E/System tests for big system Need to pay for services A lot of bugs Unstable tests Only for Chrome
  30. 30. Tool for automated testing that fits points above Only for Chrome and Firefox + Option to work with request/response data Option to make mocks Easy to write automation tests Option to run tests in parallel Option to tests electron applications
  31. 31. Tool for automated testing that fits points above VS
  32. 32. Tool for automated testing that fits points above +
  33. 33. Protractor+Puppeteer integration
  34. 34. Protractor+Puppeteer integration
  35. 35. Protractor+Puppeteer integration
  36. 36. Protractor+Puppeteer integration
  37. 37. Protractor+Puppeteer integration
  38. 38. Protractor+Puppeteer integration
  39. 39. Protractor+Puppeteer integration
  40. 40. CI without autotests Feature branch on push TeamCity build Unit tests based on changes Webpack build project Pull request build status in PR Jira task Feature env
  41. 41. CI with autotests Autotests TC build Test branch Jira task flag on moving task Changed objects CI without autotests trigger build and send url and changed objects Test Rail select cases by changed objects Autotests run tests with selected cases and sent env build on test env Test env merge to test branch
  42. 42. Q&A

×