Sencha Studio 监视工具（ Inspect Tool）| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Sencha Studio 监视工具（ Inspect Tool）

## Sencha Studio 监视工具（ Inspect Tool）
### Inspect Tool（监视工具）
Inspect Tool是Sencha Studio中的一个功能，这个工具可以帮助我们快速定位页面中的元素或组件，并且可以自动插入代码。
### Inspect Tool使用实例
在 “8.4 Sencha Studio设置与使用”中介绍了在Sencha Studio中测试京东的搜索功能，在那一节中通过Chrome开发工具定位了关键字输入框和开始搜索的点击按钮。
如果对Chrome开发工具不熟悉，或是对HTML DOM知识不熟悉，又或是页面元素很复杂，想更快速的定位页面元素要怎么办呢？这个时候Inspect Tool就又用武之地了。
同样以上面章节的京东搜索的测试为例，介绍Inspect Tool的使用入门。
在JD的测试场景节点下增加一个测试套件，取名 InspectTool，添加后的效果如下：
![](/upload/picture/2022-09-27/upload_e6177c1c2bf07431e183a74a8f3fd18e.png)
将鼠标放在it的代码块中，点击上方的“Inspect”按钮
![](/upload/picture/2022-09-27/upload_edc80d107426e184650b8fc11e962391.png)
接下来会弹出选择浏览器的对话框， 这里选择Chrome
选择浏览器之后，稍后片刻会打开一个浏览器窗口，地址是：[http://127.0.0.1:8700/?orionAgentId=1&orionRecording=true](http://127.0.0.1:8700/?orionAgentId=1&orionRecording=true)
当鼠标选中页面中的元素时，页面元素会有两个红色的虚线框标识出来，双击这个页面元素会添加到Sencha Studio的监视窗口中，如下图所示：
![](/upload/picture/2022-09-27/upload_ce5fdbef01e689dce0e905597195f1b6.png)
这里将关键字输入框和搜索按钮选中，选中之后点击“Insert API Code”
![](/upload/picture/2022-09-27/upload_9eddfc86ac275b6d70cc082d81f963d4.png)
点击插入代码之后，监视窗口会关闭，在测试套件的代码文件（InspectTool.js）中会多出两行
```javascript
ST.element('@keyword');
ST.element('@/div[2]/form/input[4]');
```

这两行就是定位输入框和按钮的代码。
7. 补全在输入框输入关键字，点击定位的按钮的代码。完整代码如下：
```javascript
describe("InspectTool",function(){
	it("should pass",function(){//鼠标放在这一行用于监视获取页面元素定位
		ST.element('@keyword').type('Spring+Spring MVC+MyBatis整合开发实战 机械工业出版社');
		ST.element('@/div[2]/form/input[4]').click();}
);
});
```

运行测试
在测试场景下进行测试，点击Run按钮运行测试。

运行后可以得到“8.4 Sencha Studio设置与使用”中相同的测试效果，即自动开启京东搜索页面，自动输入关键字，自动点击搜索按钮，呈现搜索结果页面。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Sencha Studio 监视工具（ Inspect Tool）

网站导航