ChroPath(ChroPath使用) v6.1.3

ChroPath使用插件介绍

ChroPath 5.0

通过一次点击，ChroPath生成唯一的相对xpath、绝对xpath、cssselector、linkText和partialLinkText。ChroPath还可以用作选择器的编辑器。它使编写、编辑、提取和评估任何网页上的XPath查询变得容易。ChroPath还支持iframe、多选择器生成、生成具有自定义属性的相对xpath、自动脚本步骤生成等等。

请通过chropath@autonomiq.io联系ChroPath产品传播者Sanjay Kumar获取支持。

如何使用ChroPath-

1. 右键单击web页面，然后单击Inspect。

2. 在Elements选项卡的右侧，单击ChroPath选项卡。

3.要生成选择器，检查元素或单击任何DOM节点，它将生成唯一的相对XPath/绝对XPath/CSS选择器/linkText/partialLinkText。

4. 要评估XPath/CSS，输入XPath/CSS查询并按enter键。

输入时，它将在DOM中查询相关的元素/节点。您可以根据顺序查看匹配的节点和节点值。一个绿色的轮廓出现在周围，以突出显示第一个匹配的元素，并在网页中以蓝色休息。

5. 如果您将鼠标悬停在ChroPath选项卡中的任何匹配节点上，绿色/蓝色虚线轮廓将转换为橙色红色虚线，以突出显示网页中相应的元素。

6. 如果发现的元素不是在网页的可见区域，然后鼠标悬停在发现节点在ChroPath面板将滚动该元素在可见区域与点橙色红色轮廓。

7. 如果发现的元素没有突出显示，但可见，然后鼠标悬停在匹配节点上的ChroPath选项卡，它将突出元素的点橙色红色轮廓。

8. 复制定位器只需点击复制图标。

9. 点击编辑图标，如果想编辑任何定位器。

ChroPath 5.0

ChroPath generates unique relative xpath, absolute xpath, cssSelectors, linkText and partialLinkText just by one click. ChroPath can also be used as Editor for selectors. It makes easy to write, edit, extract, and evaluate XPath queries on any webpage. ChroPath also supports iframe, multi selectors generation, generate relative xpath with custom attribute, automation script steps generation and many more.

Please contact Sanjay Kumar, ChroPath Product Evangelist at chropath@autonomiq.io for support.

How to use ChroPath-

1. Right-click on the web page, and then click Inspect.

2. In the right side of Elements tab, click on ChroPath tab.

3. To generate selectors, inspect element or click on any DOM node, it will generate the unique relative XPath/absolute XPath/CSS selector/linkText/partialLinkText. 

4. To evaluate XPath/CSS, type the XPath/CSS query and press enter key.

As you enter, it will query in DOM for the relevant element/node. You can view the matching node(s) and nodes value as per their sequential occurrence. A green colour outline appears around to highlight the first matching elements and rest in blue colour in the web page.

5. If you mouse hover on any matching node in the ChroPath tab, green/blue dashed outline will convert into dotted orange red to highlight the corresponding element in the webpage.

6. If the found element is not in visible area on webpage then mouse hover on found node in ChroPath panel will scroll that element in the visible area with dotted orange red outline.

7. If found element is not highlighted but visible then on mouse hover on matching node on ChroPath tab it will highlight element with dotted orange red outline.

8. copy the locators just by clicking on copy icon.

9. click on edit icon if want to edit any locator.

Generate Relative xpath with your attribute-

1. Click on setting button which is available in ChroPath tab.

2. In attribute name box, type your attribute value and hit enter. 

3. It will generate the relative xpath with the given attribute if that will be unique else it will try with other attribute and text or parent.

4. If given attribute is not there in the node then it will generate the unique relative xpath with some other attribute.

5. Also for few attributes (id, class, name and placeholder) sort cuts have been provided. If you don't want to generate xpath with any of these attribute, just uncheck them.

Generate Automation code-

1. Click on the set driver command icon (+ icon, beside setting icon) in ChroPath tab.

2. Now when you will generate selectors, it will generate selectors with pre-command like driver.findElement(By.xpath('xpathValue'))  appended in selectors.

3. You can also change these command. Like FindByXpath('xpathValue'). Just have the keyword 'xpathValue' in your command where you want to replace the selector value.

4. Now just by clicking on copy icon you got full automation step.

5. It will add the pre-command only when this is active, if you don't want to add pre-command click on the plus icon again.

Generate selectors in bulk along with label name-

1. Click on the record button in ChroPath tab.

2. Now here just inspect all the elements or click on DOM node for which you want to generate the selectors.

3. It will generate selector along with label name.

4. You can copy, edit, delete any of the row in table.

5. Label and selectors fields are editable, so you can directly edit them there itself.

6. You can also export all the generated selectors, just by clicking Export icon given in the table header in ChroPath tab.

7. At any point of time if you want to stop recording and go back to default view, just click on record button again. This will not remove your recorded selectors but if you will close the devtool then you will loose them.

8. Also you can stop recording at anytime just by clicking on ON/OFF button.

9. Every time when you will open devtool and then ChroPath, it will be fresh window. 

Get selectors and editor both the options in single selector view-

1. If you want to work with any particular selector like Rel XPath only, then change the selectors drop down value to Rel XPath.

2. Here you will get Rel XPath as in separate row like default view and editor box empty to use ChroPath as editor in the same time.

UI features-

1. Now ChroPath gives the colored relative xpath.

2. Delete option in place of delete one by one.

iframe feature-

*Supports only those iframe which has the same src. 

1. If element inside iframe, then it will highlight first matching element in orange dotted outline.

2. It will also add one 'if..' icon in input box of ChroPath tab to make it clear that element is inside iframe.

3. If you want to verify your selector inside iframe then 1st inspect any element inside that iframe so that it get the DOM of iframe and then verify the selector.

4. Again if you want to verify any selector for a element which is outside iframe then first inspect any element which is outside iframe so that it get the top DOM and then verify the selector.

Dynamic ID support-

1. To generate relative xpath without id, uncheck the checkbox there in relative xpath row.

2. To generate relative xpath with id, select the checkbox.

On/Off button-

1. If you don't want to generate selectors, turn off the button available in ChroPath tab.

2. Turn on the button to enable ChroPath again.

Dark Theme-

1. To use dark theme, go to devtools settings.

2. Change the Theme from Light to Dark.

Note: 

1. For one selector only, change the dropdown value from selectors to rel XPath/abs Xpath/CSS sel in header.

2. Tool will add xpath/css attribute to all the matching node(s) as per their sequential occurrence. For example, a matching node appearing second in the list will have xpath=2. And if verifying CSS then it will add css=2.

3. Supports only those iframe which has the same src.

ChroPath使用插件安装

1、在打开的谷歌浏览器Chrome的扩展管理器（方法：点击最左侧的三个点，在弹出的菜单中选择【更多工具】-【扩展程序】，或者你可以在地址栏中直接输入chrome://extensions/）

2、进入扩展程序页面后将开发者模式打勾

3、最后将解压出来的ChroPath使用.crx离线文件拖入到浏览器中即可安装添加（安装前可以确认插件版本是否为v6.1.3）

4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装

5、安装好后即可使用，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。