温馨提醒：

（1）没有网页html基础的伙伴建议先观看以下视频，了解一下html结构

https://www.bilibili.com/video/BV15v4y1s7xC/?spm_id_from=333.999.0.0

（2）第五点是日常案例，如果了解过html的伙伴可以直接跳到第五点；

（3）如果以下视频失效，移步到以下连接查看：https://juniper-guilty-cbb.notion.site/xpath-85c244729790458e81dd6fe371d819fb

一、简述网页元素标签

（一）标签的组成

<td data-v-3327b64e="" uia-uid="0|3">名称</td>
以上代码内容中
紫色部分  →  标签名  例如：td；
绿色部分  →  属性名  例如：data-v-3327b64e，uia-uid；
对应属性名"="的右边  →  对应的属性值 例如：0|3；
<td...></td>之间的内容  → 网页上显示的文本  例如：名称

（二）标签的关系网（祖先、父辈、孩子、兄弟（哥哥姐姐、弟弟妹妹））

       看下图右边网页结构，拿table结构为例：
           三角形箭头代表祖辈关系（跟人类关系一样）
           例如：
           table 标签的”孩子”有3个，都是tr标签
           三个tr标签是兄弟关系，他们的父亲是table 标签
           table 和 文本为”名称”的td标签 是祖孙关系，

二、xpath和编辑器的对比关系？

结构类似，属性选择不同

三、利用xpath辅助编辑器精准定位

获取的元素利用文本来定位元素，但是这个文本会变化，如果去掉文本勾选，获取的元素不唯一怎么办？

四、推荐辅助识别校验xpath的谷歌插件

（1）xpath_help 快速校验xpath的正确性（以下案例都是用这个插件）

说明视频：

https://www.bilibili.com/video/BV1Xz4y1k7Ws/?spm_id_from=333.337.search-card.all.click

（2）letxpath 同一个元素提供不同的xpath写法

五、实际场景中，影刀的“捕获新元素”和xpath的PK

（以下操作会用最少的结构，选定指定的元素（尽可能避免网页因为外层结构发生变化导致元素失效））

（一）直接通过标签和文本获取元素

text() 在xpath中代表文本 xpath表达式： //[text()='元素的文本内容'] 例如以下网页中 //[text()='名称']

（二）通过属性获取元素

//标签名[@属性名='属性值'] 如下案例 //input[@placeholder=’商品名称’]

（三）通过同级相邻元素定位获取元素

例子：获取所有”黑色常规”的”尺寸”、”skuId”、”当前库存”

（1）影刀的默认获取元素方式：

思路：

1.捕获所有行相似元素组，通过全局变量把”黑色常规”传入属性innerText（找到指定颜色分类的行）

2.循环相似元素组

(1)获取当前行的指定子元素，分别获取尺寸、skuid、库存的对象

(2)把信息打印出来

（2）xpath方式：

xpath的[]结构中填写子元素的文本来限定父元素的范围 尺寸： 以下含义是：找子元素td的内容等于”黑色常规”的tr元素 再找这个tr元素的第1个td //tr[td='黑色常规']/td[1] skuId： //tr[td='黑色常规']/td[3] 当前库存： //tr[td='黑色常规']/td[6]

（四）根据相同长辈（父级、祖先）元素定位获取元素

 例子：通过下拉框旁边的标题文本选定定位

（1）影刀的默认获取元素方式：

思路：

（1）捕获相似元素：两个下拉框和对应的标题的祖先元素“下拉框和对应的标题_指定”，把全局变量”指定下拉框标题” 传入到元素的属性innerText中

（2）捕获下拉框相似元素组

（3）获取关联父元素”下拉框和对应的标题_指定”的下拉框元素”指定下拉框”

（4）对下拉框进行操作

（2）xpath方式：

祖先元素[*//标签名=’XX’]：中的这里文本内容为XX的标签是祖先元素的后代元素

以下xpath的完整含义是：

找后代包含一个label元素且该元素文本为"活跃用户"的祖先元素//div[@class='ant-row ant-form-item’]，

然后找这个祖先元素的后代（//）div元素且该元素有role属性=“combobox”

//div[@class='ant-row ant-form-item’][*//label='活跃用户']//div[@role='combobox']