RPA 功能｜UiPath 如何和網頁互動： Inject JS Script！
閱讀時間約 9 分鐘
在 UiPath 的學習道路上，我們常會對這些各項功能（Activities）、參數（Properties）感到混亂，因此 RPAI 數位優化器的系列文章將會對這些功能參數進行解說。
這篇文章將和大家介紹「Inject JS Script」功能！當我們想要更精準地與網頁進行互動、操作網頁元件時，就千萬不能錯過這個功能，可以幫助 RPA 機器人更精準地操作流程！
在開始閱讀正文之前，也別忘了先追蹤我們的 臉書粉絲專頁 與 方格子帳號！
前言：JavaScript 是甚麼？
JavaScript 是一種能在瀏覽器裡直接執行的程式語言，簡單來說可以將其想成一個腳本語言，透過此來操控網站的所有元件，像是建立各種按鈕（Button）、嵌入表格、影片等，賦予了網頁互動、處理和創造新內容的可能性。
事實上，我們在網頁上所看到的所有內容，背後大多都有近似 JavaScript 的語言腳本所串連而成，若點擊鍵盤的「F12」，即可看到網頁背後的程式碼。以方格子首頁為例，點擊「F12」的元素後，即可得到如下圖，圖內資訊便是這個頁面背後的程式碼，標記著該頁面的所有元件。
舉例來說，如果我們將上圖所匡列的「編輯嚴選」的編輯二字刪除，就可以發現能和網頁進行互動和調整，如下圖僅剩「嚴選」二字喔！
備註：只有操作者可以看得到這個改變，其他人看不到喔
當然，JavaScript 還有各種進階功能和語法可學習和應用，未來有機會再和大家深入分享，希望這篇文章可以作為敲門磚，幫助大家了解如果希望透過更多元的方式和網頁互動，JavaScript 的語法功能就是我們能夠加以了解和學習之處！
關鍵在於，UiPath 該怎麼運用 JavaScript 呢？
如果想學習更多 UiPath 功能、實作案例並了解最新自動化趨勢，
歡迎加入「零基礎快速學習 RPA－利用 UiPath 建構自動化機器人」線上課程！課程優惠只到 2024 年 2 月 5 日，快點擊連結立即了解：https://mastertalks.tw/products/rpa-uipath?ref=RPARPA
Inject JS Script 功能簡介
Inject JS Script 是 UiPath 的內建功能，透過這個功能，我們便可以將撰寫完成的 JS 語法注入到網頁中，讓 RPA 機器人使用 JS 語法，做出如點擊按鈕、搜尋欄打字、取得表格值等行為。
當然我們也可以透過 UiPath 內建的其他功能來達成，如 Get Text功能便可以讓我們透過 Take Informative Screenshot的圖片選取方式取得內容，不過實務上，Inject JS Script 其實還是較穩定的網頁互動方式。
我們在 UiPath介面左側的 Activities 列表可以找到此一功能，如下圖所示：
另外，由於 Inject JS Script 必須和網頁互動，因此通常需搭配和瀏覽器相關的功能，如「Open Browser」、「Use Application/Browser」等！
功能參數說明
點選 Inject JS Script，便可看到如下方的 Activity 結果。
我們就先來聊聊圖片中所能點選的各個欄位：
我們就先來聊聊圖片中所能點選的各個欄位：
- Script code：
這個欄位主要是提供用戶在 UiPath 上直接輸入指定的 JS 語法。此外，如果已經習慣寫在 NotePad 或 JS 檔的用戶，也可以先在他處撰寫完成後，將檔案路徑填上以呼叫這些 JS 語法，稍後的範例練習也將以此作法進行。 - Indicate element inside browser：
如果今天我們想和網頁互動的方式是：點擊特定案件或表格，就可以透過此功能來告訴 RPA 機器人該元件的位置，然而由於 JS 語法本身就可以指定網頁的元件位置，這個功能通常比較少被使用。
而當我們點選 Inject JS Script，便可在介面右側的 Properties 設定相關參數（如下圖所示），接下來將介紹這些參數所代表的意涵：
- Input：
除了前面提到的 Script Code ，我們還有 Input Parameter 的功能可以操作。
如果今天有其他參數，且希望將這些參數資訊輸入至 JS語法中，作為 Input 的一環時，便可透過 Input Parameter的欄位加入參數，後被 JS抓取。 - Output：
若我們透過 JS 語法和網頁互動，是希望可以得到某些資訊，例如我們可以透過 JS 語法取得網頁的某些表格內容、特定關鍵字，並將這些資訊帶回 UiPath 給其他功能進行操作，例如匯入至 Excel 等，那麼這些從網頁得到的資訊輸出，就可以在 ScriptOutput 進行設定。 - Common：
ContinueOnError指的是，當流程在 Inject JS Script 此功能發現錯誤，仍可以繼續進行下去；然而這並非我們設計流程時所樂見的狀況，因此較少使用，大多是在測試流程階段才有機會勾選！
實作案例
我們可以簡單做個 Inject JS Script 的範例練習，讓大家更加理解這個功能，假設我們希望與 Google 首頁互動，讓它跳出 JS 語法所設定的對話提示框：
- 我們需要先開啟一個記事本，並將其副檔名改成 .js，如下圖檔名為「code.js」，如此一來便可以變成 JS 檔案，以供後續檔案存取。
2. 將剛剛設定好的 JS 檔點擊右鍵並進行編輯，即可在上面撰寫 JS 語法。
3. 我們所撰寫的 JS 語法如下，意思是希望指定特定的瀏覽器視窗透過 alert 功能，跳出文字框以提醒用戶一些資訊，而我們先將資訊暫定為「Hello World!」
function(element){alert("Hello World!") ;}
4. 完成 JS 檔案的語法後，我們就可以來到 UiPath 進行操作。我們先用 「Open Browser」功能來打開指定網頁，我們可以將其 url 指定為 Google 首頁的路徑。
註：UiPath 的最新版本會使用 Use Application/Browser 來取代 Open Browser，後續會再和各位介紹。
5. 接著我們打開 Inject JS Script 功能，因為事前已經將 JS 語法寫入 JS 檔中，因此下圖 Script code 就可以直接填寫檔案路徑，將該檔案呼叫出來即可。
註：此案例為簡單示範此一功能，只有填寫檔案路徑，否則多數情況因應各種需求，還是需要點選 Properties 進行進階設定，包含注入參數、設定輸出值等。
6. 執行流程後，我們就可以看到機器人將 Google 首頁打開，並且與網頁互動，成功跳出Hello World!，如此一來，這個練習便大功告成！
結語與心得
RPAI 數位優化器認為，Inject JS Script 功能的實用度為四顆星！透過這個功能，我們可以處理所有和瀏覽器有關的操作，不過想必仍會有人好奇，不是也可透過 UiPath 其他圖片選取的功能處理嗎？
答案是對的！而這也是 RPA 之所以直覺與強大之處，然而不同網頁背後的架構邏輯不一定相同，有時難免會遇到無法用圖片選取的方式來操作流程，此時 Inject JS Script 或許就是另一個可行的解決方案。
雖然乍看之下，要我們理解這些 JS 語法頗為挑戰，不過熟悉之後就會發現，我們主要只會使用某些特定語法而已，RPAI 數位優化器未來會再分享這些實用語法，透過理解這些功能，使工作更加順暢與自動化，讓我們一起 Work Smart！
這些功能雖然簡單，卻是我們創造自動化流程的基石，
讓我們一起由簡單開始，成就不簡單！
讓我們一起由簡單開始，成就不簡單！
如果你／妳喜歡這篇文章，歡迎點點愛心或留言，讓我們相互交流和成長！
這次的分享到此告一段落，想了解更多 RPA + AI 與數位轉型的最新趨勢與觀點、RPA 軟體功能介紹及實務應用案例，也歡迎追蹤 RPAI 數位優化器的社群和我們交流互動，我們下次見！
🚀 Instagram：RPAI 數位優化器
🚀 臉書粉絲專頁：RPAI 數位優化器
🚀 YouTube 頻道：RPAI 數位優化器
延伸學習資源
為什麼會看到廣告
122會員
107內容數
我們是以「機器人流程自動化（RPA）」結合「人工智慧（AI）」為主題的中文學習社群，旨在分享 RPA + AI 的學習資源、應用實例和最新發展趨勢，讓工作者透過自動化工具的有效應用，創造數位優化與轉型契機，讓我們一起由簡單開始，成就不簡單！
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
隨著自動化技術的進步，越來越多的企業開始尋求 RPA 來提高效率和降低成本，因此 RPA 工程師成為熱門的職位之一。從流程設計到技術實作，RPA 工程師在自動化領域中的角色至關重要。
然而，如果身為 RPA 工程師的你在未來的發展中感到迷茫，不必擔心！這篇文章將帶大家認識多種的RPA職涯發展。
在這篇文章中，我們將深入探討如何透過 UiPath 的 Excel 相關功能來協助自動化操作，包括使用 Excel 檔案、讀取範圍、寫入單元格、篩選和插入工作表等技巧，透過具體範例，讀者將能快速上手並理解這些功能的使用方法，提升你的工作效率。
這篇文章將帶您走進 RPA 的學習世界，專注於 UiPath 中的 Excel 常用功能。例如，如何使用 Excel File、Read Range、Write Cell、Filter 和 Insert Sheet。將透過範例讓您瞭解這些功能的實際應用，幫助掌握自動化流程這項技術，我們一起開始學習！
setter和getter能把狀態改變時需做的事情包裝起來，讓外部只需簡單修改參數就能達到預想的效果
之前談論功能整合(FI)的進行有提到一個問題：「老師們是如何用雙手達成與學生的神經系統連結？（如果是阿凡達應該就是用髮辮）」，通常費登奎斯老師會以「韋伯-費希納定理」來說明，節錄維基百科如下：
韋伯定理：在同類刺激之下，其差異閾限的大小是隨著標準刺激強弱而成一定比例關係的，K=ΔI/I K為常數。
RPAI 數位優化器在這系列文章中，不會從基本除錯思維或套路開始說明，而是把焦點放在 UiPath 提供哪些除錯工具，透過理解工具使用方式、詳細解釋功能及比較不同功能差異，讓讀者對 UiPath 整個開發核心概念有更深了解，進而讓開發流程更加穩固！
個人認為兩者間的關係其實是種光譜，自動化服務會加入AI，降低設計流程門檻、提高辨識功能；AI 服務會加入自動化，更落地的提供實質幫助，兩者逐步靠攏，公司再根據自身需求、情境找到相對應、最適合的利基工具。
RPA自動化流程是現今企業極為重視的一項技術。透過自動化流程，我們能夠將那些重複且繁瑣的操作，使其自動進行。
本單元，Meiko想來跟同學一同探索如何透過自動化流程，自動寄送員工生日賀卡，讓RPA來輔助企業，簡化流程，釋放潛力 — 利用RPA為企業效率加分
發現RPA技術的無限潛力！了解如何透過Robotic Process Automation（RPA）實現自動化，克服企業勞動力短缺的挑戰。我們分享RPA的優勢、限制以及選擇最適合您企業的軟體的關鍵評估指標。結合AI技術，為您的業務帶來效率和質量的提升。不要錯過這個關於RPA未來發展趨勢的深入指南!
你知道嗎？無論是哪個 Excel 功能，我們都可以透過 RPA 將 Excel 與其他應用程式進行串接及互動，因此 RPAI 數位優化器這次要來分享的是如何透過 Microsoft Power Automate 進行 RPA 流程開發，呼叫你手中的各種巨集檔！
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
隨著自動化技術的進步，越來越多的企業開始尋求 RPA 來提高效率和降低成本，因此 RPA 工程師成為熱門的職位之一。從流程設計到技術實作，RPA 工程師在自動化領域中的角色至關重要。
然而，如果身為 RPA 工程師的你在未來的發展中感到迷茫，不必擔心！這篇文章將帶大家認識多種的RPA職涯發展。
在這篇文章中，我們將深入探討如何透過 UiPath 的 Excel 相關功能來協助自動化操作，包括使用 Excel 檔案、讀取範圍、寫入單元格、篩選和插入工作表等技巧，透過具體範例，讀者將能快速上手並理解這些功能的使用方法，提升你的工作效率。
這篇文章將帶您走進 RPA 的學習世界，專注於 UiPath 中的 Excel 常用功能。例如，如何使用 Excel File、Read Range、Write Cell、Filter 和 Insert Sheet。將透過範例讓您瞭解這些功能的實際應用，幫助掌握自動化流程這項技術，我們一起開始學習！
setter和getter能把狀態改變時需做的事情包裝起來，讓外部只需簡單修改參數就能達到預想的效果
之前談論功能整合(FI)的進行有提到一個問題：「老師們是如何用雙手達成與學生的神經系統連結？（如果是阿凡達應該就是用髮辮）」，通常費登奎斯老師會以「韋伯-費希納定理」來說明，節錄維基百科如下：
韋伯定理：在同類刺激之下，其差異閾限的大小是隨著標準刺激強弱而成一定比例關係的，K=ΔI/I K為常數。
RPAI 數位優化器在這系列文章中，不會從基本除錯思維或套路開始說明，而是把焦點放在 UiPath 提供哪些除錯工具，透過理解工具使用方式、詳細解釋功能及比較不同功能差異，讓讀者對 UiPath 整個開發核心概念有更深了解，進而讓開發流程更加穩固！
個人認為兩者間的關係其實是種光譜，自動化服務會加入AI，降低設計流程門檻、提高辨識功能；AI 服務會加入自動化，更落地的提供實質幫助，兩者逐步靠攏，公司再根據自身需求、情境找到相對應、最適合的利基工具。
RPA自動化流程是現今企業極為重視的一項技術。透過自動化流程，我們能夠將那些重複且繁瑣的操作，使其自動進行。
本單元，Meiko想來跟同學一同探索如何透過自動化流程，自動寄送員工生日賀卡，讓RPA來輔助企業，簡化流程，釋放潛力 — 利用RPA為企業效率加分
發現RPA技術的無限潛力！了解如何透過Robotic Process Automation（RPA）實現自動化，克服企業勞動力短缺的挑戰。我們分享RPA的優勢、限制以及選擇最適合您企業的軟體的關鍵評估指標。結合AI技術，為您的業務帶來效率和質量的提升。不要錯過這個關於RPA未來發展趨勢的深入指南!
你知道嗎？無論是哪個 Excel 功能，我們都可以透過 RPA 將 Excel 與其他應用程式進行串接及互動，因此 RPAI 數位優化器這次要來分享的是如何透過 Microsoft Power Automate 進行 RPA 流程開發，呼叫你手中的各種巨集檔！