RPA 功能|UiPath 如何和網頁互動: Inject JS Script!

更新於 發佈於 閱讀時間約 9 分鐘

在 UiPath 的學習道路上,我們常會對這些各項功能(Activities)、參數(Properties)感到混亂,因此 RPAI 數位優化器的系列文章將會對這些功能參數進行解說。

這篇文章將和大家介紹「Inject JS Script」功能!當我們想要更精準地與網頁進行互動、操作網頁元件時,就千萬不能錯過這個功能,可以幫助 RPA 機器人更精準地操作流程!

raw-image
在開始閱讀正文之前,也別忘了先追蹤我們的 臉書粉絲專頁方格子帳號

前言:JavaScript 是甚麼?

JavaScript 是一種能在瀏覽器裡直接執行的程式語言,簡單來說可以將其想成一個腳本語言,透過此來操控網站的所有元件,像是建立各種按鈕(Button)、嵌入表格、影片等,賦予了網頁互動、處理和創造新內容的可能性。

事實上,我們在網頁上所看到的所有內容,背後大多都有近似 JavaScript 的語言腳本所串連而成,若點擊鍵盤的「F12」,即可看到網頁背後的程式碼。以方格子首頁為例,點擊「F12」的元素後,即可得到如下圖,圖內資訊便是這個頁面背後的程式碼,標記著該頁面的所有元件。

raw-image

舉例來說,如果我們將上圖所匡列的「編輯嚴選」的編輯二字刪除,就可以發現能和網頁進行互動和調整,如下圖僅剩「嚴選」二字喔!

備註:只有操作者可以看得到這個改變,其他人看不到喔
raw-image

當然,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 語法,做出如點擊按鈕、搜尋欄打字、取得表格值等行為。

raw-image

當然我們也可以透過 UiPath 內建的其他功能來達成,如 Get Text功能便可以讓我們透過 Take Informative Screenshot的圖片選取方式取得內容,不過實務上,Inject JS Script 其實還是較穩定的網頁互動方式。

我們在 UiPath介面左側的 Activities 列表可以找到此一功能,如下圖所示:

raw-image

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


功能參數說明

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

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

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

raw-image
  • 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 語法所設定的對話提示框:

  1. 我們需要先開啟一個記事本,並將其副檔名改成 .js,如下圖檔名為「code.js」,如此一來便可以變成 JS 檔案,以供後續檔案存取。
raw-image

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

raw-image

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

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

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

raw-image
註:UiPath 的最新版本會使用 Use Application/Browser 來取代 Open Browser,後續會再和各位介紹。

5. 接著我們打開 Inject JS Script 功能,因為事前已經將 JS 語法寫入 JS 檔中,因此下圖 Script code 就可以直接填寫檔案路徑,將該檔案呼叫出來即可。

raw-image
註:此案例為簡單示範此一功能,只有填寫檔案路徑,否則多數情況因應各種需求,還是需要點選 Properties 進行進階設定,包含注入參數、設定輸出值等。

6. 執行流程後,我們就可以看到機器人將 Google 首頁打開,並且與網頁互動,成功跳出Hello World!,如此一來,這個練習便大功告成!

raw-image

結語與心得

RPAI 數位優化器認為,Inject JS Script 功能的實用度為四顆星!透過這個功能,我們可以處理所有和瀏覽器有關的操作,不過想必仍會有人好奇,不是也可透過 UiPath 其他圖片選取的功能處理嗎?

答案是對的!而這也是 RPA 之所以直覺與強大之處,然而不同網頁背後的架構邏輯不一定相同,有時難免會遇到無法用圖片選取的方式來操作流程,此時 Inject JS Script 或許就是另一個可行的解決方案。

雖然乍看之下,要我們理解這些 JS 語法頗為挑戰,不過熟悉之後就會發現,我們主要只會使用某些特定語法而已,RPAI 數位優化器未來會再分享這些實用語法,透過理解這些功能,使工作更加順暢與自動化,讓我們一起 Work Smart!

這些功能雖然簡單,卻是我們創造自動化流程的基石,
讓我們一起由簡單開始,成就不簡單!
如果你/妳喜歡這篇文章,歡迎點點愛心或留言,讓我們相互交流和成長!
這次的分享到此告一段落,想了解更多 RPA + AI 與數位轉型的最新趨勢與觀點、RPA 軟體功能介紹及實務應用案例,也歡迎追蹤 RPAI 數位優化器的社群和我們交流互動,我們下次見!
🚀 Instagram:RPAI 數位優化器
🚀 臉書粉絲專頁:RPAI 數位優化器
🚀 YouTube 頻道:RPAI 數位優化器

