WebDriver基础篇

WebDriver(Selenium2.0)

目标：

1. 掌握WebDriver元素定位方法

回顾 Selenium家族

对于我们只需要关注以下两点：

1. SeleniumIDE(已学完，录制自动化脚本的)

2. Selenium2.0(SeleniumIDE+WebDriver)

提示：

1). Selenium2.0=Selenium1.0+WebDriver

2). Selenium1.0 和 WebDriver原属于两个不同的东西，由于某种原因已合并

3). Selenium2.0以后我们简称WebDriver

WebDriver概述、环境搭建

什么是WebDriver?

1. Webdriver (Selenium2）是一种用于Web应用程序的自动测试工具；

2. 它提供了一套友好的API；

3. Webdriver完全就是一套类库，不依赖于任何测试框架，除了必要的浏览器驱动;

说明：

API：应用编程接口说明（WebDriver类库内封装非常多的方法，要使用这些方法，就需要友好的调用命名规则）

WebDriverAPI 支持的浏览器

1. Firefox （FirefoxDriver）【推荐-本阶段学习使用】

2. IE（InternetExplorerDriver）

3. Opera（OperaDriver）

4. Chrome （ChromeDriver）

5. safari（SafariDriver）

6. HtmlUnit (HtmlUnit Driver)

提示：

Firefox、Chrome：对元素定位和操作有良好的支持，同时对JavaScript支持也非常好。

IE:只能在windows平台运行，所有浏览器中运行速度最慢

HtmlUnit：无GUI(界面)运行，运行速度最快；

推荐Firefox原因：

1. Selenium IDE

2. FireBug

3. 对WebDriver API支持良好

WebDriverAPI 支持的开发语言

官网文档：https://docs.seleniumhq.org/docs/03_webdriver.jsp

1. Java

2. Python

3. PHP

4. JavaScript

5. Perl

6. Ruby

7. C#

为什么要学习WebDriver?

1. 自动化测试概念

2. WebDriver-定位元素

3. WebDriver-操作元素

环境搭建

为什么要环境搭建？

1. 盖房子

2. MP3

3. 开发语言

基于Python环境搭建

1. Windows系统（在这里我们以Windows7为案例）

2. Python 3.5（以上版本）

3. 安装selenium包

4. 浏览器

5. 安装PyCharm

selenium安装

说明：在安装selenium时，前提是Python3.5以上版本安装完毕且能正常运行

安装：pip install selenium==2.48.0

1). pip:通用的 Python 包管理工具。提供了对 Python 包的查找、下载、安装、卸载的功能。
2). install: 安装命令
3). selenium==2.48.0: 指定安装selenium2.48.0版本（如果不指定版本默认为最新版本）

卸载：pip uninstall selenium

查看：pip show selenium

火狐浏览器【推荐】

1. FireFox 48以上版本

Selenium 3.X +FireFox驱动——geckodriver

2. Firefox 48 以下版本

Selenium2.X 内置驱动

谷歌浏览器

selenium2.x/3.x +Chrome驱动

浏览器-总结

各个驱动下载地址： http://www.seleniumhq.org/download/

1. 浏览器的版本和驱动版本要一致！

（如果是32bit浏览器而Driver是64bit则会导致脚本运行失败！）

2. 浏览器驱动下载好后需要添加Path环境变量中，或者直接放到Python安装目录，因为Python自动添加到Path中

3. 推荐使用火狐浏览器(24、35)版

WebDriver-元素定位

目标:

1. 了解元素各种定位方法

2. 掌握id、name、class_name、tag_name、link_text、partial_link_text定位的使用

为什么要学习元素定位方式？

1. 让程序操作指定元素，就必须先找到此元素；

2. 程序不像人类用眼睛直接定位到元素；

3. WebDriver提供了八种定位元素方式

WebDriver 元素定位方式

1. id 2. name 3. class_name 4. tag_name

5. link_text 6. partial_link_text 7. Xpath 8. Css

定位方式分类-汇总

1). id、name、class_name：为元素属性定位

2). tag_name：为元素标签名称

3). link_text、partial_link_text：为超链接定位(a标签)

4). Xpath：为元素路径定位

5). Css：为CSS选择器定位

案例-1 注册页面

1. 为了更好的学习这八种方式和网络的关系，我们在案例-1注册页面上来练习自动化脚本设计，

提高学习效率和脚本执行速率

2. 语言使用Python

3. 开发工具使用Pycharm

4. selenium使用2.48.0(我自己在练习过程中使用的是最新版，即3.0系列)

