WeDriver 对页面元素的定位和操作

WeDriver 对网页元素的定位

web界面的元素

随意打开一个web界面，里面的元素一般会有图片、链接、文本框、按钮、下拉列表和视频等等

查看百度的首页，这张页面上有输入框、按钮和文字链接等，自动化要做的就是模拟鼠标和键盘来操作这些元素，或单击，或输入

通过前端工具可以查看页面上HTML源码，通过页面源码可以看到页面上的元素都是由一行行的代码组成的，他们之间有层级的组织起来，每个元素有不同的标签名和属性值。

webdriver就是通过这些信息找到不同元素的

WebElement 对象

先来一些简单的操作，定位百度页面上的输入框

通过右键检查元素，可以发现文本框的 id 属性

通过代码驱动浏览器进行操作

# 从selenium中导入webdriver
import time

from selenium import webdriver



# 创建一个浏览器驱动，打开一个浏览器，与浏览器创建会话
# 启动了chromedriver.exe 并建立了连接，创建了会话ID
driver = webdriver.Chrome()


# 用谷歌浏览器打开一个网站
driver.get(url='https://www.baidu.com/')

#在该页面定位百度文本框

# element 是一个 WebElement 对象
element = driver.find_element_by_id('kw')
print(element)
# <selenium.webdriver.remote.webelement.WebElement (session="fa51aba298f1af5375a7f56f46c03195", element="c25df5be-aef2-460e-94a6-65ed3180d959")>

运行这段代码，可以发现浏览器打开了百度的页面，打印出来的 element 是一个 WebElement 对象

WebElement 是一个类，所以当我们用 element 接收它的时候，也就是通过 element 实例化这个对象的时候，就继承了 WebElement 类的方法和属性。就比如 clear() 方法–清空内容，send_keys()–输入内容 这些方法。

通过找到了输入框，接下来就可以往输入框中输入内容，这时候就可以用上 send_keys 方法，比如想在文本框中输入 selenium

element.send_keys(“selenium”)

对于 WebElement ，要了解这个类，可以通过查看源码的方式，将鼠标移至代码send_keys处，按住Ctrl 单击鼠标左键（或是使用快捷键Ctrl + b）
可以看到 send_keys 这个方法的源码

往上滑，可以看到，这些方法，都是属于 WebElement 类

我们看源码的时候，可以不用先看代码，直接先看注释

注释的大概意思是：WebElement 代表一个DOM 元素，所以我们使用 webdriver 对 元素进行操作的时候，会默认通过这个类的方法执行

然后我们再去看这个类的代码

这些方法都是调用的命令（Command）进行执行（_execute）
像 tag_name 和 text 方法，都加上了@property 说明这两个命令可以不用加括号（），就可以获取所操作元素的名称和文本
而 click() 和 submit() 方法的调用则需要加上括号

具体情况可以下面的示例

八种元素定位方法

WebDriver 提供了八种元素定位方法，以下是各种定位方法，及其对应的用 Python 实现的方法

WebDriver 元素定位方式	对应的 Python 方法
id	find_element_by_id（）
name()	find_element_by_name()
class_name	find_element_by_class_name()
tag_name	find_element_by_tag_name()
link_text	find_element_by_link_text()
partial_link_text	find_element_by_partial_link_text()
xpath	find_element_by_xpath()
css_selector	find_element_by_css_selector()

常见元素定位

理想状态下，在一个页面中每一个元素都有唯一的 id 和 name 等属性值，可以通过它们的属性来找到它们

需求：
打开百度首页
在百度文本框中输入selenium
点击百度一下

find_element_by_id()

#1、导包
from selenium import webdriver
import time
#2、创建google浏览器对象
driver = webdriver.Chrome()
#3、打开被测系统的首页面
driver.get("https://www.baidu.com")

#4、对打开页面中的元素进行操作（识别、对象进行点击、输入、悬浮、键盘快捷键等）
# 在百度文本框中输入selenium
#识别文本框,输入文字 
driver.find_element_by_id('kw').send_keys("selenium")
time.sleep(5)
#点击百度一下
driver.find_element_by_id("su").click()
time.sleep(5)
#5、关闭浏览器对象
driver.quit()

find_element_by_name()

#1、导包
from selenium import webdriver
#2、创建google浏览器对象
driver = webdriver.Chrome()
#3、打开百度首页
driver.get("https://www.baidu.com")
# 4、识别元素，对元素进行操作（通过name属性进行定位）
driver.find_element_by_name("wd").send_keys("selenium")
driver.find_element_by_id('su').click()

#5、关闭浏览器对象
driver.quit()

find_element_by_class_name()

#1、导包
from selenium import webdriver
#2、创建google浏览器对象
driver = webdriver.Chrome()
#3、打开百度首页
driver.get("https://www.baidu.com")
# 4、识别元素，对元素进行操作（通过class name属性进行定位）
driver.find_element_by_class_name("s_ipt").send_keys("selenium")
driver.find_element_by_id('su').click()
#5、关闭浏览器对象
driver.quit()

