回顾 Selenium家族

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

1. SeleniumIDE

2. Selenium2.0(WebDriver)

提示：

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

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

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

WebDriver概述

1. 什么是WebDriver?

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

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

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

说明：

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

思考：

WebDriverAPI都支持哪些浏览器？

1.1 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(界面)运行，运行速度最快；

推荐原因：

1. Selenium IDE

2. FireBug

3. 对WebDriver API支持良好

思考：

我们知道API为应用编程时使用，那么它支持哪些编程语言来使用呢？

1.2 WebDriverAPI 支持的开发语言

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

1. Java

2. Python

3. PHP

4. JavaScript

5. Perl

6. Ruby

7. C#

2. 为什么要学习WebDriver?

1. 自动化测试概念

2. WebDriver-定位元素

3. WebDriver-操作元素

3. 环境搭建

3.1 为什么要环境搭建？

1. 盖房子

2. MP3

3. 开发语言

3.2 基于Python环境搭建

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

2. Python 3.5（以上版本）

3. 安装selenium包

4. 浏览器

5. 安装PyCharm

4. selenium安装

说明：

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

4.1 selenium 安装、卸载、查看命令

安装：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

4.2 火狐浏览器【推荐】

1. FireFox 48以上版本 Selenium 3.X +FireFox驱动——geckodriver

2. Firefox 48 以下版本 Selenium2.X 内置驱动

4.3 IE浏览器(了解)

1. IE 9以上版本 Selenium3.X +IE驱动

2. IE 9以下版本 Selenium 2.X +IE驱动

4.4 谷歌浏览器

selenium2.x/3.x +Chrome驱动

4.5 浏览器-总结

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

1. 浏览器的版本和驱动版本要一致！ （如果是32bit浏览器而Driver是64bit则会导致脚本运行失败！）

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

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

5. 总结

1. WebDriver是什么？

2. 为什么要搭建环境？

3. selenium 安装、卸载、查看命令

4. 为什么推荐火狐浏览器和火狐48版本以下

WebDriver-元素定位

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

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

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

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

2. 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

2.1 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()

id定位 案例-1代码：

from selenium import webdriver
from time import sleep
driver=webdriver.Firefox()
url='E:\\测试\\课件\\Web自动化\\Web自动化课件\\02img\\注册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定位方法

4. 发送内容方法

5. 暂停方法

6. 关闭浏览器

2.2 name定位

说明：

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

前提：

元素有name属性

实现案例-1需求：

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

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

name定位方法

find_element_by_name()

name定位实现 步骤分析

1. 参考id定位

2.3 class_name定位

说明：

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

前提：

元素有class属性

实现案例-1需求：

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

class_name定位方法

find_element_by_class_name()

class_name定位实现 步骤分析

1. 参考id定位

2.4 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. 如何获取第二个元素？稍后讲解

tag_name定位实现 步骤分析

1. 参考id定位

2.5 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()

2.6 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 步骤分析

1. 参考link_text定位

提示 :

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

2.7 find_element[s]_by_XXX()

作用：

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

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

说明：

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

操作(2.4 tag_name)

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

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

3. 2.1-2.6定位 总结

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、CSS定位？

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

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

1. 什么是Xpath？

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

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

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

提示：

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

思考：

Xpath有那些策略呢？

2. Xpath定位策略(方式)

1. 路径-定位

1). 绝对路径

2). 相对路径

2. 利用元素属性-定位

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

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

Xpath定位 方法

driver.find_element_by_xpath()

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

绝对路径：

从最外层元素到指定元素之间所有经过元素层级路径 ；如:/html/body/div/p[2]

提示：

1). 绝对路径以/开始

2). 使用Firebug可以快速生成，元素XPath绝对路径

相对路径：

从第一个符合条件元素开始(一般配合属性来区分)；如：//input[@id='userA']

提示：

1). 相对路径以//开始

2). 使用Friebug扩展插件FirePaht可快速生成，元素相对路径

提示：

为了方便练习Xpath，可以在FireBug内安装扩展插件-FireFinder插件；

1). 火狐浏览器-->组件管理器-->搜索FireFinder

使用Xpath实现 案例-1

需求：

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

2.2 利用元素属性

说明：

快速定位元素，利用元素唯一属性；

示例：//*[@id='userA']

2.3 层级与属性结合

说明：

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

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

2.4 属性与逻辑结合

说明：

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

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

2.5 Xpath-延伸

//*[text()="xxx"] 文本内容是xxx的元素

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

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

2.6 Xpath-总结

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

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

3. Xpath策略有那些

3. CSS定位

3.1 什么是CSS？

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

(css语言书写两个格式：

1. 写在HTML语言中

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

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

提示：

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

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

CSS定位 方法

driver.find_element_by_css_selector()

3.2 CSS定位常用策略 (方式)

1. id选择器

2. class选择器

3. 元素选择器

4. 属性选择器

5. 层级选择器

id选择器

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

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

使用CSS实现 案例-2

需求：

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

class选择器

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

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

元素选择器

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

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

属性选择器

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

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

层级选择器

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

格式：element>element 如：p>input

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

3.3 CSS延伸

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

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

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

3.4 CSS总结

选择器	例子	描述
#id	#userA	id选择器，选择id="userA"的所有元素
.class	.telA	class选择器，选择class="telA"的所有元素
element	input	选择所有input元素
[attribute=value]	[type="password"]	选择type="password"的所有元素
element>element	p>input	选择所有父元素为p元素的input元素

 

 

 

 

 

 

 

4. XPath与CSS类似功能对比

定位方式	XPath	CSS
元素名	//input	input
id	//input[@id='userA']	#userA
class	//*[@class='telA']	.telA
属性	1. //*[text()="xxx"] 2. //*[starts-with(@attribute,'xxx')] 3. //*[contains(@attribute,'xxx')]	1. input[type^='p'] 2. input[type$='d'] 3. input[type*='w']

 

 

 

 

 

 

 

5. 八种元素定位总结：

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来声明定位的方法，并且传入对应的方法和参数（了解-熟悉即 可）

6. 定位(另一种写法)-延伸【了解】

说明：

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

6.1 导入By类

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

6.2 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()

6.3 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()这种方法