Article Link
Collect
Submit Manuscript
Show Outline
Outline
Abstract
Keywords
Electronic Supplementary Material
References
Show full outline
Hide outline
Regular Paper

Test-Driven Feature Extraction of Web Components

School of Computer Science and Engineering, National Engineering Research Center of Digital Life Sun Yat-sen University, Guangzhou 510006, China
School of Design, The Hong Kong Polytechnic University, Hong Kong, China
Guangdong Key Laboratory for Big Data Analysis and Simulation of Public Opinion, The School of Communication and Design, Sun Yat-sen University, Guangzhou 510006, China
School of Information Technology and Engineering, Guangzhou College of Commerce, Guangzhou 511363, China
Show Author Information

Abstract

With the growing requirements of web applications, web components are developed to package the implementation of commonly-used features for reuse. In some cases, the developer may want to reuse some features which cannot be customized by the component's APIs. He/she has to extract the implementation by hand. It is labor-intensive and error-prone. Considering the widely-used test cases which can be useful to specify the software features, a test-driven approach is proposed to extract the implementation of the desired features in web components. The satisfaction of the user's requirements is transformed into the passing rate of user-specified test cases. In this way, the quality of the extraction result can be evaluated automatically. Meanwhile, a record/replay-based GUI test generation method is proposed to ensure that the extraction result has the correct GUI appearance. To extract the feature implementation, a hierarchical genetic algorithm is proposed to find the code snippet that can pass all the tests and has the approximate smallest size. We compare our method with two existing feature extraction methods. The result shows that our method can extract the correct implementation with the minimum size. A human-subject study is conducted to show the effectiveness and weaknesses of our method in helping users extract the features.

Electronic Supplementary Material

Download File(s)
jcst-37-2-389-Highlights.pdf (263 KB)

References

[1]

Krueger C W. Software reuse. ACM Computing Surveys, 1992, 24(2): 131-183. DOI: 10.1145/130844.130856.

[2]
Chattopadhyay S, Nelson N, Gonzalez Y R, Leon A A, Pandita R, Sarma A. Latent patterns in activities: A field study of how developers manage context. In Proc. the 41st IEEE/ACM Int. Conference on Software Engineering, May 2019, pp.373-383. DOI: 10.1109/ICSE.2019.00051.
[3]
Gascon-Samson J, Jung K, Goyal S, Rezaiean-Asel A, Pattabiraman K. ThingsMigrate: Platform-independent migration of stateful JavaScript IoT applications. In Proc. the 32nd European Conference on Object-Oriented Programming, July 2018, Article No. 18. DOI: 10.4230/LIPIcs.ECOOP.2018.18.
[4]

Xu B, An L, Thung F, Khomh F, Lo D. Why reinventing the wheels? An empirical study on library reuse and re-implementation. Empirical Software Engineering, 2020, 25(1): 755-789. DOI: 10.1007/s10664-019-09771-0.

[5]

Krüger J, Mukelabai M, Gu W, Shen H, Hebig R, Berger T. Where is my feature and what is it about? A case study on recovering feature facets. Journal of Systems and Software, 2019, 152: 239-253. DOI: 10.1016/j.jss.2019.01.057.

[6]
Oney S, Myers B. FireCrystal: Understanding interactive behaviors in dynamic web pages. In Proc. the 2019 IEEE Symp. Visual Languages and Human-Centric Computing, Sept. 2009, pp.105-108. DOI: 10.1109/VLHCC.2009.5295287.
[7]
Hibschman J, Zhang H. Unravel: Rapid web application reverse engineering via interaction recording, source tracing, and library detection. In Proc. the 28th Annual ACM Symp. User Interface Software & Technology, Nov. 2015, pp.270-279. DOI: 10.1145/2807442.2807468.
[8]
Alimadadi S, Sequeira S, Mesbah A, Pattabiraman K. Understanding JavaScript event-based interactions. In Proc. the 36th Int. Conference on Software Engineering, May 2014, pp.367-377. DOI: 10.1145/2568225.2568268.
[9]

Maras J, Stula M, Carlson J, Crnkovic I. Identifying code of individual features in client-side web applications. IEEE Trans. Software Engineering, 2013, 39(12): 1680-1697. DOI: 10.1109/TSE.2013.38.

[10]

Shaffer D W, Resnick M. "Thick" authenticity: New media and authentic learning. Journal of Interactive Learning Research, 1999, 10(2): 195-216.

[11]

Razzaq A, Le Gear A, Exton C, Buckley J. An empirical assessment of baseline feature location techniques. Empirical Software Engineering, 2020, 25(1): 266-321. DOI: 10.1007/s10664-019-09734-5.

