网页元素定位和操作

阅读：296357403 分享到

大家仔细思考一下，我们用 selenium 操控浏览器是什么意思，其实就是用 selenium 模拟人上网，也就是说人用浏览器能做的任何事情，我们用 selenium 都可以做，selenium 就如一个会上网的机器人一样。

上节课我们只是简单的学习了用 selenium 打开浏览器并做了对浏览器做了一些简单的操作，大家要知道，我们上网更重要的是对网页做操作，也就是对网页中的控件做操作，想对这些控件做操作，首先，我们就需要先找到它们。

selenium 定位方法

Selenium 提供了 8 种定位方式。

id
name
class name
tag name
link text
partial link text
xpath
css selector

这8种定位方式在 Python selenium 中所对应的方法为：

find_element_by_id()
find_element_by_name()，find_elements_by_name()
find_element_by_class_name()，find_elements_by_class_name()
find_element_by_tag_name()，find_elements_by_tag_name()
find_element_by_link_text()，find_elements_by_link_text()
find_element_by_partial_link_text()，find_elements_by_partial_link_text()
find_element_by_xpath()，find_elements_by_xpath()
find_element_by_css_selector()，find_elements_by_css_selector()

我们发现除了根据 id 定位之外，剩下的 7 中方法都提供两个函数，两个函数唯一的区别是在单词 element 后面多了一个 s 表示复数，带 s 的函数是定位一组元素的写法（也就是找到符合条件的所有元素，结果为一个数组）。因为网页中元素的 id 是唯一的（当然如果你非要多个元素同用一个 id 名，只有第一个元素的 id 有效），所以没有 find_elements_by_id 这种查找方法。

定位方法的用法

假如我们有一个 Web 页面，通过前端工具（按 F12）查看到一个元素的属性是这样的，我们现在使用以上 8 种方法去查找元素，我们用单一元素定位的函数，对于一组元素定位的函数使用，大家自行写代码做实验。

<html>
<head>
<body link="#0000cc">
<a class="mnav" href="http://news.baidu.com" name="tj_trnews">新闻</a>
<a class="mnav" href="http://www.hao123.com" name="tj_trhao123">hao123</a>
<a id="result_logo" href="/" onmousedown="return c({'fm':'tab','tab':'logo'})">
<form id="form" class="fm" name="f" action="/s">
  <span class="soutu-btn"></span>
  <input id="kw" class="s_ipt" name="wd" value="" maxlength="255" autocomplete="off">

我们的目的是要定位 input 标签的输入框。

dr.find_element_by_id("kw")    # 通过 id 定位
dr.find_element_by_name("wd")  # 通过name定位
dr.find_element_by_class_name("s_ipt")  # 通过class name定位
dr.find_element_by_tag_name("input")    # 通过tag name定位

'''
通过 xpath 定位，xpath 定位有N种写法，这里列几个常用写法
'''
dr.find_element_by_xpath("//*[@id='kw']")
dr.find_element_by_xpath("//*[@name='wd']")
dr.find_element_by_xpath("//input[@class='s_ipt']")
dr.find_element_by_xpath("/html/body/form/span/input")
dr.find_element_by_xpath("//span[@class='soutu-btn']/input")
dr.find_element_by_xpath("//form[@id='form']/span/input")
dr.find_element_by_xpath("//input[@id='kw' and @name='wd']")

'''
通过 css 定位，css 定位有N种写法，这里列几个常用写法
'''
dr.find_element_by_css_selector("#kw")
dr.find_element_by_css_selector("[name=wd]")
dr.find_element_by_css_selector(".s_ipt")
dr.find_element_by_css_selector("html > body > form > span > input")
dr.find_element_by_css_selector("span.soutu-btn> input#kw")
dr.find_element_by_css_selector("form#form > span > input")

接下来，我们根据页面上的 a 标签的链接文本进行定位。

dr.find_element_by_link_text("新闻")    # 通过 link text 定位
dr.find_element_by_link_text("hao123")  # 通过 link text 定位

dr.find_element_by_partial_link_text("新")   # 通过 link text 部分内容定位
dr.find_element_by_partial_link_text("hao")  # 通过 link text 部分内容定位
dr.find_element_by_partial_link_text("123")  # 通过 link text 部分内容定位

输入和点击

我们已经学习了定位元素，定位只是第一步，定位之后需要对这个元素进行操作，或单击（按钮）或输入（输入框），下面就来认识 WebDriver 中最常用的几个方法：

from selenium import webdriver

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

driver.find_element_by_id("kw").clear()  # 清除文本
driver.find_element_by_id("kw").send_keys("selenium")  # 模拟按键输入
driver.find_element_by_id("su").click()  # 单击元素

driver.quit()

提交

submit()方法用于提交表单。例如，在搜索框输入关键字之后的“回车” 操作，就可以通过该方法模拟。

from selenium import webdriver

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

search_text = driver.find_element_by_id('kw')
search_text.send_keys('selenium')
search_text.submit()

driver.quit()

注意：有时候 submit() 可以与 click() 方法互换来使用，submit() 同样可以提交一个按钮，但 submit() 的应用范围远不及 click() 广泛。

其他常用方法

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")

# size 属性：获得输入框的尺寸
tagsize = driver.find_element_by_id('kw').size
print(tagsize)    # 输出：{'width': 500, 'height': 22}

# text 属性：获取元素的文本
tagtext = driver.find_element_by_id("cp").text
print(tagtext)    # 输出：©2015 Baidu 使用百度前必读 意见反馈 京 ICP 证 030173 号

# get_attribute(name) 方法：返回元素的属性值，可以是 id、 name、 type 或其他任意属性
attribute = driver.find_element_by_id("kw").get_attribute('type')
print(attribute)  # 输出：text

# is_displayed() 方法：返回元素的结果是否可见，返回结果为 True 或 False
result = driver.find_element_by_id("kw").is_displayed()
print(result)     # 输出：True

driver.quit()