先上視頻!!
流程自動化工具-錄制操作繪制流程
這個想法之前就有了,趁著周末時間給它擼出來。
實現思路
從之前的文章自動化桌面未來展望中已經驗證了錄制繪制流程圖的可行性。基于DOM錄制頁面操作軌跡的思路監聽頁面點擊、輸入事件即可,同時獲取當前操作元素的Xpath,最后生成之前定義數據格式。
// 監聽點擊事件document.body.addEventListener('click', _throttleOnClick, {capture: true, passive: true,})
// 監聽輸入事件document.body.addEventListener('input', _throttleOnInput, {capture: true,passive: true,} )
操作數據重復過多?
當在輸入框輸入字符時,每次都觸發輸入事件,發現打印出來數據很多,例如:第一次輸入‘q’,觸發了一次,此時記錄了‘q’,緊接輸入‘w’,觸發了一次,此時記錄‘qw’,而真正想要的是最后一次的‘qw’, 而不是[‘q’, ‘qw’],因此得做了一個數據去除重復的,思路: 把xpath作為唯一key,遍歷數組,只要上次操作xpath與xpath一致,就把上一次xpath數據去除。點擊事件也是如此。
周末愉快
不上班,呆在瀏覽器的時間還是一樣的多!!哈哈