Improving and Automating Design System Testing
Loading...
URL
Journal Title
Journal ISSN
Volume Title
School of Electrical Engineering |
Master's thesis
Authors
Date
2024-11-10
Department
Major/Subject
Human-Computer Interaction
Mcode
Degree programme
Master's Programme in Computer, Communication and Information Sciences
Language
en
Pages
56
Series
Abstract
The popularity of design systems has grown a lot in recent years. The wide range of publicly available design systems, such as Material Design offered by Google, have enabled an increasing number of websites to integrate design system components within their digital development. Additionally, many benefits offered by the design system have led to an increasing number of organisations developing their own in-house design systems. In terms of ensuring the quality of component-based design systems, it is essential that the design system’s components function and appear as designed on different devices, browsers and platforms. Therefore, sufficient and comprehensive testing of the design system is critical. This thesis explores design system testing and automation from two points of view. The first part of the thesis includes a literature review, and the second part presents an empirical study. The literature review studies the testing of web applications, design systems, and design system testing, as well as the current challenges in this field. Based on the literature review, an empirical study is conducted. The study involves developing a testing strategy for the company’s design system, taking into account the current state of testing, the available resources and the context of the company’s design system. After the development of the test plan, the plan is implemented in the design system, and the success of the objectives is evaluated for both the test plan and the implementation. The outcome of this thesis is the implementation of visual regression testing for the company’s design system. Implementation meets set objectives and increases value for design system developers by reducing manual work and improving the development process and for other projects by ensuring a high-quality design system. This thesis attempts to close the research gap between academic research and practical work in the domain of design systems by combining practical work with an academic approach. The literature review offers an academic approach to the topic, providing theoretical perspectives, while the case study combines an academic approach to practical work. The thesis offers valuable insight, not only to professionals but also to academic researchers.Suunnittelujärjestelmät ovat viime vuosina kasvattaneet suosiotaan. Avoimesti hyödynnettävät suunnittelujärjestelmät, kuten Googlen tarjoama Material Design -järjestelmä, ovat saaneet yhä useammat hyödyntämään suunnittelujärjestelmiä digikehityksessä. Tästä huolimatta suunnittelujärjestelmien tarjoamien hyötyjen myötä yhä useampi organisaatio kehittää omaa suunnittelujärjestelmää. Komponenttipohjaisen suunnittelujärjestelmän laadun varmistuksen kannalta on keskeistä, että järjestelmän komponentit toimivat kuten suunniteltu erilaisilla laitteilla, selaimilla ja alustoilla. Tämän vuoksi komponenttikirjaston riittävä ja kattava testaus on kriittisessä asemassa. Tämä diplomityö koostuu kahdesta osuudesta: kirjallisuuskatsauksesta sekä kokeellisesta osuudesta. Kirjallisuuskatsauksessa tutustutaan tarkemmin selainpohjaisten sovellusten testaukseen, suunnittelujärjestelmiin ja niiden testaamiseen, sekä tämän hetkisiin ongelmiin. Kirjallisuuskatsauksen pohjalta tehdään kokeellinen tutkimus. Tutkimuksessa kehitetään testaussuunnitelma yrityksen suunnittelujärjestelmälle, huomioiden yrityksen suunnittelujärjestelmän nykyisen tilan, tavoitetilan sekä rajoitukset. Testaussuunnitelman kehityksen jälkeen suunnitelma toteutetaan suunnittelujärjestelmään, ja tavoitteiden onnistumista arvioidaan niin testaussuunnitelman osalta kuin myös toteutuksen puolesta. Työn lopputuloksena yritykselle toteutetaan visuaalinen regressiotestaus osaksi suunnittelujärjestelmää. Toteutus täyttää sille asetetut tavoitteet ja tuo lisäarvoa suunnittelujärjestelmän kehittäjille vähentämällä manuaalista työtä, parantamalla kehitysprosessia ja laadunvarmistusta. Toteutettu visuaalinen regressiotestaus varmistaa laadukkaan suunnittelujärjestelmän käytettävyyden muissa projekteissa. Tämä diplomityö tuo akatemiaan merkittävän lisän tutkimalla suunnittelujärjestelmän testauksen teknisiä haasteita ja automatisointia, täyttäen aiemman tutkimuksen puutteen tällä alueella. Työ yhdistää akateemisen tutkimuksen käytännön työhön, tarjoten teoreettisia näkökulmia ja käytännön ratkaisuja, jotka ovat arvokkaita sekä alan ammattilaisille että tutkijoille.Description
Supervisor
Vuorimaa, PetriThesis advisor
Salonen, SamuliKeywords
design system, test automation, visual regression testing, software testing, UI testing, component-based development