WebUI之元素定位（超详细版）

前言

写最开始的位置：很重要

       使用ID定位，需要看ID是不是接了一串变化的数字，如果是，一般需要使用xpath模糊定位（可以看后续的xpath定位）；如果是那么定位，需要查看name是否唯一，毕竟前端也会手抖犯错。使用xpath定位，JS定位有时需要调整语句，针对的是动态ID与需要循环操作的情况。不要把copy的元素当成百分百准确

一、八大元素定位

driver为实例化的浏览器，可以看前面的文章，或者后面的实例

image

driver.find_element_by_id()
       通过标签的id定位，因为id为唯一值

driver.find_element_by_name()
        通过标签里面的属性name定位，但那么有时不唯一，在使用前需要查找是否只有一个

driver.find_element_by_class_name()
        通过标签里面的属性class定位，但那么有时不唯一，在使用前需要查找是否只有一个

driver.find_element_by_tag_name()
       通过标签名定位，这个不推介使用

以上都是HTML的标签内容

driver.find_element_by_xpath()
        xpath定位一般在打开的开发者模式中，使用选取元素，定位到元素，右击元素，在展开的菜单中点击copy，里面有xpath、selector、js path用于定位元素。如果想自己写xpath，需要学习xpath相关知识，可以到w3cschool学习相关的知识，这是一个免费的学习网站，像菜鸟教程一样。

image.png

driver.find_element_by_link_text()
        这是通过链接的文字直接定位（注意：必须是链接上的全部文字）

driver.find_element_by_partial_link_text()
        这是通过链接的部分文字直接定位（注意：可以不是全部文字，但是要注意是否唯一，不然会定位到其他地方，或者无法定位）

driver.find_element_by_css_selector()

附源代码

from selenium import webdriver
import time
from selenium.webdriver.support import expected_conditions as EC

driver=webdriver.Chrome()
driver.get('http://www.xbiquge.la/')

# driver.find_element_by_name('searchkey').send_keys('唐家三少')
# driver.find_element_by_class_name('search').send_keys('唐家三少')
# driver.find_element_by_id('wd').send_keys('唐家三少')
# time.sleep(3)
js_loctor="document.getElementById('wd').value='唐家三少'"
element=driver.execute_script(js_loctor)
#判断是否定位到元素
if EC.visibility_of_element_located(element):
    print("js定位到元素")
else:
    print("js没有定位到元素")
time.sleep(3)

search_buttom='document.querySelector("#sss").click()'
driver.execute_script(search_buttom)
time.sleep(3)

#下面为通过JS执行滚动屏幕，document.body.scrollHeight为到底部的距离
js = "window.scrollTo(0,document.body.scrollHeight)"
driver.execute_script(js)

# driver.find_element_by_link_text('全职法师').click()
driver.find_element_by_partial_link_text('全职').click()

二、JS定位

（一）JS定位方法一：getElementsBy

• 通过 id 查找 HTML 元素         document.getElementById("id名")
• 通过标签名查找 HTML 元素       getElementsByTagName("标签名")
• 通过类名查找 HTML 元素       getElementsByClassName("类名")
• 通过 CSS 选择器查找 HTML 元素
          querySelectorAll()查找所有符合条件的元素，返回一个列表
          querySelector()查找符合条件的单个元素

#这是在Python中的代码
#使用js操作相关文档内容时，都需要以document开头
#向id="wd"的输入框内输入值
js_loctor="document.getElementById('wd').value='唐家三少'"
element=driver.execute_script(js_loctor)
#判断是否定位到元素
if EC.visibility_of_element_located(element):
    print("js定位到元素")
else:
    print("js没有定位到元素")

在Chrome中使用js xpath复制到的都是querySelector()，都是可以直接执行的，但是如果想要进行相关操作，js元素的相关操作。下面继续上一个示例，写后续的按钮搜索内容：

#js定位元素，并改变属性值
js_loctor="document.getElementById('wd').value='唐家三少'"
element=driver.execute_script(js_loctor)
#判断是否定位到元素
if EC.visibility_of_element_located(element):
    print("js定位到元素")
else:
    print("js没有定位到元素")
time.sleep(3)
#js定位元素，并进行点击操作
search_buttom="document.getElementById('su').click()"
driver.execute_script(search_buttom)
time.sleep(3)

（二）JS定位方法二:querySelector

通过 JS的CSS 选择器查找 HTML 元素

• querySelectorAll()       查找所有符合条件的元素，返回一个列表
• querySelector()       查找符合条件的单个元素

其他可以参考CSS选择器语法

import time
from selenium import webdriver

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
#设置输入框的值
js='var js=document.querySelector("#kw");js.value="selenium";' \
   'document.querySelector("#su").click();'
#或js="document.querySelector('#kw)'.value='selenium'"
driver.execute_script(js)

#获取输入框内的值
js2=' return document.querySelector("#kw").value'
# js2="return document.getElementById('kw').value"
value=driver.execute_script(js2)
print(value)

使用querySelectorAll()注意事项：

       由于使用querySelectorAll定位到元素返回一个列表，所以在操作是需要加索引确定元素，不然会没有反应。
注意下面的索引：

import time
from selenium import webdriver

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
#设置输入框的值
js='var js=document.querySelectorAll("#kw")[0];js.value="selenium";' \
   'document.querySelector("#su").click();'
#或js="document.querySelector('#kw)'.value='selenium'"
driver.execute_script(js)

结语：
        关于元素定位，了解一下，操作一下，知道哪些基本的定位，以及难以定位的元素如何定位即可。一般定位元素，直接打开开发者模式，copy即可。但是需要注意，copy到的元素能不能真正定位到。

备注：
        对于xpath的语法内容，定位元素后的相关操作，浏览器相关操作与设置，将在后面继续分享，如果喜欢本文，请点个赞！