id定位

说明：HTML规定id属性在整个HTML文档中必须是唯一的，id定位就是通过元素的id属性来定位元素；

前提：元素有id属性

实现案例-1需求：

1). 打开注册A.html页面，使用id定位，自动填写(账号A：admin、密码A:123456)

2). 填写完毕后，3秒钟关闭浏览器窗口

id定位方法：

find_element_by_id()

id定位实现步骤分析：

1. 导入selenium包 --> from selenium import webdriver
2. 导入time包 --> from time import sleep
3. 实例化火狐浏览器 --> driver=webdriver.Firefox()
4. 打开注册A.html --> driver.get(url)
5. 调用id定位方法 --> driver.find_element_by_id("")
6. 使用send_keys()方法发送数据 --> .send_keys("admin")
7. 暂停3秒 --> sleep(3)
8. 关闭浏览器 --> quit()
说明：为了接下来更好的而学习体验，我们先暂时使用下，send_keys()和quit()方法，在2.4节元素操作讲解；

id定位案例-1代码：

from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
user = driver.find_element_by_id("userA")
user.send_keys("admin")
pwd = driver.find_element_by_id("passwordA")
pwd.send_keys("123456")
sleep(3)
driver.quit()

id定位-总结

1. 导包

2. url中\\转义

3. id定位方法

3. 发送内容方法

4. 暂停方法

5. 关闭浏览器

name定位

说明：HTML规定name属性来指定元素名称，因此它的作用更像人名，name的属性值在当前文档中可以不是唯一的

，name定位就是根据元素name属性来定位（规定：在html中，id是唯一的类似身份证，name可以不是唯一的用来指定元素名称）

前提：元素有name属性

实现案例-1需求：

1). 打开注册A.html页面，使用name定位，自动填写(账号A：admin、密码A:123456)

2). 填写完毕后，3秒钟关闭浏览器窗口

name定位方法

find_element_by_name()

name定位实现步骤分析

from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
user = driver.find_element_by_name("userA")
user.send_keys("admin")
pwd = driver.find_element_by_name("passwordA")
pwd.send_keys("123456")
sleep(3)
driver.quit()

class_name定位

说明：HTML规定了class来指定元素的类名，用法和name、id类似；

允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开

前提：元素有class属性

实现案例-1需求：

通过class_name定位电话号码A，并发送18611111111

class_name定位方法

find_element_by_class_name()

class_name定位实现步骤分析

from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
tel = driver.find_element_by_class_name("telA")
tel.send_keys("18611111111")
sleep(3)
driver.quit()

tag_name定位

说明：HTML本质就是由不同的tag(标签)组成，而每个tag都是指同一类，所以tag定位效率低，

一般不建议使用；tag_name定位就是通过标签名来定位；

实现案例-1需求：

1). 打开注册A.html页面，使用tag_name定位，自动填写(账号A：admin)

2). 填写完毕后，3秒钟关闭浏览器窗口

tag_name定位方法

1. find_element_by_tag_name()

返回：符合条件的第一个标签

2. 如何获取第二个元素？稍后(2.7节)讲解

tag_name定位实现步骤分析

from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
user = driver.find_element_by_tag_name("input")
user.send_keys("admin")
sleep(3)
driver.quit()

link_text定位

说明：link_text定位与前面4个定位有所不同，它专门用来定位超链接文本（<a>标签</a>）。

实现案例-1需求：

1). 打开注册A.html页面，使用link_text定位(访问新浪网站)超链接

2). 3秒钟关闭浏览器窗口

link_text定位方法

1. 方法：find_element_by_link_text()

2. 说明：需要传入a标签全部文本(访问新浪网站)

link_text 步骤分析

# 1. 参考id定位
# 2. 点击 --> click()
from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
driver.find_element_by_link_text("访问 新浪 网站").click()
sleep(3)
driver.quit()

partial_link_text定位

说明：partial_link_text定位是对link_text定位的补充，partial_like_text为模糊匹配；link_text全部匹配

实现案例-1需求：

1). 打开注册A.html页面，使用partial_link_text定位(访问新浪网站)超链接

2). 3秒钟关闭浏览器窗口

partial_link_text定位方法

1. 方法：find_element_by_partial_link_text()

2. 说明：需要传入a标签局部文本-能表达唯一性(访问新浪网站)

partial_link_text 步骤分析

from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
driver.find_element_by_partial_link_text("新浪").click()
sleep(3)
driver.quit()

提示

在我们学习使用以上方法的时候，发现有个共同的相似方法：

