Designing a visual regression testing tool : Decrease fear-driven development and enhance the quality assurance

Abstract: Testing a software is important to maintain the quality of the application. There are many ways of testing functionality of an application but not so many for testing the interface. When reusing CSS is a common approach, one change in the CSS can cause many visual changes on the interface. Not testing these changes, visual errors might occur which can decrease the quality of the application. Also, not knowing where the change is affecting, fear-driven development, i.e. the developers feels fear when changing code, can arise for the developers. In this thesis, a pre-study was made to investigate if any current feardriven development existed among developers. Then a visual regression testing tool was created, using a rapid prototyping process, to help the developers testing the interface during the evolving process of the application. The tool’s primary purpose is to show images of the visual changes that have occurred for the developers and as a result, the fear-driven development can decrease for the developers and the quality can be improved. The tool was implemented using AngularJS, NodeJS and ResembleJS and was tested on UI developers. The developers got a case where they had made CSS changes and then wanted to see how the changes affected the site they were working on. All of the developers felt, often or sometimes, fear when changing code. After using the tool, their feelings of fear-driven development was decreased and they all saw the tool as helpful when finding visual errors that might occur when CSS or web components are changed.