UI Integrations Test

When system gradually become bigger or expands to match with business needs or policy, a good developer can’t rely only on manual testing because it will consume more of our resources. Therefor developer need to ensure that our code is good in terms of quality. So, it expected use different kinds of automated tests such as unit test and integration test.

Here we want to share how Blibli implement integration test in UI side, deep down on visual regression, and any usecase that we encounter thus far.

What will you learn?
- How Integration Test in UI Works
- The Technologies Behind Integration UI
- Best practice and strategies!

Transcript

1. UI Integration Test Herwidodo - Deviani November 2021
2. Disclaimer Presentations are intended for educational purposes only and not to replace independent professional judgement. Statements of facts and opinions expressed here are those of the participant’s personally and do not necessarily reflect those of Blibli.com. Blibli.com does not endorse nor approve, and assumes no responsibility for the content, accuracy or completeness of the information presented.
3. Introduction Who We Are Herwidodo Kusumobroto Lead Principal R&D Engineer Sr Software Design Engineer Deviani
4. Agenda 1. Motivation 2. Objective 3. Definition 4. Implementation 5. Use Case 6. Demo
5. Motivation Many bugs found in QA and Production phase
6. Motivation Some UI Verifications are still resource intensive
7. Motivation No early automated feature regression
8. Motivation So much worry on each UI release, as 3rd party libraries may get unstable
9. Motivation Upgrade version for libraries may give us headache
10. Motivation
11. Objective Our objectives of having Integration Tests will cover: • Visual Regression Assurance => Avoid breaking changes • Feature Tests Coverage => Reduce bugs • Automated Tests => Improve assurance and reduce release cycle
12. Definition What is UI Integration Test?
13. Definition What is UI Integration Test? UI integration test is a way to run the whole app in a real browser without hitting a real server. These tests are the ace in the hole of every front-end developer. They are blazing fast and less exposed to random failures or false negatives https://www.testim.io/blog/unit-test-vs-integration-test/
14. Definition UI Integration Test
15. Technology
16. Visual testing state-of-visual-testing-2020 / browserstack.com 54% of survey respondents cited catching bugs or regressions as a benefit of visual testing.
17. UI Integration Test Cycle Local or CI/CD Screenshoot rendering & comparison Report
18. Initial setup Prerequisites: • Node.js • Visual Studio Code or Webstorm or any code editing program How to add playwright in your project: 1. Install Node.js 2. Make sure that npm already included 3. Type "npm install playwright" in your terminal
19. @blibli/integration-test-tools Benefits: • You can update/add mock data • Taking Snapshots • Getting helper library such as : responsive utils, network util, interaction util
20. Usecase • Update UI Library
21. Usecase • Screenshoot Rendering
22. Usecase • Cross Device & Cross Platform • Regression
23. Demo
24. THANK YOU