为了【打工助手-数据录入辅助工具】能够快速上手，接下来做一个入门级的实战演示。

目录

一、演示准备

    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行数据，开始执行

阅读原文：原文链接