Challenges for Layout Validation: Lessons Learned

  • Conference paper
  • First Online:
Quality of Information and Communications Technology (QUATIC 2020)

Abstract

Companies are migrating their software systems. The migration process contemplates many steps, UI migration is one of them. To validate the UI migration, most existing approaches rely on visual structure (DOM) comparison. However, in previous work, we experimented such validation and reported that it is not sufficient to ensure a result that is equivalent or even identical to the visual structure of the interface to be migrated. Indeed, two similar DOM may be rendered completely differently. So, we decide to focus on the layout migration validation. We propose a first visual comparison approach for migrated layout validation and experiment it on an industrial case. Hence, from this first experiment and already existing studies on image comparison field, we highlight challenges for layout comparison. For each challenge, we propose possible solutions, and we detail the three main features we need to create a good layout validation approach.

This is a preview of subscription content, log in via an institution to check access.

Access this chapter

Subscribe and save

Springer+ Basic
EUR 32.99 /Month
  • Get 10 units per month
  • Download Article/Chapter or Ebook
  • 1 Unit = 1 Article or 1 Chapter
  • Cancel anytime
Subscribe now

Buy Now

Chapter
EUR 29.95
Price includes VAT (France)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
EUR 42.79
Price includes VAT (France)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
EUR 52.74
Price includes VAT (France)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free ship** worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Institutional subscriptions

Similar content being viewed by others

Notes

  1. 1.

    Document Object Model.

  2. 2.

    https://www.berger-levrault.com.

  3. 3.

    https://www.merriam-webster.com/dictionary/layout.

  4. 4.

    https://github.com/badetitou/Pasino.

  5. 5.

    A Single page application is a web application or website that interacts with the web browser by dynamically rewriting the current web page.

  6. 6.

    https://www.selenium.dev/.

References

  1. Alpuente, M., Romero, D.: A visual technique for web pages comparison. Electron. Notes Theor. Comput. Sci. 235, 3–18 (2009)

    Article  Google Scholar 

  2. Amalfitano, D., Fasolino, A.R., Tramontana, P.: A GUI crawling-based technique for android mobile application testing. In: 2011 IEEE Fourth International Conference on Software Testing, Verification and Validation Workshops, pp. 252–261. IEEE (2011). ISBN 978-1-4577-0019-4. https://doi.org/10.1109/ICSTW.2011.77. http://ieeexplore.ieee.org/document/5954416/

  3. Cao, J., Mao, B., Luo, J.: A segmentation method for web page analysis using shrinking and dividing. Int. J. Parallel Emergent Distrib. Syst. 25(2), 93–104 (2010)

    Article  MathSciNet  Google Scholar 

  4. Hayakawa, T., Hasegawa, S., Yoshika, S., Hikita, T.: Maintaining web applications by translating among different RIA technologies. GSTF J. Comput. 2(1), 250–256 (2012)

    Google Scholar 

  5. Joorabchi, M.E., Mesbah, A.: Reverse engineering iOS mobile applications. In: 2012 19th Working Conference on Reverse Engineering, pp. 177–186. IEEE (2012). ISBN 978-0-7695-4891-3, 978-1-4673-4536-1. https://doi.org/10.1109/WCRE.2012.27. http://ieeexplore.ieee.org/document/6385113/

  6. Karami, E., Prasad, S., Shehata, M.: Image matching using sift, surf, brief and orb: performance comparison for distorted images. ar**: reverse engineering of graphical user interfaces for testing. In: Proceedings of the IEEE Working Conference on Reverse Engineering (WCRE 2003), pp. 260–269. IEEE Computer Society Press, Los Alamitos, November 2003

    Google Scholar 

  7. Mesbah, A., van Deursen, A., Lenselink, S.: Crawling ajax-based web applications through dynamic analysis of user interface state changes. ACM Trans. Web 6(1), 1–30 (2012). ISSN 15591131. https://doi.org/10.1145/2109205.2109208. http://dl.acm.org/citation.cfm?doid=2109205.2109208

  8. Moran, K., Watson, C., Hoskins, J., Purnell, G., Poshyvanyk, D.: Detecting and summarizing GUI changes in evolving mobile apps. ar**v:1807.09440 [cs], July 2018

  9. Morel, J.M., Yu, G.: ASIFT: a new framework for fully affine invariant image comparison. SIAM J. Imaging Sci. 2(2), 438–469 (2009)

    Article  MathSciNet  Google Scholar 

  10. Sánchez Ramón, O., Sánchez Cuadrado, J., García Molina, J.: Model-driven reverse engineering of legacy graphical user interfaces. Autom. Softw. Eng. 21(2), 147–186 (2014). ISSN 0928-8910, 1573-7535. https://doi.org/10.1007/s10515-013-0130-2

  11. Sánchez Ramón, Ó., Sánchez Cuadrado, J., García Molina, J., Vanderdonckt, J.: A layout inference algorithm for graphical user interfaces. Inf. Softw. Technol. 70, 155–175 (2016)

    Article  Google Scholar 

  12. Sanoja, A., Gançarski, S.: Migrating web archives from HTML4 to HTML5: a block-based approach and its evaluation. In: Kirikova, M., Nørvåg, K., Papadopoulos, G.A. (eds.) ADBIS 2017. LNCS, vol. 10509, pp. 375–393. Springer, Cham (2017). https://doi.org/10.1007/978-3-319-66917-5_25. ISBN 978-3-319-66917-5

    Chapter  Google Scholar 

  13. Van Beusekom, J., Keysers, D., Shafait, F., Breuel, T.M.: Distance measures for layout-based document image retrieval. In: Second International Conference on Document Image Analysis for Libraries (DIAL 2006). IEEE (2006)

    Google Scholar 

  14. Verhaeghe, B., et al.: GUI migration using MDE from GWT to angular 6: an industrial case. In: 2019 IEEE 26th International Conference on Software Analysis, Evolution and Reengineering (SANER), Hangzhou, China (2019). https://hal.inria.fr/hal-02019015

Download references

Author information

Authors and Affiliations

Authors

Corresponding author

Correspondence to Santiago Bragagnolo .

Editor information

Editors and Affiliations

Rights and permissions

Reprints and permissions

Copyright information

© 2020 Springer Nature Switzerland AG

About this paper

Check for updates. Verify currency and authenticity via CrossMark

Cite this paper

Bragagnolo, S., Verhaeghe, B., Seriai, A., Derras, M., Etien, A. (2020). Challenges for Layout Validation: Lessons Learned. In: Shepperd, M., Brito e Abreu, F., Rodrigues da Silva, A., Pérez-Castillo, R. (eds) Quality of Information and Communications Technology. QUATIC 2020. Communications in Computer and Information Science, vol 1266. Springer, Cham. https://doi.org/10.1007/978-3-030-58793-2_9

Download citation

  • DOI: https://doi.org/10.1007/978-3-030-58793-2_9

  • Published:

  • Publisher Name: Springer, Cham

  • Print ISBN: 978-3-030-58792-5

  • Online ISBN: 978-3-030-58793-2

  • eBook Packages: Computer ScienceComputer Science (R0)

Publish with us

Policies and ethics

Navigation