使用Xpath和css定位

一、周六学习了Xpath的元素定位，今天拿来用到公司在用的系统中。此系统前端采用vue语言开发。开发模式下右键copy出来普通常用的byid，byname，bypath，by css selector在执行脚本的时候根本定位不到元素。下面是实例，采用三种方式对某个元素进行定位。

xpath定位总结：

//：表示相对路径

* ：标签名任意

/..：表示找上级

/ ：表示找下级

@：标签属性定位

()：text的值

1.使用class= 进行定位，下句意为class名字等于"el-menu-item is-active"的元素

//*[text()='部门管理']/../../ul/li[@class="el-menu-item is-active"]

2.使用contains()定位，下句意为：class名字中包含"el-menu-item is-active"的元素

//*[text()='部门管理']/../../ul/li[contains(@class,"el-menu-item is-active")]

3.使用标签[]进行定位，下句意为li标签下的第二个子标签（注意：下标定位从1开始，不是从0开始）

//*[text()='部门管理']/../..//li[2]

二、css定位也是通过层级嵌套进行的定位

1.ul>li.el-submenu:nth-child(6)>.el-submenu__title

可理解为ul标签下的li标签，并且该li标签class="el-submenu"，这里找到class="el-submenu"的li标签有12个，我们要定位的“用户管理”在第六个，所以后面加:nth-child(6)，意思就是找第六个孩子，“>”表示找下级，“.”表示当前标签内找class="el-submenu__title"的标签

2.ul>li.el-submenu:nth-child(6)>.el-menu > li:nth-child(2)

可理解为ul标签下级li标签，class=el-submenu的li标签（共12个），:nth-child(6)表示满足class=el-submenu的标签的并且是第6个，>.el-menu表示下一级的标签中class=el-menu的标签，>li:nth-child(2)表示在下级标签中找li标签的第二个子标签。

三、其他

补充：svg定位

特殊的元素定位：svg,frame

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

需要xpath里面的name()方法:*[name()='svg']

常用方法：