Selenium之Web元素定位

Web页面主要由HTML、CSS和JavaScript脚本构成，当前大部分页面都是动态页面。Web页面中的各类视觉元素，如文本框、按钮、复选框、图品、超链接和表等，在Selenium中都被称为页面元素（web Elements）。

Selenium提供了八种定位元素。

定位元素

含义

定位元素

含义

find_element_by_id

通过ID定位元素

find_elements_by_id

通过ID定位一组元素

find_element_by_name

通过name定位元素

find_elements_by_name

通过name定位一组元素

find_element_by_class_name

通过class定位元素

find_elements_by_class_name

通过class定位一组元素

find_element_by_xpath

通过xpath定位元素

find_elements_by_xpath

通过xpath定位一组元素

find_element_by_tag_name

通过tag name定位元素

find_elements_by_tag_name

通过tag name定位一组元素

find_element_by_css_selector

通过css选择器定位元素

find_elements_by_css_selector

通过css选择器定位一组元素

find_element_by_link_text

通过元素标签对之间的文本信息定位元素

find_elements_by_link_text

通过元素标签对之间的文本信息定位一组元素

find_element_by_partial_link_text

通过元素标签对之间的部分文本信息来定位元素

find_elements_by_partial_link_text

通过元素标签对之间的部分文本信息来定位一组元素

注：通过ID、name、class属性是最常用来定位元素的方法。

一、ID定位

ID（find_element_by_id）是Selenium中较常见的定位方式，一般情况下ID是唯一的，ID的唯一性也成为需要页面上元素较号的方法。

用百度搜索框来举个例子，搜索框的HTML代码如下：

复制代码

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

python代码如下：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
# 通过ID定位搜索框元素并赋值【测试】
driver.find_element_by_id("kw").send_keys("测试")
sleep(5)        # 页面停留5秒
driver.quit()    #关闭浏览器

二、name定位

一般情况下name与id一样具有唯一性，同时也是作为使用频率较高的定位元素之一。

百度搜索框HTML代码如下：

复制代码

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

python代码如下：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
# 通过name来定位搜索框元素并赋值【测试】
driver.find_element_by_name("wd").send_keys("测试")
sleep(5)        # 页面停留5秒
driver.quit()    # 关闭浏览器

三、class定位

大部分前端的央视是通过class来渲染，所以定位元素时还可以通过class来定位。class用来关联CSS中定义的属性。

百度搜索框HTML代码如下：

复制代码

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

python代码如下：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
driver.find_element_by_class_name("s_ipt").send_keys("测试")
sleep(5)
driver.quit()

注：有时某元素的class属性值由通过空格隔开的两个值组成（如【百度一下】按钮元素class="bg s_btn"），这时通过class定位，只需取其中一个即可（class="bg s_btn"仅仅使用"s_btn"）。

python代码如下：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
# 通过class定位搜索框并赋值【测试】
driver.find_element_by_class_name("s_ipt").send_keys("测试")
# 通过class定位【百度一下】按钮并点击
driver.find_element_bt_class_name("s_btn").click()
sleep(5)        # 页面停留5秒
driver.quit()     # 关闭浏览器

四、tag定位

tag name方法是通过对HTML页面中tag name匹配方式来定位元素，类似于JavaScript中的getElementsByTagName（）。tag name在某些特定场合下十分好用，比如：通过标签,的tag name可一次性定位到页面中的所有复选框元素。

在这里我们用Bing网站举例子，后面会讲到为啥不用百度来举例，以下是Bing首页输入框的HTML代码

复制代码

<input id="sb_form_q" class="sb_form_q" name="q" type="search" maxlength="1000" autocomplete="off" aria-labelledby="sb_form_c" autofocus="" aria-controls="sw_as" aria-autocomplete="both" aria-owns="sw_as">

python代码如下：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://cn.bing.com")
driver.find_element_by_tag_name("input").send_keys("bella")
sleep(5)
driver.quit()

注意：通过标签名的定位方式需慎用，能不用尽量不要用，因为一个页面有大量重复的标签名，从而使Selenium找不到正确的元素；举例的Bing首页输入框能够执行且成功输入bella，具有一定的偶然性，换成百度就找不到会报错（如下图）。

这边提供一个例子，小伙伴可以试试。

HTML代码

复制代码

<html>
	<head>
	 <title>复选框测试实例</title>
	</head>
	<body>
	 请选择你喜欢的水果</br>
	  <input type="checkbox" name="fruit" value="apple">苹果</br>
	  <input type="checkbox" name="fruit" value="orange">橘子</br>
	  <input type="checkbox" name="fruit" value="mango">芒果</br>
	</body>
</html>

python代码：

复制代码

# fruit
from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
# checkbox.html的路径要根据自己真正存放的地址
driver.get("file:///F://checkbox.html")

inputs = driver.find_elements_by_tag_name("input")
for i in inputs:
    # 使用type或name均可，因为三种水果的元素type和name都相同
    if i.get_attribute("type") == "checkbox":
        i.click()
        sleep(3)
driver.quit()

五、link定位

