針對以React.js框架開發的網頁服務設計進行自動化靜態測試

Abstract

開發者在編寫代碼時通常會使用語法分析檢查工具來確認代碼是否存在語法錯誤，儘早得知代碼錯誤可以加速開發時程，避免在進入測試階段後才發現錯誤、又返回重新修改代碼。而本研究所開發的針對以React.js前端框架開發的網頁服務設計進行自動化靜態測試之工具，透過在編譯時間對代碼進行進階的靜態分析，得到語義和邏輯的控制流程圖，提前判斷是否存在因元素觸發事件設計錯誤而造成的服務運行中斷錯誤。此外，由於網路服務迭代更新的速度頻繁，撰寫完整的測試資料也花費開發者不少時間，本工具可同時利用控制流程圖來自動化產生測試樣本，此樣本可供開發者在後續動態測試上作為使用。

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.