為了【打工助手-數(shù)據(jù)錄入輔助工具】能夠快速上手，接下來做一個(gè)入門級(jí)的實(shí)戰(zhàn)演示。

目錄

一、演示準(zhǔn)備

    1.準(zhǔn)備需要錄入數(shù)據(jù)的頁面

    2.準(zhǔn)備需要錄入的數(shù)據(jù)

二、編寫數(shù)據(jù)入錄執(zhí)行腳本

    1.下載腳本模板

    2.腳本字段說明

    3.開始編寫

        3.1操作按鈕

        3.2操作輸入框

        3.3操作單選

        3.4編排好的流程

三、運(yùn)行效果

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

一、演示準(zhǔn)備

1.準(zhǔn)備需要錄入數(shù)據(jù)的頁面

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

（2）點(diǎn)擊【新增】按鈕，出現(xiàn)【添加崗位】彈窗。

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

2、準(zhǔn)備需要錄入的數(shù)據(jù)

根據(jù)頁面，假設(shè)有以下數(shù)據(jù)需要錄入

二、編寫數(shù)據(jù)錄入執(zhí)行腳本

1.下載腳本模板

點(diǎn)擊插件的【編排流程】按鈕，進(jìn)入到流程編制頁面。點(diǎn)擊【下載模板】按鈕，下載標(biāo)準(zhǔn)版的流程模板。

2.腳本字段說明

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

A列：orderNo，序號(hào)。用于標(biāo)注流程執(zhí)行的順序。

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

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

D列：action，操作方式，input填充、click點(diǎn)擊、mousedown鼠標(biāo)下壓等。

E列：value，需要填充的或點(diǎn)擊的值，結(jié)合【數(shù)據(jù)加載】使用，如果需要填充或點(diǎn)擊【數(shù)據(jù)加載】中的某一列，則填寫列編號(hào)。

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

G列：loopFlag，循環(huán)標(biāo)志位，兩行之間標(biāo)志位相同，則中間的操作會(huì)循環(huán)執(zhí)行。

H列：loopCount，循環(huán)次數(shù)，表示標(biāo)志位中間的操作需要循環(huán)的次數(shù)。

I列：condition，執(zhí)行條件，表示該條流程執(zhí)行的條件，默認(rèn)正常執(zhí)行。

3.開始編寫

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

3.1 操作按鈕

在最開始的時(shí)候，要點(diǎn)擊【+新增】按鈕，在結(jié)束的時(shí)候，要點(diǎn)擊【取消】按鈕。

通過查看元素的方式，獲取【+新增】按鈕的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

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

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

為了精確定位，你可以把.is-plain加進(jìn)去，也可以把value的值，設(shè)置成“新增”。因?yàn)楫?dāng)元素有多個(gè)的時(shí)候，程序會(huì)自動(dòng)去查找文字是“新增”的這個(gè)元素。

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

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

3.2 操作輸入框

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

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

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

b.元素的html結(jié)構(gòu)為

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

則selector可以取值為

input[type="text"][placeholder="請(qǐng)輸入崗位名稱"].el-input__inner

但是，當(dāng)我們用document.querySelectorAll('input[type="text"][placeholder="請(qǐng)輸入崗位名稱"].el-input__inner')進(jìn)行元素獲取查看時(shí)，發(fā)現(xiàn)竟然有2個(gè)

很明顯，頁面里面，有2個(gè)一樣的輸入框，這時(shí)候，需要進(jìn)一步分析定位。

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

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

再結(jié)合input[type="text"][placeholder="請(qǐng)輸入崗位名稱"].el-input__inner

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

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

或者，可以看到，這個(gè)頁面比較簡(jiǎn)單，沒有特殊的元素變動(dòng)，也可以直接在該元素上右鍵，選擇“copy->copy selector”，獲取該元素的絕對(duì)路徑的selector值

/**絕對(duì)路徑**/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="請(qǐng)輸入編碼名稱"].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="請(qǐng)輸入內(nèi)容"].el-textarea__inner

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

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

3.3 操作單選

右鍵查看單選按鈕的html元素，因?yàn)橐鶕?jù)數(shù)據(jù)表里的值去選擇對(duì)應(yīng)的單選按鈕，所以，獲取到的selector應(yīng)該是多個(gè)值，再?gòu)亩鄠€(gè)值中選擇文字是數(shù)據(jù)表里對(duì)應(yīng)值的單選框。

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

進(jìn)一步分析發(fā)現(xiàn)，可以和輸入框一樣，通過多加幾層定位選擇器，進(jìn)行更精確的定位。

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

所以選擇器可以是

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

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

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

action的值，因?yàn)檫@個(gè)地方是需要點(diǎn)擊的，所以填寫click
 

3.4 編排好的流程

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

可以參照數(shù)據(jù)再檢查一下要填寫的值

三、運(yùn)行效果

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

閱讀原文：原文鏈接