find_element_by_tag_name()

#1、导包
from selenium import webdriver
#2、创建google浏览器对象
driver = webdriver.Chrome()
#3、打开百度首页
driver.get("https://www.baidu.com")
# 4、识别元素，对元素进行操作（通过标签名进行定位）
driver.find_element_by_tag_name("input").send_keys("selenium")
driver.find_element_by_id('su').click()

#5、关闭浏览器对象
driver.quit()

需求：
打开百度首页
点击首页上的新闻链接
在新闻页面点击一条新闻链接

find_element_by_link_text()

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
#使用Link text进行定位
driver.find_element_by_link_text("新闻").click()
driver.find_element_by_partial_link_text("回信催人奋进").click()
time.sleep(3)
driver.quit()

然而在实际项目中，有时候一个元素并没有id、name属性，或者页面上多个元素的id和name属性值相同，又或者每一次刷新页面，id值都会随机变化。
这个时候，就需要才用呢更加灵活的定位策略，通过不同的方式定位到想要的元素。

Xpath定位

需求：定位百度页面的百度文本框

绝对路径方式定位

#导包
from selenium import webdriver
import time

#创建浏览器对象
driver = webdriver.Chrome()

#获得被测系统的某一个页面（指定URL）
driver.get("https://www.baidu.com")

#在该页面定位百度文本框
driver.find_element_by_xpath('/html/body/div/div[1]/div/div/div/form/span[1]/input').send_keys("selenium")
driver.find_element_by_xpath('/html/body/div/div[1]/div/div/div/form/span[2]/input').click()
#driver.find_element_by_id("su").click()
time.sleep(3)
#退出浏览器
driver.quit()

属性方式定位

from selenium import webdriver
import time

#创建浏览器对象
driver = webdriver.Chrome()

#获得被测系统的某一个页面（指定URL）
driver.get("https://www.baidu.com")

#在该页面定位百度文本框
# driver.find_element_by_xpath("//input[@id='kw']").send_keys("selenium")
# driver.find_element_by_xpath("//input[@id='su']").click()

#如果是从浏览器复制出来的xpath，需要将其双引号该为单引号（避免相同引号进行嵌套）
driver.find_element_by_xpath("//input[@id='kw']").send_keys("selenium")
driver.find_element_by_xpath('//*[@id="su"]').click()
#driver.find_element_by_id("su").click()
time.sleep(3)
#退出浏览器
driver.quit()

层级与属性方式定位

from selenium import webdriver
import time

#创建浏览器对象
driver = webdriver.Chrome()

#获得被测系统的某一个页面（指定URL）
driver.get("https://www.baidu.com")

#在该页面定位百度文本框（通过属性方式先定位他爷爷，在通过层级关系定位相应的元素）
driver.find_element_by_xpath("//form[@id='form']/span/input").send_keys("selenium")
driver.find_element_by_xpath("//input[@id='su']").click()

#driver.find_element_by_id("su").click()
time.sleep(3)
#退出浏览器
driver.quit()

模糊匹配属性内容方式定位

#导包
from selenium import webdriver
import time

#创建浏览器对象
driver = webdriver.Chrome()

#获得被测系统的某一个页面（指定URL）
driver.get("https://www.baidu.com")

#在该页面定位百度文本框（模糊匹配定位）
# 查找所有的id中包含kw的输入框
driver.find_element_by_xpath("//input[contains(@id,'kw')]").send_keys("selenium")
# 查找所有的id中以su开头的输入框
driver.find_element_by_xpath("//input[starts-with(@id,'su')]").click()

time.sleep(3)
#退出浏览器
driver.quit()

逻辑运算符进行组元素属性定位

#导包
from selenium import webdriver
import time

#创建浏览器对象
driver = webdriver.Chrome()

#获得被测系统的某一个页面（指定URL）
driver.get("https://www.baidu.com")

#在该页面定位百度文本框（多个元素属性定位）
driver.find_element_by_xpath("//input[@id='kw' and @name='wd']").send_keys("selenium")
driver.find_element_by_xpath("//input[@id='su']").click()

time.sleep(3)
#退出浏览器
driver.quit()

css定位

css可以较为灵活的选择空间的任意属性，一般情况定位速度要比Xpath快。
css选择器的常见语法如下：

选择器	例子	描述
.class	.intro	class选择器，选择class=“intro”的所有元素
#id	#firstname	id选择器，选择id=“firstname”的所有元素
*	*	选择所有元素
slement	p	所有<p>元素
element>element	div>input	选择父元素为<dib>的所有<input>元素
element+element	div+input	选择同一级中紧接在<div>元素之后的所有<input>元素
[attribute=value]	[target=_blank]	选择target=“_blank”的所有元素

通过CSS selector定位百度页面的百度文本框\百度一下按钮

