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 E