為了【打工助手-數據錄入輔助工具】能夠快速上手，接下來做一個入門級的實戰演示。

目錄

一、演示準備

    1.準備需要錄入數據的頁面

    2.準備需要錄入的數據

二、編寫數據入錄執行腳本

    1.下載腳本模板

    2.腳本字段說明

    3.開始編寫

        3.1操作按鈕

        3.2操作輸入框

        3.3操作單選

        3.4編排好的流程

三、運行效果

============================

一、演示準備

1.準備需要錄入數據的頁面

（1）還是以若依的演示平臺為例，登錄若依平臺（https://vue.ruoyi.vip/index） 后，進入菜單【系統管理-崗位管理】。

（2）點擊【新增】按鈕，出現【添加崗位】彈窗。

（3）彈窗中，需要填寫的字段為“崗位名稱”、“崗位編碼”、“崗位順序”、“崗位狀態”、“備注”這些內容。

2、準備需要錄入的數據

根據頁面，假設有以下數據需要錄入

二、編寫數據錄入執行腳本

1.下載腳本模板

點擊插件的【編排流程】按鈕，進入到流程編制頁面。點擊【下載模板】按鈕，下載標準版的流程模板。

2.腳本字段說明

在編寫腳本之前，先回顧一下腳本的各個字段

A列：orderNo，序號。用于標注流程執行的順序。

B列：desc，描述。用于描述本次操作執行了什么。

C列：selector，頁面元素的選擇器。

D列：action，操作方式，input填充、click點擊、mousedown鼠標下壓等。

E列：value，需要填充的或點擊的值，結合【數據加載】使用，如果需要填充或點擊【數據加載】中的某一列，則填寫列編號。

F列：delayTm，操作延遲執行時間，默認為0，若有些操作需要等待頁面加載完成后執行，則可以填預估的時間，如2，則延遲2秒執行。

G列：loopFlag，循環標志位，兩行之間標志位相同，則中間的操作會循環執行。

H列：loopCount，循環次數，表示標志位中間的操作需要循環的次數。

I列：condition，執行條件，表示該條流程執行的條件，默認正常執行。

3.開始編寫

先觀察頁面，我們接下來要按照人工操作的流程編寫執行腳本，按照“點擊新增按鈕”->“填寫崗位名稱”->“填寫崗位編碼”->“填寫崗位順序”->“選擇崗位狀態”->“填寫備注說明”->“點擊取消按鈕”的順序，進行流程編寫。

3.1 操作按鈕

在最開始的時候，要點擊【+新增】按鈕，在結束的時候，要點擊【取消】按鈕。

通過查看元素的方式，獲取【+新增】按鈕的html為

<button type="button" class="el-button el-button--primary el-button--mini is-plain"></button>

則selector可以是button[type="button"].el-button.el-button--primary.el-button--mini

注意，這個button的class分別是el-button、el-button--primary、el-button--mini，所以，在寫selector表達式的時候，用.號的同時，不要有空格，需要緊密的挨在一起，表示class既有el-button、也有el-button--primary、還有el-button--mini

另外注意，這個button的class有4個，但我只寫了3個，在使用document.querySelectorAll('button[type="button"].el-button.el-button--primary.el-button--mini')進行查看的時候，發現有兩個元素

為了精確定位，你可以把.is-plain加進去，也可以把value的值，設置成“新增”。因為當元素有多個的時候，程序會自動去查找文字是“新增”的這個元素。

同理，我們的取消按鈕的selector為button.el-button.el-button--default.el-button--medium，也有兩個，可以繼續設置value的值為“取消”

/**點擊新增按鈕的selector**/button[type="button"].el-button.el-button--primary.el-button--mini
/**點擊取消按鈕的selector**/button.el-button.el-button--default.el-button--medium

3.2 操作輸入框

“填寫崗位名稱”、“填寫崗位編碼”、“填寫崗位順序”、“填寫備注說明”，都是輸入框，可以按同樣的方式進行selector獲取。