[12]
Burg B, Ko A J, Ernst M D. Explaining visual changes in web interfaces. In Proc. the 28th Annual ACM Symp. User Interface Software & Technology, Nov. 2015, pp.259-268. DOI: 10.1145/2807442.2807473.
[13]
Barr E T, Harman M, Jia Y, Marginean A, Petke J. Automated software transplantation. In Proc. the 2015 Int. Symp. Software Testing and Analysis, July 2015, pp.257-269. DOI: 10.1145/2771783.2771796.
[14]
Jensen S H, Møller A, Thiemann P. Type analysis for JavaScript. In Proc. the 16th Int. Symp. Static Analysis, August 2009, pp.238-255. DOI: 10.1007/978-3-642-03237-0_17.
[15]
Kashyap V, Dewey K, Kuefner E A et al. JSAI: A static analysis platform for JavaScript. In Proc. the 22nd ACM SIGSOFT Int. Symp. Foundations of Software Engineering, Nov. 2014, pp.121-132. DOI: 10.1145/2635868.2635904.
[16]
Guha A, Saftoiu C, Krishnamurthi S. The essence of JavaScript. In Proc. the 24th European Conference on Object-Oriented Programming, June 2010, pp.126-150. DOI: 10.1007/978-3-642-14107-2_7.
[17]
Madsen M, Livshits B, Fanning M. Practical static analysis of JavaScript applications in the presence of frameworks and libraries. In Proc. the 9th Joint Meeting of the European Software Engineering Conference and the ACM SIGSOFT Symposium on Foundations of Software Engineering, August 2013, pp.499-509. DOI: 10.1145/2491411.2491417.
[18]
Guarnieri S, Pistoia M, Tripp O, Dolby J, Teilhet S, Berg R. Saving the world wide web from vulnerable JavaScript. In Proc. the 2011 Int. Symp. Software Testing and Analysis, July 2011, pp.177-187. DOI: 10.1145/2001420.2001442.
[19]
Malik R S, Patra J, Pradel M. NL2Type: Inferring JavaScript function types from natural language information. In Proc. the 41st IEEE/ACM Int. Conference on Software Engineering, May 2019, pp.304-315. DOI: 10.1109/ICSE.2019.00045
[20]
Jensen S H, Madsen M, Møller A. Modeling the HTML DOM and browser API in static analysis of JavaScript web applications. In Proc. the 19th ACM SIGSOFT Symp. and the 13th European Conference on Foundations of Software Engineering, Sept. 2011, pp.59-69. DOI: 10.1145/2025113.2025125.
[21]
Kristensen E K, Møller A. Reasonably-most-general clients for JavaScript library analysis. In Proc. the 41st Int. Conference on Software Engineering, May 2019, pp.83-93. DOI: 10.1109/ICSE.2019.00026.
[22]

Madsen M, Tip F, Lhoták O. Static analysis of event-driven Node. js JavaScript applications. ACM SIGPLAN Notices, 2015, 50(10): 505-519. DOI: 10.1145/2858965.2814272.

[23]
Park C, Ryu S. Scalable and precise static analysis of JavaScript applications via loop-sensitivity. In Proc. the 29th European Conference on Object-Oriented Programming, July 2015, pp.735-756. DOI: 10.4230/LIPIcs.ECOOP.2015.735.
[24]

Andreasen E, Gong L, Møller A et al. A survey of dynamic analysis and test generation for JavaScript. ACM Computing Surveys, 2017, 50(5): Article No. 66. DOI: 10.1145/3106739.

[25]
Sen K, Kalasapur S, Brutch T, Gibbs S. Jalangi: A selective record-replay and dynamic analysis framework for JavaScript. In Proc. the 9th Joint Meeting of the European Software Engineering Conference and the ACM SIGSOFT Symposium on the Foundations of Software Engineering, August 2013, pp.488-498. DOI: 10.1145/2491411.2491447.
[26]
Burg B, Bailey R, Ko A J, Ernst M D. Interactive record/replay for web application debugging. In Proc. the 26th ACM Symp. User Interface Software and Technology, Oct. 2013, pp.473-484. DOI: 10.1145/2501988.2502050.
[27]
Mahajan S, Halfond W G. Finding HTML presentation failures using image comparison techniques. In Proc. the 29th ACM/IEEE Int. Conference on Automated Software Engineering, Sept. 2014, pp.91-96. DOI: 10.1145/2642937.2642966.
[28]
Ocariza F S, Pattabiraman K, Mesbah A. Detecting inconsistencies in JavaScript MVC applications. In Proc. the 37th Int. Conference on Software Engineering, May 2015, pp.325-335. DOI: 10.1109/ICSE.2015.52.
[29]

