UI自动化环境搭建与元素定位（一）

UI自动化测试

Selenium是非常优秀的WEB (UI) 自动化测试框架

最细的版本是Selenium4.x。Selenium支持主流的浏览器自动化测试，具体是Chrome,IE,Firefox等浏览器，Selenium也是支持主流的开发语言，如Python,Java,Net,PHP.

Selenium=WebDriver+Selenium

一、环境搭建的步骤：

1.安装Selenium的库，pip3 install selenium

2.安装Chrome浏览器

3.安装Chrome浏览器的驱动

A.查看Chrome浏览器版本，打开谷歌浏览器，点击帮助--》关于谷歌，查看谷歌浏览器版本

B.到淘宝源下载与浏览器版本匹配的Driver，选择windows版本

 

 

 

C.下载成功后，进行解压，并且以管理员身份运行

D.把这个Driver放到Python3的目录下

 

二、常用元素定位实战

webdriver之所以能够操作浏览器，是因为它首先需要定位到被操作的元素属性，
然后就可以对浏览器做各种操作，单个元素定位主页用到以下8种方法：

ID = "id"

NAME = "name"

TAG_NAME = "tag name"
CLASS_NAME = "class name"
XPATH = "xpath"

CSS_SELECTOR = "css selector"
LINK_TEXT = "link text"
PARTIAL_LINK_TEXT = "partial link text"

2.1 单个元素

2.1.1find_element_by_id

1.以定位id的元素属性为例，先通过控制器输入命令打开百度，

点击鼠标右键，检查，点击左上角的小箭头，将鼠标光标移动到输入框，获取到id的元素属性是‘kw’，

 

 

 

 

 

 

2.1.2、find_element_by_name

"""name的元素属性"""
driver = webdriver.Chrome()
driver.get('http://www.baidu.com')
#send_keys()--->输入的意思
driver.find_element_by_name('wd').send_keys('无涯 接口测试')
time.sleep(3)
driver.quit()

2.1.3、find_element_by_class_name

"""class_name的元素属性"""
driver = webdriver.Chrome()
driver.get('http://www.baidu.com')
 #send_keys()--->输入的意思
driver.find_element_by_class_name('s_ipt').send_keys('无涯 接口测试')
time.sleep(3)
driver.quit()

2.1.4、find_element_by_class_xpath

    当一个元素实在在定位不到的时候，也就是id,name,class都不可以的时候，可以使用xpath或者是css的模式，一般推荐使用xpath的方式，那么怎么获取xpth元素属性，下面为具体说下操作步骤：

1、鼠标到需要操作的元素属性

2、右键，点击Copy，点击Copy后，选择Copy Xpath，如下图所示：

 

 

当然如果是动态的ID，获取到的xpath也是错误的，那么这个时候怎么解决问题了？解决的思路就是点击Copy full Xpath，这样获取到的xpath是完整的，就不会因为动态的ID而导致错误。下面还是以百度搜索输入框，获取到它的xpath为：//*[@id="kw"]，下面具体显示实战的测试案例代码：

driver = webdriver.Chrome()
driver.get('http://www.baidu.com')
 #send_keys()--->输入的意思
driver.find_element_by_xpath('//*[@id="kw"]').send_keys('无涯 接口测试')
time.sleep(3)
driver.quit()

2.1.5、find_element_by_css_selector

            使用css的定位操作方式与xpath的操作步骤都是一样的，只不过有点区别的是在点击Copy后，需要点击的是Copy selector，具体如下图所示：

 

 调用的方法为find_element_by_css_selector， 百度搜索输入框获取到它的css为#kw，那么就以css的方式来演示这部分的测试实战代码，如下：

driver = webdriver.Chrome()
driver.get('http://www.baidu.com')
 #send_keys()--->输入的意思
driver.find_element_by_css_selector('#kw').send_keys('无涯 接口测试')
time.sleep(3)
driver.quit()

2.1.6、find_element_by_link_text

            在页面的交互种如果存在超链接，可以使用的方法为find_element_by_link_text，比如在百度首先我们需要点击新闻，那么就可以使用方法来进行定位了一般而言在a标签里面的，我们都可以理解为超链接，就可以使用该方法来进行具体的操作了，针对点击新闻的超链接测试代码为：

"""LINK_TEXT:超链接
PARTIAL_LINK_TEXT ：也是处理超链接，但是模糊搜索
"""
driver = webdriver.Chrome()
driver.get('http://www.baidu.com')
 #click():点击
 #driver.find_element_by_link_text('新闻').click()