find_element_by_link_text方法使通过文本链接来定位元素。以百度首页中顶部的【新闻】链接为例。

HTML代码：

复制代码

<a href="http://news.baidu.com" target="_blank" class="mnav c-font-normal c-color-t">新闻</a>

单击【新闻】链接的python代码：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
driver.find_element_by_link_text("新闻").click()
sleep(5)
driver.quit()

六、partial_link_text定位

find_element_by_partial_link_text方法使通过文本链接的一部分文本来定位元素。以百度首页中顶部的【新闻】链接为例。

HTML代码：

复制代码

<a href="http://news.baidu.com" target="_blank" class="mnav c-font-normal c-color-t">新闻</a>

单击【新闻】链接的python代码：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
driver.find_element_by_link_text("新").click()
sleep(5)
driver.quit()

七、xpath定位

当发现通过id、name、class无法定位元素时，可以尝试用xpath。建议：为了避免人工输入路径有可能引发的错误，尽量不要手动输入绝对路径，错误率太高了。

1、通过绝对路径定位

二话不说，直接上图：

手工输入太累了，还容易漏掉，直接用开发者工具快速获取xpath的绝对路径。选中搜索框元素，右击该元素的代码区域，选择【Copy|Copy full xpath】，直接把绝对路径复制下来，/html/body/div[1]/div[2]/div[5]/div[1]/div/form/span[1]/input

python代码:

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
# 绝对路径定位
driver.find_element_by_xpath("/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input").send_keys("测试")
driver.find_element_by_xpath("/html/body/div[1]/div[1]/div[5]/div/div/form/span[2]/input").click()
sleep(5)
driver.quit()

2、通过元素属性定位

xpath除了使用绝对路径，也可以使用元素的某个属性值来定位。同样直接用开发工具复制就行，选中搜索框元素，右击代码区域，选择【Copy|Copy xpath】，就可以直接得到xpath值（//*[@id="kw"]）

python代码：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")

# driver.find_element_by_xpath("//*[@id="kw"]").send_keys("测试")
# xpath定位不仅仅局限于id，也可以通过name或是class来实现
driver.find_element_by_xpath("//input[@name='wd']").send_keys("测试")
driver.find_element_by_xpath("//input[@class='bg s_btn']").click()
sleep(5)
driver.quit()

3、多属性结合定位

搜索框的HTML代码：

复制代码

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

搜索按钮的HTML代码：

复制代码

<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">

python代码：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")

driver.find_element_by_xpath("//input[@id='kw' and @name='wd'] ").send_keys("测试")
driver.find_element_by_xpath("//input[@id='su' and @class='bg s_btn']").click()
sleep(5)
driver.quit()

八、css定位

1、通过ID、name、class来定位

搜索框的HTML代码：

复制代码

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

搜索按钮的HTML代码：

复制代码

<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">

python代码：

复制代码

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")

# driver.find_element_by_css_selector("#kw").send_keys("测试")  # 符号"#"代表id匹配
driver.find_element_by_css_selector("[name='wd']").send_keys("测试") # 符号"[]"代表name匹配
driver.find_element_by_css_selector(".s_btn").click()    # 符号"."代表使用class匹配
sleep(5)
driver.quit()

九、find_element定位

前面介绍了八种定位元素的方法，webdriver还提供了另外一种方法find_element,其通过By来申明定位的方法，传入对应定位方法的定位参数。find_element需要传入两个参数，第一个参数是定位的类型，由By模块提供（使用前需要通过from selenium.webdriver.common.by import By 导入By模块）；第二个参数是具体定位的方式。

以百度首页搜索框、按钮、以及顶部【新闻】来举例，HTML代码

复制代码

#百度搜索框
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
# 百度一下按钮
<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">

对应的python代码：

复制代码

from selenium import webdriver
from time import sleep
from selenium.webdriver.common.by import By

driver = webdriver.Firefox()
driver.get("https://www.baidu.com")

# driver.find_element(By.NAME, "wd").send_keys("测试")   # 通过By.NAME
# driver.find_element(By.ID, "su").click()     # 通过By.ID
# driver.find_element(By.CLASS_NAME, "s_ipt").send_keys("测试")     # 通过By.CLASS_NAME
# driver.find_element(By.XPATH, "//*[@id='kw']").send_keys("测试")  # 通过By.XPATH
# driver.find_element(By.CSS_SELECTOR, ".s_btn").click()  # 通过By.CSS_SELECTOR
# driver.find_element(By.LINK_TEXT, "新闻").click()     # 通过By.LINK_TEXT
driver.find_element(By.PARTIAL_LINK_TEXT, "新").click()  # 通过By.PARTIAL_LINK_TEXT

sleep(4)
driver.quit()

Selenium之Web元素定位

一、ID定位

二、name定位

三、class定位

四、tag定位

五、link定位

六、partial_link_text定位

七、xpath定位

1、通过绝对路径定位

2、通过元素属性定位

3、 多属性结合定位

八、css定位

1、通过ID、name、class来定位

九、find_element定位

3、多属性结合定位