Wang J, Dou W, Gao C, Wei J. JSTrace: Fast reproducing web application errors. Journal of Systems and Software, 2018, 137: 448-462. DOI: 10.1016/j.jss.2017.06.038.

[30]
Li P, Wohlstadter E. Script InSight: Using models to explore JavaScript code from the browser view. In Proc. the 9th Int. Conference on Web Engineering, June 2009, pp.260-274. DOI: 10.1007/978-3-642-02818-2_21.
[31]

Dow S P, Glassco A, Kass J, Schwarz M, Schwartz D L, Klemmer S R. Parallel prototyping leads to better design results, more divergence, and increased self-efficacy. ACM Trans. Computer-Human Interaction, 2010, 17(4): Article No. 18. DOI: 10.1145/1879831.1879836.

[32]
Gibson D, Punera K, Tomkins A. The volume and evolution of web page templates. In Proc. the 14th Int. Conference on World Wide Web, May 2005, pp.830-839. DOI: 10.1145/1062745.1062763.
[33]
Lee B, Srivastava S, Kumar R, Brafman R, Klemmer S R. Designing with interactive example galleries. In Proc. the SIGCHI Conference on Human Factors in Computing Systems, Apr. 2010, pp.2257-2266. DOI: 10.1145/1753326.1753667.
[34]
Kumar R, Talton J O, Ahmad S, Klemmer S R. Bricolage: Example-based retargeting for web design. In Proc. the SIGCHI Conference on Human Factors in Computing Systems, May 2011, pp.2197-2206. DOI: 10.1145/1978942.1979262.
[35]
Swearngin A, Dontcheva M, Li W, Brandt J, Dixon M, Ko A J. Rewire: Interface design assistance from examples. In Proc. the 2018 CHI Conference on Human Factors in Computing Systems, Apr. 2018, Article No. 504. DOI: 10.1145/3173574.3174078.
[36]
Wang Z, Cheng B, Jin Y, Feng Y, Chen J. EasyApp: A widget-based cross-platform mobile development environment for end-users. In Proc. the 23rd Annual Int. Conference on Mobile Computing and Networking, Oct. 2017, pp.591-593. DOI: 10.1145/3117811.3131242.
[37]
Benson E O, Karger D R. Cascading tree sheets and recombinant HTML: Better encapsulation and retargeting of web content. In Proc. the 22nd Int. Conference on World Wide Web, May 2013, pp.107-118. DOI: 10.1145/2488388.2488399.
[38]
Verou L, Zhang A X, Karger D R. Mavo: Creating interactive data-driven web applications by authoring HTML. In Proc. the 29th Annual Symp. User Interface Software and Technology, Oct. 2016, pp.483-496. DOI: 10.1145/2984511.2984551.
[39]

Liu X, Huang G, Zhao Q, Mei H, Brain B M. iMashup: A mashup-based framework for service composition. Science China Information Sciences, 2014, 57(1): 1-20. DOI: 10.1007/s11432-013-4782-0.

[40]

Huang G, Liu X, Ma Y, Lu X, Zhang Y, Xiong Y. Programming situational mobile web applications with cloudmobile convergence: An Internetware-oriented approach. IEEE Trans. Services Computing, 2016, 12(1): 6-19. DOI: 10.1109/TSC.2016.2587260.

[41]

Eisenbarth T, Koschke R, Simon D. Locating features in source code. IEEE Trans. Software Engineering, 2003, 29(3): 210-224. DOI: 10.1109/TSE.2003.1183929.

[42]
Mahajan S, Alameer A, McMinn P, Halfond W G. Automated repair of layout cross browser issues using searchbased techniques. In Proc. the 26th ACM SIGSOFT Int. Symp. Software Testing and Analysis, July 2017, pp.249-260. DOI: 10.1145/3092703.3092726.
[43]
Chang T H, Yeh T, Miller R C. GUI testing using computer vision. In Proc. the 28th International Conference on Human Factors in Computing Systems, Apr. 2010, pp.1535-1544. DOI: 10.1145/1753326.1753555.
Journal of Computer Science and Technology
Pages 389-404
Cite this article:
Long Y-H, Chen Y-C, Chen X-P, et al. Test-Driven Feature Extraction of Web Components. Journal of Computer Science and Technology, 2022, 37(2): 389-404. https://doi.org/10.1007/s11390-022-0673-4
Metrics & Citations  
Article History
Copyright
Return