selenium 相对定位器

前言
selenium 提供的定位方法有很多,先回顾一下
使用 id 定位
使用 name 定位
使用 class name 定位
使用 tag name 定位
使用链接文字定位
使用链接的部分文字定位
使用 xpath 定位
使用 class 定位
使用 find_element("locator", "value"), 这个 locator 只支持 id, name, xpath, css
使用 find_elements_xxl 来定位到组元素,再通过下标来找到想要定位的元素
selenium4 又新增了一个相对定位
selenium 相对定位
selenium4 新增了一个相对定位器,来帮助用户查找元素附近的其他元素。它提供的相对定位器有如下:
above
below
toLeftOf
toRightOf
near 在 selenium4 中,find_element 方法可以支持 locator=withTagName, 它返回了一个关联定位器我们通过例子来说明
我们有一个登陆页面,例如百度登陆页面

页面上有三个元素,用户名,密码输入框和一个登陆按钮
above 方法
该方法用来返回指定元素上方的元素。例如我们可以先定位到密码输入框,直接上代码
执行结果,用户名输入框正确输入了 hong mao dan

below 方法
顾名思义,就是查找定位元素下方的元素,那我们可以反推,先定位到用户名输入框,再通过 below 方法找到密码输入框还是上代码
执行结果,密码已经输入进去了

toLeftOf 方法
这个也很好理解,就是找到定位到元素的左边的元素,我们换个页面,来看下百度这个主页面,上面有一排新闻 hao123, 地图,链接等 tab,我们先定位到图片 tab, 再通过 toLeftOf 方法方法找到视频 tab

上代码
执行结果,看已经正确跳转到了视频页面,看到了俄罗斯和乌克兰的战争,敏感的战争政治话题就不讨论了

toRightOf 方法
左边完事了,那就看右边的,所以我们翻过来,找到视频链接的元素,再根据 right 方法去找图片 tab 上代码
执行结果

near 方法
那最后再看看 near 方法
该方法用来返回指定元素附近的元素,最远的距离是 50 像素
那我们根据图片链接元素,看能不能定位到百度输入框上代码
执行结果

结语
相对定位其实是 selenium4 使用 javascript 的 getBoundingClientRect 方法来查找关联元素,这个方法会返回元素的属性,例如 right,left,bottom,top。本文介绍的例子都相对简单,实际项目中元素定位往往很复杂,比如这个相对定位用的都是 with_tag_name 方法,如果这个 tag,元素附近有很多相同的怎么办,它指定的是哪一个呢, 所以定位方法有多种多样,需要我们根据实际情况灵活应用。
版权声明: 本文为 InfoQ 作者【Cindy】的原创文章。
原文链接:【http://xie.infoq.cn/article/2481a9071964de8266e3fe551】。文章转载请联系作者。
评论