流程定义之基础篇
1、流程说明
在《流程定义之入门篇》一文中，我们已经清楚了什么是流程定义，以及如何打开流程编辑器。在本文中，我们假定要定义一个非常简单的流程： 打开新标签页，访问eBay首页，等待页面加载完毕后，在eBay首页的Search框里搜索移动电源“Power Bank”。 就是这么简单的一个流程，我们来看一下如何开始此流程定义的编辑工作。
2、打开新标签页并访问网址
显然，第一步应该是打开新标签页。在流程编辑器中，请拖拽左侧流程节点面板中的“新建标签”流程节点至右侧内容区，如下图所示：
《通过拖拽左侧的流程节点至右侧内容区来完成流程的编辑》
然后，我们再拖拽流程节点“访问网址”至右侧内容区，在对话框中输入ebay官网首页，并将等待时间设置为5秒，如下图所示：
《访问网址流程》
3、流程定义的执行预览
此时，我们点击“执行预览”菜单，我们可以发觉： 在流程编辑器的下侧，会输出该流程的日志，同时，右侧作为辅助工具的花漾指纹浏览器被RPA引擎所操控，自动的按照刚才流程定义中的内容予以执行， 具体表现在：花漾指纹浏览器首先打开了一个新的标签页，然后访问eBay首页，等待5秒钟后，流程执行完毕。
《流程预览》
4、网页元素
下面我们要谈及一个非常重要的概念：网页元素——这需要您具备一定的HTML知识。 我们知道，一个网页本质上是由若干个节点组成的一棵树，以下是一个非常简单的html页面的源码以及该页面被浏览器“渲染”后的展示效果，如下图所示：
《一个最简单的网页展示》
如果我们观察此页面的源码，可以发觉，本质上这个页面就是一棵树，根节点是<html>，下面有一个子节点 <body>，再往下还有 <h1> 和两个 <p> 孙节点，而在第二个 <p> 节点下，还有一个 <a> 孙孙节点。由此，我们可以得出第一个结论： 一个网页页面本质上是一棵树，树上的每个节点可以称其为“DOM节点”或者“页面节点”，有时也称其为“网页元素”。
下一个问题是：如何定位一个网页元素？还是以上述网页为例，如果我们要定位元素 <body>，显然，只需要写 body 即可，为何？ 因为整个页面只有一个 body。定位 <h1> 元素也是如此，但考虑到它的所处位置，我们一般写作：body > h1 ，代表它是位于 body 下面的子节点。 我们把上面的这种定位方法称之为网页元素的selector，换言之，通过selector可以定位网页中的某个页面节点。
问题来了，如果要定位 <p> 节点，显然会麻烦一些，因为在body元素下面有两个 <p> 节点，此时，定位第二个 <p> 节点，我们一般会写作： body > p:nth-child(3)。
就此打住，这个实在有些复杂，超纲了，回到我们编辑此流程定义的出发点——我们的目标是想知道如何编辑RPA流程定义，为什么需要学习这些复杂的知识？ 幸运的是，花漾为我们提供了网页元素选择器，辅助我们编写网页元素的selector。由此，我们得到第二个结论： 可以通过selector定位页面中的网页元素，并可以通过花漾提供的网页元素选择器帮助我们编写网页元素的selector。
5、网页元素选择器
在流程定义编辑过程中，凡是需要填写网页元素selector的输入框，其右侧都会带有一个“激活网页元素选择器”的图标，点击此图标， 会在作为辅助工具的花漾指纹浏览器中，自动唤醒网页元素选择器，如下图所示：
《网页元素选择器》
回到刚才“访问网址”的流程节点，我们设置让其等待5秒钟——显然，这并不是一个好的策略，因为在这里我们做了一个假设：在5秒钟之内页面必须加载完毕，但事实上， 考虑到网络的各种不可控的异常状况，设置5秒钟的等待时间很容易导致流程失败。我们的目标是希望网页加载完毕后，能够在search框里输入要检索的内容，因此， 我们可以把网页是否加载完毕的判断依据修订为：等待search框所对应的页面节点出现。换言之，只要search框所对应的页面节点出现了， 我们就认为网页加载完毕并可以执行后续流程了，因此，这里需要对search框这个网页元素进行定位。
在访问网址的属性对话框中，点击(1)等待页面节点出现，(2)点击右侧唤醒网页元素选择器的图标按钮，此时，会在花漾指纹浏览器中出现网页元素选择器， (3)移动鼠标至search框区域，search框会被红色蒙层蒙住，点击鼠标代表选中此节点，网页元素选择框中会出现search框的selector， (4)点击确定，(5)会将search框的selector返回到流程编辑器， 点击确定，代表“访问网址”的判断条件修订为：等待eBay首页中search框所对应的网页元素出现则认为页面加载完毕。
《通过网页元素选择器辅助编写网页元素selector》
重新点击“执行预览”，可以发现，流程执行无误，但此时，判断网页是否加载完毕的标准发生了变化，由以前机械的等待5秒钟就认为网页加载完毕， 修订为：当search框正常显示后则认为网页加载完毕，当然，更保守的做法是，在此流程节点的通用属性中设置执行下一流程节点的时间间隔为2秒钟， 这样显然更科学、更像是人的操作，在下文中有提及。
《访问网址并等待某个页面节点出现的流程执行完毕的状况》
6、输入内容与键盘按键
回到我们的流程本身，当eBay官网首页加载完毕后，我们需要在search框中输入 power bank，并按回车，进行检索。
在节点列表中寻找到“输入内容”流程节点，拖拽到流程编辑器的内容区，如下图所示：
《输入内容》
在节点列表中寻找到“键盘按键”节点，拖拽到流程编辑器的内容区，选择“回车键”，如下图所示：
《键盘按键》
同时，我们也知道，当按“回车键”开始检索后，eBay站点需要一定的时间才能够返回搜索结果页面，因此，我们可以在“键盘按键”这个节点中， 定义执行下一节点的时间间隔。(1)在“键盘按键”的属性对话框中，(2)切换至“通用属性”，(3)将“间隔时间”修订为“自定义5秒”，如下图所示：
《执行下一流程节点的时间间隔》
至此，本阶段的流程定义编辑完成，我们现在可以执行预览，可以看到，
- 作为辅助工具的花漾指纹浏览器新开了一个标签页，并访问了eBay官网
- 等待search框正常显示后，花漾指纹浏览器自动在search框中输入“power bank”，并按回车键执行商品检索
- 等待5秒钟后，流程自动结束
流程成功执行后的效果如下图所示：
《成功执行eBay商品检索的流程定义》
7、总结
本文我们了解了如何编辑一个非常简单的流程定义，并知道了什么是网页元素，以及什么是网页元素的selector； 在花漾中，可以通过花漾为您提供的网页元素选择器辅助您完成网页元素的定位与selector的编写。
请进一步阅读 《流程定义之进阶篇》一文。