前言：AutonomIQ提供了一个开发人员平台ChroPath来生成和验证独特的选择器，例如devtools面板中的相对xpath
ChroPath Chrome插件图片预览
ChroPath-Chrome扩展插件介绍
ChroPath只需单击一下即可生成唯一的相对xpath，绝对xpath，cssSelectors，linkText和partialLinkText。ChroPath也可以用作选择器的编辑器。它可以在任何网页上轻松编写，编辑，提取和评估XPath查询。ChroPath还支持iframe和动态id。
1。右键单击该网页，然后单击“检查”。
2。在“元素”选项卡的右侧，单击“ChroPath”选项卡。如果它不可见，请扩展devtools。
3。要生成选择器，检查元素或单击任何DOM节点，它将生成唯一的相对XPath /绝对XPath / CSS选择器/ linkText / partialLinkText。BR> 4。要评估XPath / CSS，请键入XPath / CSS查询并按Enter键。
如果输入，它将在DOM中查询相关元素/节点。您可以按顺序查看匹配的节点和节点值。周围会出现绿色轮廓以突出显示第一个匹配的元素，并在网页中以蓝色显示。
5。如果将鼠标悬停在ChroPath选项卡中的任何匹配节点上，绿色/蓝色虚线轮廓将转换为点状橙红色以突出显示网页中的相应元素。
6。如果找到的元素不在网页上的可见区域中，则鼠标悬停在ChroPath面板中的找到节点上将在可见区域中滚动该元素，并带有点缀橙红色轮廓。
7。如果找到的元素没有突出显示但是可见，那么在鼠标悬停在ChroPath选项卡上的匹配节点上时，它将突出显示带有橙色红色轮廓的元素。
8。只需单击复制图标即可复制定位器。
9。如果要编辑任何定位器，请单击编辑图标。
iframe feature
*仅支持具有相同src的iframe。结果1。如果iframe中的元素，那么它将突出显示橙色虚线轮廓中的第一个匹配元素。
2。它还会在ChroPath选项卡的输入框中添加一个“if …”图标，以明确该元素位于iframe内。
3。如果你想在iframe中验证你的选择器，那么首先检查那个iframe中的任何元素，以便它获得iframe的DOM，然后验证选择器。
4。再次，如果您要验证iframe外部元素的任何选择器，那么首先检查iframe外部的任何元素，以便它获得顶级DOM，然后验证选择器。
动态ID支持
1。要生成没有id的相对xpath，请取消选中相对xpath行中的复选框。
2。要生成带有id的相对xpath，请选中该复选框。
开/关按钮
1。如果您不想生成选择器，请关闭ChroPath选项卡中的可用按钮。
2。打开按钮再次启用ChroPath。
黑暗主题
1。要使用黑暗主题，请转到devtools设置。
2。将主题从浅色变为暗色。
注意：
1。仅限一个选择器，将标题中的选择器的下拉值更改为rel XPath / abs Xpath / CSS sel。
2。工具将根据顺序出现将xpath / css属性添加到所有匹配节点。例如，列表中第二个出现的匹配节点将具有xpath = 2。如果验证CSS，那么它将添加css = 2.。3。仅支持具有相同src的iframe。