RPA 功能｜UiPath 如何和網頁互動： Inject JS Script！

RPAI 數位優化器

發佈於最強大 UiPath 功能教學

2022/10/16閱讀時間約 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 列表可以找到此一功能，如下圖所示：

UiPath功能介面：Inject JS Script

另外，由於 Inject JS Script 必須和網頁互動，因此通常需搭配和瀏覽器相關的功能，如「Open Browser」、「Use Application/Browser」等！

功能參數說明

點選 Inject JS Script，便可看到如下方的 Activity 結果。
我們就先來聊聊圖片中所能點選的各個欄位：

Activity: Inject JS Script

Script code：
這個欄位主要是提供用戶在 UiPath 上直接輸入指定的 JS 語法。此外，如果已經習慣寫在 NotePad 或 JS 檔的用戶，也可以先在他處撰寫完成後，將檔案路徑填上以呼叫這些 JS 語法，稍後的範例練習也將以此作法進行。
Indicate element inside browser：
如果今天我們想和網頁互動的方式是：點擊特定案件或表格，就可以透過此功能來告訴 RPA 機器人該元件的位置，然而由於 JS 語法本身就可以指定網頁的元件位置，這個功能通常比較少被使用。

而當我們點選 Inject JS Script，便可在介面右側的 Properties 設定相關參數（如下圖所示），接下來將介紹這些參數所代表的意涵：

Inject JS Script 參數介面

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 檔案，以供後續檔案存取。

將記事本的副檔名改成 .js

2. 將剛剛設定好的 JS 檔點擊右鍵並進行編輯，即可在上面撰寫 JS 語法。

3. 我們所撰寫的 JS 語法如下，意思是希望指定特定的瀏覽器視窗透過 alert 功能，跳出文字框以提醒用戶一些資訊，而我們先將資訊暫定為「Hello World!」

function(element){
	alert("Hello World!") ;
}

4. 完成 JS 檔案的語法後，我們就可以來到 UiPath 進行操作。我們先用「Open Browser」功能來打開指定網頁，我們可以將其 url 指定為 Google 首頁的路徑。

「Open Browser」功能介面

註：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 數位優化器