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 數位優化器
延伸學習資源
為什麼會看到廣告
138會員
116內容數
我們是以「機器人流程自動化（RPA）」結合「人工智慧（AI）」為主題的中文學習社群，旨在分享 RPA + AI 的學習資源、應用實例和最新發展趨勢，讓工作者透過自動化工具的有效應用，創造數位優化與轉型契機，讓我們一起由簡單開始，成就不簡單！
留言0
查看全部
你可能也想看
Google News 追蹤
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
JSDoc 全名是 JavaScript Documentation，顧名思義是為 JavaScript 所使用的 API 文件，在程式碼內透過註解的方式撰寫，運行後 JSDoc 會自動掃描註解內容，並生成一份網頁版的文件，對於沒有使用 Typescript 開發的專案，也
UiPath 是一家領先的機器人流程自動化（RPA）公司，總部位於紐約。本篇文章介紹了 UiPath 最新推出的 Automation Hub 和與 Microsoft 的合作等重要新聞，以及其在市場上的表現和競爭對手情況。文章最後還分享了未來可能的行動和發展趨勢。歡迎留言交流和討論！
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 Node.js 等。由於 JavaScript 語法上的一些缺點，軟體工程師們又設計出了 CoffeeScript、TypeScript 和
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言，應用範圍廣泛，包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
如果你曾經撰寫過網頁，那你一定接觸過 JavaScript
無論是在 NodeJs 或是瀏覽器中運行。
但你有沒有想過，我們寫下的 JS 程式碼，這些看似單純的英文和符號，是如何被轉化為機器能夠理解和執行的程式呢？
今天，讓我們一起深入了解其中的核心主角
——Google 開發的開源 Java
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
學習JavaScript的理由有很多，包括容易學習的程式語言、互動式體驗、多功能性、跨平臺、社群和資源豐富、高市場需求。此外，文章提供了設計和前端教學的相關資源連結。文章中還提到了一些與學習JavaScript相關的教學文章和影音教學資源。
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
JSDoc 全名是 JavaScript Documentation，顧名思義是為 JavaScript 所使用的 API 文件，在程式碼內透過註解的方式撰寫，運行後 JSDoc 會自動掃描註解內容，並生成一份網頁版的文件，對於沒有使用 Typescript 開發的專案，也
UiPath 是一家領先的機器人流程自動化（RPA）公司，總部位於紐約。本篇文章介紹了 UiPath 最新推出的 Automation Hub 和與 Microsoft 的合作等重要新聞，以及其在市場上的表現和競爭對手情況。文章最後還分享了未來可能的行動和發展趨勢。歡迎留言交流和討論！
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 Node.js 等。由於 JavaScript 語法上的一些缺點，軟體工程師們又設計出了 CoffeeScript、TypeScript 和
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言，應用範圍廣泛，包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
如果你曾經撰寫過網頁，那你一定接觸過 JavaScript
無論是在 NodeJs 或是瀏覽器中運行。
但你有沒有想過，我們寫下的 JS 程式碼，這些看似單純的英文和符號，是如何被轉化為機器能夠理解和執行的程式呢？
今天，讓我們一起深入了解其中的核心主角
——Google 開發的開源 Java
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
學習JavaScript的理由有很多，包括容易學習的程式語言、互動式體驗、多功能性、跨平臺、社群和資源豐富、高市場需求。此外，文章提供了設計和前端教學的相關資源連結。文章中還提到了一些與學習JavaScript相關的教學文章和影音教學資源。