以“填寫崗位名稱”的selector為例，操作步驟如下：

a.在“崗位名稱”輸入框上右鍵，選擇“檢查”，可以查詢到元素的html結構

b.元素的html結構為

<input type="text" autocomplete="off" placeholder="請輸入崗位名稱" class="el-input__inner">

則selector可以取值為

input[type="text"][placeholder="請輸入崗位名稱"].el-input__inner

但是，當我們用document.querySelectorAll('input[type="text"][placeholder="請輸入崗位名稱"].el-input__inner')進行元素獲取查看時，發現竟然有2個

很明顯，頁面里面，有2個一樣的輸入框，這時候，需要進一步分析定位。

我們可以看到，我們需要定位的元素，在彈窗里，所以，可以先找到彈窗，在從彈窗繼續找輸入框

找彈窗，可以用div[role="dialog"][aria-label="添加崗位"]

再結合input[type="text"][placeholder="請輸入崗位名稱"].el-input__inner

我們的輸入框就可以寫成這樣（注意，兩個selector中間有空格）

/**填寫崗位名稱的selector**/div[role="dialog"][aria-label="添加崗位"] input[type="text"][placeholder="請輸入崗位名稱"].el-input__inner

或者，可以看到，這個頁面比較簡單，沒有特殊的元素變動，也可以直接在該元素上右鍵，選擇“copy->copy selector”，獲取該元素的絕對路徑的selector值

/**絕對路徑**/body > div:nth-child(15) > div > div.el-dialog__body > form > div.el-form-item.is-error.is-required.el-form-item--medium > div > div.el-input.el-input--medium > input

同理，可以得到“填寫崗位編碼”、“填寫崗位順序”、“填寫備注說明”的selector

/**填寫崗位編碼”的selector**/div[role="dialog"][aria-label="添加崗位"] input[type="text"][placeholder="請輸入編碼名稱"].el-input__inner
/**填寫崗位順序”的selector**/div[role="dialog"][aria-label="添加崗位"] input[type="text"][role="spinbutton"].el-input__inner
/**填寫備注說明”的selector**/div[role="dialog"][aria-label="添加崗位"] textarea[placeholder="請輸入內容"].el-textarea__inner

這幾個元素的action，都是輸入操作，所以填寫input

value，需要填充的值，可以看到，在需要填充的數據Excel里，是B、C、D、F列的值，所以，填寫{B}、{C}、{D}、{F}

3.3 操作單選

右鍵查看單選按鈕的html元素，因為要根據數據表里的值去選擇對應的單選按鈕，所以，獲取到的selector應該是多個值，再從多個值中選擇文字是數據表里對應值的單選框。

先按照label[role="radio"]這個selector去取值，通過在console框輸入document.querySelectorAll('label[role="radio"]')，我們發現竟然有4個元素，與我們看到的2個元素不一樣，說明還需要進一步的定位

進一步分析發現，可以和輸入框一樣，通過多加幾層定位選擇器，進行更精確的定位。

我們可以先找到role="dialog"并且aria-label="添加崗位"的div元素，再在里面查找role="radiogroup"的div，再繼續查找role="radio"的label

所以選擇器可以是

/** 選擇崗位狀態的selector **/div[role="dialog"][aria-label="添加崗位"] div[role="radiogroup"] label[role="radio"]

注意：div[role="dialog"][aria-label="添加崗位"]和div[role="radiogroup"]和label[role="radio"]，之間，都有一個空格，表示一層一層向下查找。這樣就找到了對應的2個label元素。

value的值，我們可以看到，是需要根據數據表Excel的E列進行獲取，所以value填{E}

action的值，因為這個地方是需要點擊的，所以填寫click
 

3.4 編排好的流程

根據上述方法，編排好的流程Excel如下，并把sheet頁的名字命名為“崗位管理錄入腳本”：

可以參照數據再檢查一下要填寫的值

三、運行效果

分別把Excel文件，加載到【添加數據】、【流程編排】頁面，選擇第2行數據，開始執行

閱讀原文：原文鏈接