延伸學習資源

留言
avatar-img
留言分享你的想法!
avatar-img
RPAI 數位優化器
180會員
138內容數
我們是以「機器人流程自動化(RPA)」結合「人工智慧(AI)」為主題的中文學習社群,旨在分享 RPA + AI 的學習資源、應用實例和最新發展趨勢,讓工作者透過自動化工具的有效應用,創造數位優化與轉型契機,讓我們一起由簡單開始,成就不簡單!
RPAI 數位優化器的其他內容
2024/12/22
最近在使用UiPath的時候,發現改版新增了AI功能!它就叫作 Autopilot,藉由它的協助,可以大幅減少初學者摸索與試錯的時間,以下的舉例將結合ChatGPT以及UiPath進行開發與debug,期待透過分享,讓更多人能夠善用這些功能,提升開發的效率!
Thumbnail
2024/12/22
最近在使用UiPath的時候,發現改版新增了AI功能!它就叫作 Autopilot,藉由它的協助,可以大幅減少初學者摸索與試錯的時間,以下的舉例將結合ChatGPT以及UiPath進行開發與debug,期待透過分享,讓更多人能夠善用這些功能,提升開發的效率!
Thumbnail
2024/10/04
這篇文章提供了一個詳細的教學,指導讀者如何將 UiPath 開發的自動化流程發佈至 Orchestrator 及設定自動執行的排程。透過步驟包括登入 Orchestrator、建立資料夾、發布流程、設定預約時間等,讀者將能學會有效地管理流程和機器人,進而提升自動化效率。
Thumbnail
2024/10/04
這篇文章提供了一個詳細的教學,指導讀者如何將 UiPath 開發的自動化流程發佈至 Orchestrator 及設定自動執行的排程。透過步驟包括登入 Orchestrator、建立資料夾、發布流程、設定預約時間等,讀者將能學會有效地管理流程和機器人,進而提升自動化效率。
Thumbnail
2024/08/24
在這篇文章中,我們將深入探討如何透過 UiPath 的 Excel 相關功能來協助自動化操作,包括使用 Excel 檔案、讀取範圍、寫入單元格、篩選和插入工作表等技巧,透過具體範例,讀者將能快速上手並理解這些功能的使用方法,提升你的工作效率。
Thumbnail
2024/08/24
在這篇文章中,我們將深入探討如何透過 UiPath 的 Excel 相關功能來協助自動化操作,包括使用 Excel 檔案、讀取範圍、寫入單元格、篩選和插入工作表等技巧,透過具體範例,讀者將能快速上手並理解這些功能的使用方法,提升你的工作效率。
Thumbnail
看更多
你可能也想看
Thumbnail
RPAI 數位優化器在這系列文章中,不會從基本除錯思維或套路開始說明,而是把焦點放在 UiPath 提供哪些除錯工具,透過理解工具使用方式、詳細解釋功能及比較不同功能差異,讓讀者對 UiPath 整個開發核心概念有更深了解,進而讓開發流程更加穩固!
Thumbnail
RPAI 數位優化器在這系列文章中,不會從基本除錯思維或套路開始說明,而是把焦點放在 UiPath 提供哪些除錯工具,透過理解工具使用方式、詳細解釋功能及比較不同功能差異,讓讀者對 UiPath 整個開發核心概念有更深了解,進而讓開發流程更加穩固!
Thumbnail
我們常會使用 Type Into 功能來將資訊自動填入特定表格、欄位或搜尋欄中,然而我們並非英語系國家出身,當表格需要同時填入中英文資訊時,就必須切換語言,這時候該怎麼做呢?RPAI 數位優化器今天要來分享兩個做法,來克服 Type Into 輸入法切換的問題!
Thumbnail
我們常會使用 Type Into 功能來將資訊自動填入特定表格、欄位或搜尋欄中,然而我們並非英語系國家出身,當表格需要同時填入中英文資訊時,就必須切換語言,這時候該怎麼做呢?RPAI 數位優化器今天要來分享兩個做法,來克服 Type Into 輸入法切換的問題!
Thumbnail
在 UiPath 學習道路上,我們有時會不知如何使用各項功能、設定參數,因此 RPAI 數位優化器今天要介紹的是:如何透過 UiPath 功能進行字串結合和拆分,因為不少業務流程都有機會使用到字串,我們在進行流程開發時,即可透過 VB 函式快速進行大量且穩定的操作,因此千萬別錯過這個功能!
Thumbnail
在 UiPath 學習道路上,我們有時會不知如何使用各項功能、設定參數,因此 RPAI 數位優化器今天要介紹的是:如何透過 UiPath 功能進行字串結合和拆分,因為不少業務流程都有機會使用到字串,我們在進行流程開發時,即可透過 VB 函式快速進行大量且穩定的操作,因此千萬別錯過這個功能!
Thumbnail
Excel有個極其實用的工具VBA,讓我們透過語法撰寫對Excel下指令,雖然UiPath也有內建Excel相關功能,不過相較之下VBA可處理更多精細且完整的活動,因此我們在用UiPath開發流程時,可使用Invoke VBA功能呼叫Excel檔案中已撰寫好的VBA語法!
Thumbnail
Excel有個極其實用的工具VBA,讓我們透過語法撰寫對Excel下指令,雖然UiPath也有內建Excel相關功能,不過相較之下VBA可處理更多精細且完整的活動,因此我們在用UiPath開發流程時,可使用Invoke VBA功能呼叫Excel檔案中已撰寫好的VBA語法!
Thumbnail
UiPath除了能在本機端執行工作,也可透過特定功能與網頁互動,例如將網路資訊擷取下來(爬蟲)或自動寄出信件等。我們有介紹過如何在UiPath使用JavaScript增加與網頁互動的彈性,這次要分享Create HTML Content功能,並透過實作案例說明製作客製化信件的流程!
Thumbnail
UiPath除了能在本機端執行工作,也可透過特定功能與網頁互動,例如將網路資訊擷取下來(爬蟲)或自動寄出信件等。我們有介紹過如何在UiPath使用JavaScript增加與網頁互動的彈性,這次要分享Create HTML Content功能,並透過實作案例說明製作客製化信件的流程!
Thumbnail
今天 RPAI 數位優化器要和大家介紹的就是在 UiPath 進行 Excel 操作會使用的:Add Data Row 功能,可以告訴 UiPath 我們希望在 Excel 中的 Datatable 新增一列或一行資料,當我們需要將值加入到 Excel 當中時,就可以考慮使用這個功能。
Thumbnail
今天 RPAI 數位優化器要和大家介紹的就是在 UiPath 進行 Excel 操作會使用的:Add Data Row 功能,可以告訴 UiPath 我們希望在 Excel 中的 Datatable 新增一列或一行資料,當我們需要將值加入到 Excel 當中時,就可以考慮使用這個功能。
Thumbnail
在 UiPath 的學習道路上,我們常會對這些各項功能、參數感到混亂,因此RPA數位優化器的系列文章將會對這些功能參數進行解說。RPAI數位優化器這次要介紹Inject JS Script功能!想要更精準地與網頁進行互動、操作網頁元件時,就千萬不能錯過這個功能,可以幫助RPA機器人更精準地操作流程!
Thumbnail
在 UiPath 的學習道路上,我們常會對這些各項功能、參數感到混亂,因此RPA數位優化器的系列文章將會對這些功能參數進行解說。RPAI數位優化器這次要介紹Inject JS Script功能!想要更精準地與網頁進行互動、操作網頁元件時,就千萬不能錯過這個功能,可以幫助RPA機器人更精準地操作流程!
Thumbnail
在 UiPath 學習道路上,我們常會對各項功能、參數感到混亂,因此 RPAI 數位優化器將會介紹各項功能的使用方式以及參數設定,讓你更快速上手 RPA 流程開發!我們首先要介紹的,是在 UiPath 進行 Excel 相關活動時一定會使用的 Excel Application Scope 功能!
Thumbnail
在 UiPath 學習道路上,我們常會對各項功能、參數感到混亂,因此 RPAI 數位優化器將會介紹各項功能的使用方式以及參數設定,讓你更快速上手 RPA 流程開發!我們首先要介紹的,是在 UiPath 進行 Excel 相關活動時一定會使用的 Excel Application Scope 功能!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News