1 功能简介

拾取浏览器界面经常有好多差不多位置的框子，拾取不到正确的，自己写了个 css-selector 不知道对不对，这是编写机器人过程中经常遇到的问题。给机器人设计人员代理了很大的障碍和不确定。

为了让程序员具备外科手术级别的深入能力，我们提供一个专门的工具-浏览器Selector调试工具，提供界面浏览器帮助你准确定位控件并撰写自己需要的查找路径，无需再使用浏览器自身的源代码调试工具。

• 支持 IE、Firefox、Chrome – 能捕捉当前页面 Dom 树供你浏览查看 – 支持多种模式的查找路径，包括：短路径、ID、类和属性、长路径等

• 支持基于勾选自定义 CSS selector

• 支持手工书写自定义 CSS selecotr，并有辅助工具，生成常见的 selector

• 支持在浏览器页面中立即定位自定的查找路径 – 支持在 DOM 树中重新选定组件进行自定义

• 支持 DOM 树的搜索 – 支持将定义好的查找路径保存到对应的控件操作详情中去
  

2 设计配置

2.1 打开浏览器selector调试工具

对浏览器网页组件完成拾取操作后，右侧“目标属性”栏中，“查找路径”选项指的就是当前元素对应的Selector

点击右侧的画笔按钮，即可打开浏览器调试工具，左侧Dom Tree区域中默认背景色显示且字体为红色的即是当前所拾取元素的Selector信息。

3 菜单功能使用

在使用菜单功能时，正在被使用的功能会以背景灰亮突出显示。

3.1 查找

点击“查找”按钮即可显示输入框，在输入框中输入需要查找的selector内容即可

• 查找匹配的内容会在Dom Tree中自动跳转，并背景色高亮显示

• 可以输入任意内容，如id、class、name、text、div等都可以

• 按回车键可继续查找下一个相同的内容，直到Dom Tree中没有了，再重新从头开始查找，类似于word里的查找功能

3.2 高亮显示

点击“高亮”按钮，屏幕中会显示蓝色的框

当你切换回浏览器，会发现当前selector对应的页面元素会高亮显示，帮助你确认浏览器元素

3.3 保存

选择或编辑完相应的selector，即可点击“保存”按钮进行保存

点击"保存"后自动关闭调试工具，并将选择的结果自动填入“查找路径”选项中：

• 如点击“保存”操作无效，请注意调试工具左下方的提示信息，提示Status:selector check failed，语法检查错误的情况下，无法对selector进行“保存”操作

• 保存之前建议请先进行语法检查的操作，确保语法及selector对应无误

3.4 语法检查

点击“【emoji】️”按钮，可对当前选择的selector进行语法检查是否可以找到所拾取的控件，没有问题，在调试工具左下角则会显示Status:check success

• 如果语法错误或你编辑的selector不能对应当前拾取的元素，则会在工具下方以红色文字显示。Status:check failed

• 语法检查错误的情况下，无法进行“保存”的操作

4 区域功能使用

4.1 DOM Tree区域

1、借助DOM Tree，我们能直接而且简易的查看HTML页面上的每个标记内容，再也不用切换回浏览器去使用开发者选项来查看源代码结构了

• 这里显示当前HTML页面的完整信息

• 有背景色覆盖且是红色字体的标记就是当前拾取元素对应的Selector

• 点击标记记录前的箭头，可以实现层级的收和放

2、如果层次搞错了，可以在需要的层次标记上点击右键，选择“Set as Target Element”，设置为目标元素，即可重新定位该元素。

• 右键点击“Set as Target Elemant”实现重新定位元素，再点击保存则退出窗口界面。在“查找路径”参数属性中保存该路径。

• 右键点击“Highlight”实现高亮显示功能（用法见文中2.2章节）

4.2 Selector选择及显示区域

中间区域为Selector展示及选择区域，这里会显示所拾取元素的默认CSS Selector信息，可以进行Selector的选择。 对于选择selector来说，需要判断并选择不会变的selector，那种刷新页面后或重新打开页面后就变更的selector是不能选择的，比如“#id-123154623”这种后面数字随机生成的就不能选择作为selector去使用

• 这里的选项是单选。

• 任意一条记录，就代表了所拾取元素在Html中的位置，不是所有记录集合才能代表。

选择一条记录后，在下方的显示区域，会显示完整的Selector信息 。

在显示区域中，你也可以自己编辑Selector，当然，前提是你写的得是正确的Selector，不然检查依然会保存，导致无法保存使用

4.3 自定义Selector属性区域

如果你需要自定义selector，可选中selector中选中一条记录，在右侧窗口显示attribute，通过勾选快速生成自己需要的selector，这样不用学 css selector 也有一定定制开发能力了。

你也可以根据提示编写自己需要的 selector：

• [attr=value] 表示具有属性名attr的元素，且该属性的值等于目标值value。

• [attr~=value] 表示具有属性名attr的元素，该属性值是以空格分隔的一列单词，且其中之一的值等于目标值value。

• [attr|=value] 表示具有属性名attr的元素，其值要么等于目标value，要么为以value值开头，随后紧接连字符-（U + 002D）的值。它通常用于语言子代码匹配。

• [attr^=value] 表示具有属性名attr的元素，且该属性的值以value为前缀。

• [attr$=value] 代表具有的属性名attr的元素，且该属性的值以value为后缀。

• [attr*=value] 表示具有属性名attr的元素，且该属性的字符串中至少包含一个value值