find_element[s]_by_XXX()

作用：

1). 查找定位所有符合条件的元素

2). 返回的定位元素格式为数组(列表)格式；

说明：

1). 列表数据格式的读取需要指定下标(下标从0开始)

操作(tag_name)

说明：使用tag_name获取第二个元素(密码框)

代码：
    ...
    driver.find_elements_by_tag_name("input")[1].send_keys("123456")
    ...

定位总结

1. id、name、class_name

2. tag_name

3. link_text、partial_link_text

4. find_elements_by_XXX()

思考？

1. 在实际项目中标签没有id、name、class属性该如何定位？

2. id、name、class属性值为动态获取，随着刷新或加载而变化，该如何定位？

Xpath、CSS定位

Xpath定位

目标

1. 熟悉Xpath定位策略

2. 熟悉CSS定位策略

为什么要学习Xpath、CSS定位？

1. 在实际项目中标签没有id、name、class属性

2. id、name、class属性值为动态获取，随着刷新或加载而变化

什么是Xpath？

1. XPath即为XML Path 的简称，它是一种用来确定XML文档中某部分位置的语言。

2. HTML可以看做是XML的一种实现，所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。

XML：一种标记语言，用于数据的存储和传递。后缀.xml结尾

提示：Xpath为强大的语言，那是因为它有非常灵活定位策略；

Xpath定位策略(方式)

1. 路径-定位

1). 绝对路径

2). 相对路径

2. 利用元素属性-定位

3. 层级与属性结合-定位

4. 属性与逻辑结合-定位

Xpath定位方法

driver.find_element_by_xpath()

路径(绝对路径、相对路径)

绝对路径：从最外层元素到指定元素之间所有经过元素层级路径 ；如:/html/body/div/p[2]
          提示：
              1). 绝对路径以/开始
              2). 使用Firebug可以快速生成，元素XPath绝对路径

相对路径：从第一个符合条件元素开始(一般配合属性来区分)；如：//input[@id='userA']
          提示：
              1). 相对路径以//开始
              2). 使用Friebug扩展插件FirePath可快速生成，元素相对路径

提示：为了方便练习Xpath，可以在FireBug内安装扩展插件-FireFinder插件；
      1). 火狐浏览器-->组件管理器-->搜索FireFinder

使用Xpath实现案例-1

需求：

1). 使用绝对路径和相对路径分别实现，账号A：admin;密码A：123456；自动化脚本设计

from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
# 使用xpath绝对路径定位账户框和密码框,下标从1开始
driver.find_element_by_xpath("/html/body/form/div/fieldset/p[1]/input").send_keys("admin")
driver.find_element_by_xpath("/html/body/form/div/fieldset/p[2]/input").send_keys("123456")
sleep(3)
driver.quit()

from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
# 使用xpath相对路径定位账户框和密码框,下标从1开始
driver.find_element_by_xpath("//input[@id='userA']").send_keys("admin")
driver.find_element_by_xpath("//input[@id='passwordA']").send_keys("123456")
sleep(3)
driver.quit()

利用元素属性

说明：快速定位元素，利用元素唯一属性；
示例：//*[@id='userA']

层级与属性结合

说明：要找的元素没有属性，但是它的父级有；

示例：//*[@id='p1']/input

解释：使用相对路径找的input元素没有属性，但它的父级属性为id=‘p1'。这里的*号指代不确定元素，相当于占位

属性与逻辑结合

说明：解决元素之间个相同属性重名问题

示例：//*[@id='telA' and @class='telA']

Xpath-延伸

//*[text()="xxx"] 文本内容是xxx的元素 #//*[text()="访问新浪网站"] 超文本标签的文本

//*[starts-with(@attribute,'xxx')] 属性以xxx开头的元素

//*[contains(@attribute,'xxx')] 属性中含有xxx的元素

Xpath-总结

1. 如何通过Friebug快速生成绝对路径

2. 如果通过Friebug快速生成相对路径

3. Xpath策略有那些

CSS定位

什么是CSS？

1. CSS（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式；

(css语言书写两个格式：

1. 写在HTML语言中<style type="text/css">...

2. 写在单独文件中后缀.css

)

2. 而在CSS语言中有CSS选择器(不同的策略选择元素)，在Selenium中也可以使用这种选择器；

提示：

1. 在selenium中极力推荐CSS定位，因为它比XPath定位速度要快

2. css选择器语法非常强大，在这里我们只学习在测试中常用的几个

CSS定位方法

driver.find_element_by_css_selector()