#导包
from selenium import webdriver
import time

#创建浏览器对象
driver = webdriver.Chrome()

#获得被测系统的某一个页面（指定URL）
driver.get("https://www.baidu.com")

#在该页面定位百度文本框（类样式定位）
# driver.find_element_by_css_selector(".s_ipt").send_keys("selenium")
# driver.find_element_by_css_selector(".s_btn").click()
#id属性定位
# driver.find_element_by_css_selector("#kw").send_keys("selenium")
# driver.find_element_by_css_selector("#su").click()

#通过父子关系定位
driver.find_element_by_css_selector("#form>span>input").send_keys("selenium")
driver.find_element_by_css_selector(".s_btn").click()

time.sleep(3)
#退出浏览器
driver.quit()

Xpath和css定位功能对比

定位方式	Xpath	css
By id	//div	div
By class	//div[@id=‘eleid’]	div#eleid
By 属性	//div[@title=‘Move mouse here’]	div[title=Move] div[title^=Move] div[title$=here] div[title*=mouse]
定位子元素	//div[@id=‘eleid’] /*//div/h1	div#eleid>*div>h1

Xpath和css都提供了非常强大而灵活的定位方法，相比较而言css语法更简洁，但理解和使用的难度更大一些

WeDriver对网页元素的操作

定位只是第一步，定位之后需要对这个元素进行操作，或单击（按键）或输入（输入框）

WeDriver对网页元素的进行操作的几个常用方法：

1. clear()：清除文本
2. send_keys(value)：模拟按键输入
3. click()：单击元素。例如安静操作
4. Current_url：返回当前页面的url地址
5. title：返回当前页面的title
6. Text：获取页面显示的文本
7. get_attribute(name)：获取属性值，文本框中的值使用value属性名
8. is_displayed()：设置该元素是否用户可见

#导包
from selenium import webdriver
import time

#创建浏览器对象
driver = webdriver.Chrome()

#获得被测系统的某一个页面（指定URL）
driver.get("https://www.baidu.com")
time.sleep(2)
#driver.current_url获取浏览当前页面的url地址?获取了干嘛用？
#可以作为自动化测试用例中的实际结果来用
url = driver.current_url
title = driver.title
print(url)
print(title)

data = driver.find_element_by_xpath('//*[@id="setf"]').text
print(data)

#获取页面底部的信息：把百度设为主页关于百度About  Baidu百度推广
textt = driver.find_element_by_xpath("//*[@id='lh']").text
print("页面底部信息为：%s"%textt)

#通过get_attribute(id)获取某一个元素的id属性值
ff = driver.find_element_by_xpath("//input[@id='kw' and @name='wd']").get_attribute('id')
print(ff)
#在该页面定位百度文本框（多个元素属性定位）
driver.find_element_by_xpath("//input[@id='kw' and @name='wd']").send_keys("selenium")


ffff = driver.find_element_by_xpath("//input[@id='kw' and @name='wd']").get_attribute('value')
print(ffff)
#clear（）方法清除元素中的数据
driver.find_element_by_xpath("//input[@id='kw' and @name='wd']").clear()


#通过is_dispalyed()来判断某个元素是否已经在页面中正常显示了
flag = driver.find_element_by_xpath("//input[@id='su']").is_displayed()
print(flag)

driver.find_element_by_xpath("//input[@id='kw' and @name='wd']").send_keys("jmeter")
driver.find_element_by_xpath("//input[@id='su']").click()

time.sleep(3)
#退出浏览器
driver.quit()

练习

打开百度页面
获取当前页面的url,并打印出来（driver.current_url）
获取当前页面的title,并打印出来（driver.title）
百度“selenium”，点击百度一下
判断页面中的“百度一下”按钮是否正常显示，是则打印“正常显示按钮”
获取文本框中的文本，并打印出来
清除百度文本框中内容
获取页面底部的信息：把百度设为主页关于百度About Baidu百度推广
关闭浏览器

from  selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

#获取当前页面的url,并打印出来（driver.current_url）
url = driver.current_url
print(url)
#获取当前页面的title,并打印出来（driver.title）
title = driver.title
print(title)


# 获取页面底部的信息：把百度设为主页关于百度About  Baidu百度推广
ddd = driver.find_element_by_xpath('//*[@id="lh"]').text
print(ddd)

#百度“selenium”，点击百度一下
driver.find_element_by_id("kw").send_keys("selenium")
driver.find_element_by_id('su').click()

#判断页面中的“百度一下”按钮是否正常显示，是则打印“正常显示按钮”
if driver.find_element_by_id('su').is_displayed():
    print("正常显示按钮")
else:
    print("没有显示出来")
#获取文本框中的文本，并打印出来
data = driver.find_element_by_id('kw').get_attribute("value")
print(data)
#清除百度文本框中内容
driver.find_element_by_id('kw').clear()

#关闭浏览器
driver.quit()