使用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']


常用方法:

你可能感兴趣的:(使用Xpath和css定位)