CSS定位常用策略 (方式)

1. id选择器

2. class选择器

3. 元素选择器

4. 属性选择器

5. 层级选择器

id选择器

说明：根据元素id属性来选择

格式：#id 如：#userA <选择id属性值为userA的所有元素>

使用CSS实现案例-2

需求：

1). 使用CSSid定位实现，账号A：admin;密码A：123456；自动化脚本设计

from selenium import webdriver
from time import sleep
driver = webdriver.Firefox()
url = "D:\\BaiduNetdiskDownload\\19黑马测试基础+就业\\web自动化Day01\\02_其他资料\\注册A.html"
driver.get(url)
driver.find_element_by_css_selector("#userA").send_keys("admin")
driver.find_element_by_css_selector("#passwordA").send_keys("123456")
sleep(3)
driver.quit()

class选择器

说明：根据元素class属性来选择

格式：.class 如：.telA <选择class属性值为telA的所有元素>

元素选择器

说明：根据元素的标签名选择

格式：element 如：input <选择所有input元素>

属性选择器

说明：根据元素的属性名和值来选择

格式：[attribute=value] 如：[type="password"] <选择所有type属性值为password的值>

层级选择器

说明：根据元素的父子关系来选择

格式：element>element 如：p>input <返回所有p元素下所有的input元素>

提示：> 可以用空格代替如：p input 或者 p [type='password']

CSS延伸

1. input[type^='p'] 说明：type属性以p字母开头的元素

2. input[type$='d'] 说明：type属性以d字母结束的元素

3. input[type*='w'] 说明：type属性包含w字母的元素

CSS总结

XPath与CSS类似功能对比

说明：由于显示排版原因以上所有(※)号代替(*)

八种元素定位总结

1. id

2. name

3. class_name

4. tag_name

5. link_text

6. partial_link_text

7. Xpath

8. Css

说明：

1). 元素定位我们就学到这里了

2). WebDriver除了提供以上定位API方法(driver.find_element_by_xxx())

外，还提供了另外一套写法；

3). 调用find_element()方法，通过By来声明定位的方法，并且传入对应的方法和参数（了解-熟悉即可）

定位(另一种写法)-延伸

说明：第二种方法使用By类的封装的方法,所以需要导入By类包

导入By类

导包：from selenium.webdriver.common.by import By

By类的方法

方法：find_element(By.ID,"userA")

备注：需要两个参数，第一个参数为定位的类型由By提供，第二个参数为定位的具体方式

示例：

1. driver.find_element(By.CSS_SELECTOR,'#emailA').send_keys("123@126.com")

2. driver.find_element(By.XPATH,'//*[@id="emailA"]').send_keys('234@qq.com')

3. driver.find_element(By.ID,"userA").send_keys("admin")

4. driver.find_element(By.NAME,"passwordA").send_keys("123456")

5. driver.find_element(By.CLASS_NAME,"telA").send_keys("18611111111")

6. driver.find_element(By.TAG_NAME,'input').send_keys("123")

7. driver.find_element(By.LINK_TEXT,'访问新浪网站').click()

8. driver.find_element(By.PARTIAL_LINK_TEXT,'访问').click()

find_element_by_xxx()和find_element() 区别

说明：通过查看find_element_by_id底层实现方法，发现底层也是调用的By类方法进行的封装；

def find_element_by_id(self, id_):
    """Finds an element by id.

    :Args:
     - id\_ - The id of the element to be found.

    :Usage:
        driver.find_element_by_id('foo')
    """
    return self.find_element(by=By.ID, value=id_)

总结：虽然方法一样，但WebDriver推荐 find_element_by_xxx()这种方法，更加对人为友好

posted @ 2020-10-11 10:48 幸福来之不易阅读(507) 评论(0) 收藏举报

刷新页面返回顶部

幸福来之不易

WebDriver基础篇

WebDriver(Selenium2.0)

WebDriver概述、环境搭建

什么是WebDriver?

WebDriverAPI 支持的浏览器

WebDriverAPI 支持的开发语言

为什么要学习WebDriver?

环境搭建

为什么要环境搭建？

基于Python环境搭建

selenium安装

火狐浏览器【推荐】

浏览器-总结

WebDriver-元素定位

为什么要学习元素定位方式？

WebDriver 元素定位方式

定位 总结

思考？

Xpath、CSS定位

Xpath定位

Xpath-总结

CSS定位

CSS总结

XPath与CSS类似功能对比

八种元素定位总结

定位(另一种写法)-延伸

定位总结