請用此 Handle URI 來引用此文件:
http://tdr.lib.ntu.edu.tw/jspui/handle/123456789/91905
完整後設資料紀錄
DC 欄位 | 值 | 語言 |
---|---|---|
dc.contributor.advisor | 黃鐘揚 | zh_TW |
dc.contributor.advisor | Chung-Yang Huang | en |
dc.contributor.author | 王星蘋 | zh_TW |
dc.contributor.author | Hsing-Ping Wang | en |
dc.date.accessioned | 2024-02-26T16:23:10Z | - |
dc.date.available | 2024-02-27 | - |
dc.date.copyright | 2024-02-26 | - |
dc.date.issued | 2022 | - |
dc.date.submitted | 2002-01-01 | - |
dc.identifier.citation | “Synopsys: SpyGlass Lint“https://www.synopsys.com/verification/static-and-formal-verification/spyglass/spyglass-lint.html L. Wood. Document Object Model (DOM) Level 1 Specification. Technical Report REC-DOM-Level-1-19981001, W3 Consortium, 1998. Version 1.0. Gackenheimer, C., & Paul, A. (2015). Introduction to React (Vol. 52). Apress. Fedosejev, A. (2015). React. js essentials. Packt Publishing Ltd. Mwaura, W. (2021). End-to-End Web Testing with Cypress: Explore techniques for automated frontend web testing with Cypress and JavaScript. Packt Publishing Ltd. “Cypress” https://www.cypress.io/ “Cypress-io/cypress GitHub” https://github.com/cypress-io/cypress “Selenium” https://www.selenium.dev/ “Applitools” https://applitools.com/ “ESLint” https://eslint.org/ “JSHint” https://jshint.com/ “StandardJS” https://standardjs.com/ Leotta, M., Clerissi, D., Ricca, F., & Tonella, P. (2016). Approaches and tools for automated end-to-end web testing. In Advances in Computers (Vol. 101, pp. 193-237). Elsevier. M. Beller, R. Bholanath, S. McIntosh, and A. Zaidman, “Analyzing the state of static analysis: A large-scale evaluation in open source software,” in Software Analysis, Evolution, and Reengineering (SANER), 2016 IEEE 23rd International Conference on, vol. 1. IEEE, 2016, pp. 470–481. Tómasdóttir, K. F., Aniche, M., & Van Deursen, A. (2017, October). Why and how JavaScript developers use linters. In 2017 32nd IEEE/ACM International Conference on Automated Software Engineering (ASE) (pp. 578-589). IEEE. Jensen, S. H., Madsen, M., & Møller, A. (2011, September). Modeling the HTML DOM and browser API in static analysis of JavaScript web applications. In Proceedings of the 19th ACM SIGSOFT symposium and the 13th European conference on Foundations of software engineering (pp. 59-69). Kashyap, V., Dewey, K., Kuefner, E. A., Wagner, J., Gibbons, K., Sarracino, J., ... & Hardekopf, B. (2014, November). JSAI: A static analysis platform for JavaScript. In Proceedings of the 22nd ACM SIGSOFT international symposium on Foundations of Software Engineering (pp. 121-132). Park, D., Stefănescu, A., & Roşu, G. (2015, June). KJS: A complete formal semantics of JavaScript. In Proceedings of the 36th ACM SIGPLAN Conference on Programming Language Design and Implementation (pp. 346-356). “TestModeller.io” https://testmodeller.io/ “babel handbook” https://github.com/jamiebuilds/babel-handbook “commander” https://www.npmjs.com/package/commander “fs” https://www.npmjs.com/package/fs | - |
dc.identifier.uri | http://tdr.lib.ntu.edu.tw/jspui/handle/123456789/91905 | - |
dc.description.abstract | 開發者在編寫代碼時通常會使用語法分析檢查工具來確認代碼是否存在語法錯誤,儘早得知代碼錯誤可以加速開發時程,避免在進入測試階段後才發現錯誤、又返回重新修改代碼。而本研究所開發的針對以React.js前端框架開發的網頁服務設計進行自動化靜態測試之工具,透過在編譯時間對代碼進行進階的靜態分析,得到語義和邏輯的控制流程圖,提前判斷是否存在因元素觸發事件設計錯誤而造成的服務運行中斷錯誤。此外,由於網路服務迭代更新的速度頻繁,撰寫完整的測試資料也花費開發者不少時間,本工具可同時利用控制流程圖來自動化產生測試樣本,此樣本可供開發者在後續動態測試上作為使用。 | zh_TW |
dc.description.abstract | Developers usually use tools to perform syntax checking in implementation. Finding code errors as soon as possible can speed up the development process. If a bug is caught in the testing stage of the development process, then developers have to return to the implementation stage to correct the errors. This work implements a tool that performs automatic static testing for web designs on the React.js framework. Through performing advanced static analysis on the code at the compile time, the tool helps catch potential runtime errors of unresponding webpages due to some inappropriate settings of onClick events. In addition, due to the frequent iterative updates of web services nowadays, it costs developers much time on writing tests for each iterative update. This work can also automatically generate test templates, which can be used by developers for the following runtime testing process. | en |
dc.description.provenance | Submitted by admin ntu (admin@lib.ntu.edu.tw) on 2024-02-26T16:23:10Z No. of bitstreams: 0 | en |
dc.description.provenance | Made available in DSpace on 2024-02-26T16:23:10Z (GMT). No. of bitstreams: 0 | en |
dc.description.tableofcontents | CONTENTS 誌謝 i 中文摘要 ii ABSTRACT iii CONTENTS iv LIST OF FIGURES vii LIST OF TABLES ix Chapter 1 Introduction 1 1.1 Motivation 1 1.2 Contribution 2 1.3 Thesis Organization 3 Chapter 2 Preliminaries 4 2.1 Prerequisites of Client-Side Frameworks 4 2.1.1 Document Object Model: DOM 4 2.1.2 Components, Events, and Rendering Elements 4 2.2 Introduction to React.js 5 2.2.1 JavaScript Syntax Extension: JSX 5 2.2.2 React Component, useState() Hook and Render Function 6 2.2.3 Client-side Routing Library: React-router-dom 7 2.3 Overview of Front-end Testing 7 2.3.1 Static Testing and Checking 8 2.3.2 End-to-end Testing 8 2.3.3 Modern Automated Front-end Testing Frameworks 8 2.4 Introduction to Cypress Front-end Testing Framework 9 2.5 Related Works 9 2.5.1 JavaScript Linting Tools 9 2.5.2 Front-end Test Automation Tools 10 Chapter 3 Modeling of the React.js Designs 12 3.1 Introduction of the Motivating Example 12 3.2 Modeling of the DOM Tree 13 3.2.1 Component Tree 13 3.2.2 Modeling of the Motivating Example 14 3.3 Modeling of the Component Rendering and the Input Events 16 3.3.1 Control Flow Graph 16 3.3.2 Modeling of the Motivating Example 18 Chapter 4 Proposed Static Testing Algorithm 23 4.1 Warning Detection 23 4.2 Automatic Test Template Generation 26 4.3 Case Study of the Motivating Example 28 Chapter 5 STTR: The Proposed Static Testing Tool 31 5.1 Introduction to the Framework 31 5.2 Usage Flow 32 5.2.1 Command Line Interface 32 5.2.2 Environment Variables 33 5.2.3 Usage Flowchart 34 5.3 Supported Features of STTR 35 Chapter 6 Demonstration and Experimental Results 37 6.1 Warning Detection 37 6.1.1 Warning of Unresponding Component 37 6.1.2 Experimental Results 39 6.2 Automatic Test Template Generation 40 6.2.1 Case Study 1: Guessing number design 2 40 6.2.2 Case Study 1: Guessing number design 4 41 6.2.3 Case Study 2: Minesweeper design 1 42 6.2.4 Case Study 3: Minesweeper design 2 and design 3 45 6.2.5 Case Study 4: Post system design 1 and design 2 47 6.2.6 Case Study 5: Questionnaire system 48 6.2.7 Experimental Results 50 Chapter 7 Conclusion and Future Works 51 7.1 Conclusion 51 7.2 Future Works 52 REFERENCE 53 | - |
dc.language.iso | en | - |
dc.title | 針對以React.js框架開發的網頁服務設計進行自動化靜態測試 | zh_TW |
dc.title | Automatic Static Testing for Web Designs on React.js Framework | en |
dc.type | Thesis | - |
dc.date.schoolyear | 110-2 | - |
dc.description.degree | 碩士 | - |
dc.contributor.oralexamcommittee | 王凡;王柏堯;蔡益坤 | zh_TW |
dc.contributor.oralexamcommittee | Farn Wang;Bow-Yaw Wang;Yih-Kuen Tsay | en |
dc.subject.keyword | 靜態測試,前端測試,測試自動化,軟體測試, | zh_TW |
dc.subject.keyword | Static Testing,Front-end Testing,Test Automation,Software Testing,React.js, | en |
dc.relation.page | 54 | - |
dc.identifier.doi | 10.6342/NTU202204021 | - |
dc.rights.note | 同意授權(全球公開) | - |
dc.date.accepted | 2022-09-28 | - |
dc.contributor.author-college | 電機資訊學院 | - |
dc.contributor.author-dept | 電子工程學研究所 | - |
顯示於系所單位: | 電子工程學研究所 |
文件中的檔案:
檔案 | 大小 | 格式 | |
---|---|---|---|
ntu-110-2.pdf | 3.59 MB | Adobe PDF | 檢視/開啟 |
系統中的文件,除了特別指名其著作權條款之外,均受到著作權保護,並且保留所有的權利。