driver.find_element_by_partial_link_text('闻').click()
time.sleep(3)
driver.quit()

 

2.1.7、find_element_by_tag_name

            tag_name可以理解为是标签，就是百度搜索输入框，它的标签是input，那么针对这种我们可以使用标签的方式来进行，使用到的方法是find_element_by_tag_name,测试实战代码如下：

"""元素定位的分类：
1.单个元素定位
2.多个元素定位，多个元素定位指的是元素的属性都一致，那么这时它的返回是列表，可以根据列表的索引来定位元素属性
3.不管是单个元素定位还是多个元素定位，它的方法都是8种，
"""
"""tagName"""
driver = webdriver.Chrome()
driver.get('http://www.baidu.com')
tags = driver.find_elements_by_tag_name('input')
tags[7].send_keys('接口测试')
time.sleep(3)
driver.quit()

 

 

面试题：css和xpath定位的区别？

css选择 是依据页面的数据样式定位的, 有标签选择, 类选择, id选择, 或者他们的交并集, 除此之外没有其他的辅助元素了

xpath 是路径表达式,所有元素和内容都可以成为路径的一部分. 两种定位方式功能基本一致, 但是xpath明显更强大, 只是xpath写起来较复杂,css写起来容易些

2.2 多个元素

          针对单个元素定位无法解决的问题，主要核心点获取到的元素属性都一样，比如就以百度搜索输入框为案例，我们使用的是input标签的方式进行，但是input标签有8个，那么就不是唯一的了，具体如下所示：

 

 

针对这种不是唯一的，我们可以使用多个元素定位的方式来解决，其实多个元素定位的核心思想是获取到的元素属性是一个列表，我们可以使用列表的索引来进行定位，比如针对标签的方法就是find_elements_by_tag_name()，当然其他的方法其实都是一样的，这里我们先获取到它的属性，然后输出，就可以看到它的数据是列表

实战：以登录新浪邮箱为例

先打开新浪邮箱的网页，鼠标右键点击检查--》点击左上角的箭头，将鼠标分别放在用户名、密码、登录处，获取元素的属性，随便输入用户名和密码，再退出网页

 

 

 

 三、Webdriver浏览器属性详解

3.1获取测试的地址

assert是Python原生的断言方法

 

 3.2获取当前页面的代码

"""获取当前页面代码"""
driver = webdriver.Chrome()
driver.get('https://mail.sina.com.cn/')
print (driver.page_source)
driver.quit()

3.3获取页面的title

driver = webdriver.Chrome()
driver.get('https://www.taobao.com/')
print (driver.title)
assert driver.title=='淘宝网 - 淘！ 我喜欢'
driver.quit()

 

3.4页面的前进和后退

 页面的前进使用到的方法为forward()，后面的后退使用到的方法为back()，

这主要应用于很多的业务场景，比如在第一次打开的是百度，后面由于测试的需求，打开的是bing搜索页面，那么可以回退回去，当然也可以再次前进到bing搜索的页面，具体如下：

"""页面的前进与后退"""
driver = webdriver.Chrome()
#浏览器最大化
driver.maximize_window()
driver.get('https://www.bing.com/')
time.sleep(3)
driver.get('https://www.baidu.com/')
time.sleep(3)
 #后退
driver.back()
print('当前地址：',driver.current_url)
time.sleep(3)
 #前进
driver.forward()
print('当前地址：',driver.current_url)
time.sleep(3)
driver.quit()

3.5多窗口实战

多窗口解决问题思路
1.先打开当前页面
2.然后获取当前页面放在一个变量中
3.打开新页面
4.获取所有页面并且放在一个变量中
5.循环所有页面，判断如果不是当前页面，那么就是在新的页面中

driver = webdriver.Chrome()
#浏览器最大化
driver.maximize_window()
driver.get('https://mail.sina.com.cn/')
#然后获取当前页面放在一个变量中
nowHandle=driver.current_window_handle
time.sleep(3)
driver.find_element_by_link_text('注册').click()
time.sleep(3)
#获取所有页面并且放在一个变量中
allHandles=driver.window_handles
#循环所有页面，判断如果不是当前页面，那么就是在新的页面
for handle in allHandles:
   if handle!=nowHandle:
      #从当前页面切换到新的页面
      driver.switch_to.window(handle)
      driver.find_element_by_name('email').send_keys('lm123')
      time.sleep(5)
      #关闭新的浏览器
      driver.close()
#切换到原来的页面
driver.switch_to.window(nowHandle)
time.sleep(5)
driver.find_element_by_id('freename').send_keys('jhg2675')
time.sleep(3)
driver.quit()