Web自动化测试预见·软件测试技术专业软件测试之道

洞见 SELENIUM 自动化测试

2018-01-21  本文已影响660人  厲铆兄

洞见SELENIUM自动化测试

写在最前面：目前自动化测试并不属于新鲜的事物，或者说自动化测试的各种方法论已经层出不穷，但是，能够在项目中持之以恒的实践自动化测试的团队，却依旧不是非常多。有的团队知道怎么做，做的还不够好；有的团队还正在探索和摸索怎么做，甚至还有一些多方面的技术上和非技术上的旧系统需要重构……

本文将会从使用和实践两个视角，尝试对基于Web UI自动化测试做细致的分析和解读，给各位去思考和实践做一点引路，以便各团队能找到更好的方式。

1. 使用测试工具

《论语》有云：工欲善其事，必先利其器。在开始具体的自动化测试之前，我们需要做好更多的准备，包括以下几个方面：

接下来的第一部分内容，我们将会从上述的几个方面进行探讨。

1.1 自动化测试理论介绍

1.2 自动化测试工具

基于Web UI的自动化测试工具主要有两大类：付费的商业版工具和免费使用的开源版工具。典型的有两种：

1.2.1 Selenium 基本介绍

Selenium`是开源的自动化测试工具，它主要是用于Web 应用程序的自动化测试，不只局限于此，同时支持所有基于web 的管理任务自动化。

1.2.2 JetBrains PyCharm 使用

1.2.3 Selenium 的环境搭建

1.3 Selenium 的最简脚本

通过上一节的环境安装成功以后，我们可以进行第一个对Selenium 的使用，就是最简脚本编写。脚本如下：

# 声明一个司机，司机是个Chrome类的对象
driver = webdriver.Chrome()

# 让司机加载一个网页
driver.get("http://demo.ranzhi.org")

# 给司机3秒钟去打开
sleep(3)

# 开始登录
# 1. 让司机找用户名的输入框
we_account = driver.find_element_by_css_selector('#account')
we_account.clear()
we_account.send_keys("demo")

# 2. 让司机找密码的输入框
we_password = driver.find_element_by_css_selector('#password')
we_password.clear()
we_password.send_keys("demo")

# 3. 让司机找 登录按钮 并 单击
driver.find_element_by_css_selector('#submit').click()
sleep(3)

实际上一段20行的代码，也不能算太少了。但是这段代码的使用，确实体现了 Selenium 的最简单的使用。我们在下面内容进行阐述。

1.4 Selenium WebDriver API 的使用

通过上述最简脚本的使用，我们可以来进一步了解 Selenium 的使用。事实上，上一节用的，便是 Selenium 的 WebDriver API。API（Application Programming Interface，应用程序编程接口，即通过编程语言，操作 WebDriver 的方法集合）

Selenium WebDriver API 官方参考：http://seleniumhq.github.io/selenium/docs/api/py/

具体API文档地址：https://seleniumhq.github.io/selenium/docs/api/py/api.html

1.4.1 控制浏览器

浏览器的控制也是自动化测试的一个基本组成部分，我们可以将浏览器最大化，设置浏览器的高度和宽度以及对浏览器进行导航操作等。

# 浏览器打开网址
driver.get("https://www.baidu.com")

# 浏览器最大化
driver.maximize_window()

# 设置浏览器的高度为800像素，宽度为480像素
driver.set_window_size(480, 800)

# 浏览器后退
driver.back()

# 浏览器前进
driver.forward()

# 浏览器关闭
driver.close()

# 浏览器退出
driver.quit()

1.4.2 元素定位操作

WebDriver提供了一系列的定位符以便使用元素定位方法。常见的定位符有以下几种：

那么我们以下的操作将会基于上述的定位符进行定位操作。

对于元素的定位，WebDriver API可以通过定位简单的元素和一组元素来操作。在这里，我们需要告诉Selenium如何去找元素，以至于他可以充分的模拟用户行为，或者通过查看元素的属性和状态，以便我们执行一系列的检查。

在Selenium2中，WebDriver提供了多种多样的find_element_by方法在一个网页里面查找元素。这些方法通过提供过滤标准来定位元素。当然WebDriver也提供了同样多种多样的find_elements_by的方式去定位多个元素。

尽管上述的方式，可以进行元素定位，实际上我们也是更多的用组合的方式进行元素定位。

方法Method 描述Description 参数Argument 示例Example
id 该方法通过ID的属性值去定位查找单个元素 id: 需要被查找的元素的ID find_element_by_id('search')
name 该方法通过name的属性值去定位查找单个元素 name: 需要被查找的元素的名称 find_element_by_name('q')
class name 该方法通过class的名称值去定位查找单个元素 class_name: 需要被查找的元素的类名 find_element_by_class_name('input-text')
tag_name 该方法通过tag的名称值去定位查找单个元素 tag: 需要被查找的元素的标签名称 find_element_by_tag_name('input')
link_text 该方法通过链接文字去定位查找单个元素 link_text: 需要被查找的元素的链接文字 find_element_by_link_text('Log In')
partial_link_text 该方法通过部分链接文字去定位查找单个元素 link_text: 需要被查找的元素的部分链接文字 find_element_by_partial_link_text('Long')
xpath 该方法通过XPath的值去定位查找单个元素 xpath: 需要被查找的元素的xpath find_element_by_xpath('//*[@id="xx"]/a')
css_selector 该方法通过CSS选择器去定位查找单个元素 css_selector: 需要被查找的元素的ID find_element_by_css_selector('#search')

接下来的列表将会详细展示find_elements_by的方法集合。这些方法依据匹配的具体标准返回一系列的元素。

方法Method 描述Description 参数Argument 示例Example
id 该方法通过ID的属性值去定位查找多个元素 id: 需要被查找的元素的ID find_elements_by_id('search')
name 该方法通过name的属性值去定位查找多个元素 name: 需要被查找的元素的名称 find_elements_by_name('q')
class_name 该方法通过class的名称值去定位查找多个元素 class_name: 需要被查找的元素的类名 find_elements_by_class_name('input-text')
tag_name 该方法通过tag的名称值去定位查找多个元素 tag: 需要被查找的元素的标签名称 find_elements_by_tag_name('input')
link_text 该方法通过链接文字去定位查找多个元素 link_text: 需要被查找的元素的链接文字 find_elements_by_link_text('Log In')
partial_link_text 该方法通过部分链接文字去定位查找多个元素 link_text: 需要被查找的元素的部分链接文字 find_elements_by_partial_link_text('Long')
xpath 该方法通过XPath的值去定位查找多个元素 xpath: 需要被查找的元素的xpath find_elements_by_xpath("//div[contains(@class,'list')]")
css_selector 该方法通过CSS选择器去定位查找多个元素 css_selector: 需要被查找的元素的ID find_element_by_css_selector('.input_class')
依据ID查找

请查看如下HTML的代码，以便实现通过ID的属性值去定义一个查找文本框的查找：

<input id="search" type="text" name="q" value=""
       class="input-text" maxlength="128" autocomplete="off"/>

根据上述代码，这里我们使用find_element_by_id()的方法去查找搜索框并且检查它的最大长度maxlength属性。我们通过传递ID的属性值作为参数去查找，参考如下的代码示例：

def test_search_text_field_max_length(self):
    # get the search textbox
    search_field = self.driver.find_element_by_id("search")
    # check maxlength attribute is set to 128
    self.assertEqual("128", search_field.get_attribute("maxlength"))

如果使用find_elements_by_id()方法，将会返回所有的具有相同ID属性值的一系列元素。

依据名称name查找

这里还是根据上述ID查找的HTML代码，使用find_element_by_name的方法进行查找。参考如下的代码示例：

# get the search textbox
self.search_field = self.driver.find_element_by_name("q")

同样，如果使用find_elements_by_name()方法，将会返回所有的具有相同name属性值的一系列元素。

依据class name查找

除了上述的ID和name的方式查找，我们还可以使用class name的方式进行查找和定位。

事实上，通过ID，name或者类名class name查找元素是最提倡推荐的和最快的方式。当然Selenium2 WebDriver也提供了一些其他的方式，在上述三类方式条件不足，查找无效的时候，可以通过这些其他方式来查找。这些方式将会在后续的内容中讲述。

请查看如下的HTML代码，通过改代码进行练习和理解.

<button type="submit" title="Search" class="button">
  <span><span>Search</span></span>
</button>

根据上述代码，使用find_element_by_class_name()方法去定位元素。

def test_search_button_enabled(self):
    # get Search button
    search_button = self.driver.find_element_by_class_name("button")
    # check Search button is enabled
    self.assertTrue(search_button.is_enabled())

同样的如果使用find_elements_by_class_name()方法去定位元素，将会返回所有的具有相同name属性值的一系列元素。

依据标签名tag name查找

利用标签的方法类似于利用类名等方法进行查找。我们可以轻松的查找出一系列的具有相同标签名的元素。例如我们可以通过查找表中的<tr>来获取行数。

下面有一个HTML的示例，这里在无序列表中使用了<img>标签。

<ul class="promos">
    <li>
        <a href="http://demo.magentocommerce.com/home-decor.html">
            <img src="/media/wysiwyg/homepage-three-column-promo-
        01B.png" alt="Physical &amp; Virtual Gift Cards">
        </a>
    </li>
    <li>
        <a href="http://demo.magentocommerce.com/vip.html">
            <img src="/media/wysiwyg/homepage-three-column-promo-
        02.png" alt="Shop Private Sales - Members Only">
        </a>
    </li>
    <li>
        <a href="http://demo.magentocommerce.com/accessories/
        bags-luggage.html">
            <img src="/media/wysiwyg/homepage-three-columnpromo-
        03.png" alt="Travel Gear for Every Occasion">
        </a>
    </li>
</ul>

这里面我们使用find_elements_by_tag_name()的方式去获取全部的图片，在此之前，我们将会使用find_element_by_class_name()去获取到指定的<ul>。

具体代码如下：

def test_count_of_promo_banners_images(self):
    # get promo banner list
    banner_list = self.driver.find_element_by_class_name("promos")
    # get images from the banner_list
    banners = banner_list.find_elements_by_tag_name("img")
    # check there are 20 tags displayed on the page
    self.assertEqual(20, len(banners))
依据链接文字link查找

链接文字查找通常比较简单。使用find_element_by_link_text请查看以下示例

<a href="#header-account" class="skip-link skip-account">
    <span class="icon"></span>
    <span class="label">ACCOUNT Description</span>
</a>

测试代码如下：

def test_my_account_link_is_displayed(self):
    # get the Account link
    account_link =
    self.driver.find_element_by_link_text("ACCOUNT Description")
    # check My Account link is displayed/visible in
    # the Home page footer
    self.assertTrue(account_link.is_displayed())
依据部分链接文字partial text查找

这里依旧使用上述的列子进行代码编写：

def test_account_links(self):
    # get the all the links with Account text in it
    account_links = self.driver.\
    find_elements_by_partial_link_text("ACCOUNT")
    # check Account and My Account link is
    # displayed/visible in the Home page footer
    self.assertTrue(2, len(account_links))
依据XPath进行查找

XPath是一种在XML文档中搜索和定位节点node的一种查询语言。所有的主流Web浏览器都支持XPath。Selenium2可以用强大的XPath在页面中查找元素。

常用的XPath的方法有starts-with()，contains()和ends-with()等

若想要了解更多关于XPath的内容，请查看http://www.w3schools.com/XPath/

如下有一段HTML代码，其中里面的<img>没有使用ID，name或者类属性，所以我们无法使用之前的方法。亚这里我们可以通过<img>的alt属性，定位到指定的tag。

<ul class="promos">
    <li>
        <a href="http://demo.magentocommerce.com/home-decor.html">
            <img src="/media/wysiwyg/homepage-three-column-promo-
        01B.png" alt="Physical &amp; Virtual Gift Cards">
        </a>
    </li>
    <li>
        <a href="http://demo.magentocommerce.com/vip.html">
            <img src="/media/wysiwyg/homepage-three-column-promo-
        02.png" alt="Shop Private Sales - Members Only">
        </a>
    </li>
    <li>
        <a href="http://demo.magentocommerce.com/accessories/
        bags-luggage.html">
            <img src="/media/wysiwyg/homepage-three-columnpromo-
        03.png" alt="Travel Gear for Every Occasion">
        </a>
    </li>
</ul>

具体代码如下：

def test_vip_promo(self):
    # get vip promo image
    vip_promo = self.driver.\
    find_element_by_xpath("//img[@alt='Shop Private Sales - Members Only']")
    # check vip promo logo is displayed on home page
    self.assertTrue(vip_promo.is_displayed())
    # click on vip promo images to open the page
    vip_promo.click()
    # check page title
    self.assertEqual("VIP", self.driver.title)

当然，如果使用find_elements_by_xpath()的方法，将会返回所有匹配了XPath查询的元素。

依据CSS选择器进行查找

CSS是一种设计师用来描绘HTML文档的视觉的层叠样式表。一般来说CSS用来定位多种多样的风格，同时可以用来是同样的标签使用同样的风格等。类似于XPath，Selenium2也可以使用CSS选择器来定位元素。

请查看如下的HTML文档。

<div class="minicart-wrapper">
    <p class="block-subtitle">Recently added item(s)
        <a class="close skip-link-close" href="#" title="Close">×</a>
    </p>
    <p class="empty">You have no items in your shopping cart.
    </p>
</div>

我们来创建一个测试，验证这些消息是否正确。

def test_shopping_cart_status(self):
    # check content of My Shopping Cart block on Home page
    # get the Shopping cart icon and click to open the
    # Shopping Cart section
    shopping_cart_icon = self.driver.\
    find_element_by_css_selector("div.header-minicart
                                 span.icon")
    shopping_cart_icon.click()
    # get the shopping cart status
    shopping_cart_status = self.driver.\
    find_element_by_css_selector("p.empty").text
    self.assertEqual("You have no items in your shopping cart.",
    shopping_cart_status)
    # close the shopping cart section
    close_button = self.driver.\
    find_element_by_css_selector("div.minicart-wrapper
                                 a.close")
    close_button.click()
特殊 iframe 操作

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

iframe： 紫禁城

在一个<html>中，包含了另一个<html>

示例

<html>
  <head>
    <title>iframe示例</title>
  </head>
  <body>
    <h1>
      这里是H1，标记了标题
    </h1>
    <p>
      这里是段落，标记一个段落，属于外层
    </p>
    <div>
      <iframe id="iframe-1">
        <html>
          <body>
            <p>
              这里是个段落，属于内层，内联框架中的
            </p>
            <div id="div-1">
              <p class="hahahp">
                这里是div中的段落，需要被定位
              </p>
            </div>
          </body>
        </html>
      </iframe>
    </div>
  </body>
</html>

需要定位上面示例中的<p>:这里是div中的段落，需要被定位

如下是selenium WebDiriver的代码

## 查找并定位 iframe
element_frame = driver.find_element_by_css_selector('#iframe-1')
## 切换到刚刚查找到的 iframe
driver.switch_to.frame(element_frame)
## 定位 <p>
driver.find_element_by_css_selector('#div-1 > p')
## TODO....
## 退出刚刚切换进去的 iframe
driver.switch_to.default_content()
特殊 Select 操作

<select> 是选择列表

Select 是个selenium的类selenium.webdriver.support.select.Select

Select 类的路径：

C:\Python35\Lib\site-packages\selenium\webdriver\support\select.py

<select id="brand">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

示例，选择 Audi

## 查找并定位到 select
element_select = driver.find_element_by_css_selector('#brand')
## 用Select类的构造方法，实例化一个对象 object_select
object_select = Select(element_select)
## 操作 object_select
object_select.select_by_index(3)
##　也可以这样
object_select.select_by_value('audi')
##　还可以这样
object_select.select_by_visible_text('Audi')
组合操作

自动化经验的积累，需要100%按照手工的步骤进行操作。

比如步骤如下：

  1. 点击一个 <a id="customer_chosen">
  2. 自动产生了一个 <ul id="customer_list">
  3. 点击<ul>的第五个<li>

代码示例

driver.find_element_by_css_selector('#customer_chosen').click()
sleep(1)
driver.find_element_by_css_selector('#customer_list > li:nth-child(5)')

1.4.3 鼠标事件操作

Web测试中，有关鼠标的操作，不只是单击，有时候还要做右击、双击、拖动等操作。这些操作包含在ActionChains类中。

常用的鼠标方法：

例子：

# 方法模拟鼠标右键，参考代码如下：
# 引入ActionChains 类
from selenium.webdriver.common.action_chains import ActionChains
...
# 定位到要右击的元素
right =driver.find_element_by_xpath("xx")
# 对定位到的元素执行鼠标右键操作
ActionChains(driver).context_click(right).perform()
...
# 定位到要双击的元素
double = driver.find_element_by_xpath("xxx")
# 对定位到的元素执行鼠标双击操作
ActionChains(driver).double_click(double).perform()

1.4.4 键盘事件操作

键盘操作经常处理的如下：

代码 描述
send_keys(Keys.BACKSPACE) 删除键(BackSpace)
send_keys(Keys.SPACE) 空格键(Space)
send_keys(Keys.TAB) 制表键(Tab)
send_keys(Keys.ESCAPE) 回退键(Esc)
send_keys(Keys.ENTER) 回车键(Enter)
send_keys(Keys.CONTROL,'a') 全选（Ctrl+A）
send_keys(Keys.CONTROL,'c') 复制（Ctrl+C）

代码如下

from selenium import webdriver

# 引入Keys 类包
from selenium.webdriver.common.keys import Keys
import time

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

# 输入框输入内容
driver.find_element_by_id("kw").send_keys("selenium")
time.sleep(3)

# 删除多输入的一个m
driver.find_element_by_id("kw").send_keys(Keys.BACK_SPACE)
time.sleep(3)

# 输入空格键+“教程”
driver.find_element_by_id("kw").send_keys(Keys.SPACE)
driver.find_element_by_id("kw").send_keys("教程")
time.sleep(3)

# ctrl+a 全选输入框内容
driver.find_element_by_id("kw").send_keys(Keys.CONTROL,'a')

1.4.5 截图操作

截图的方法：save_screenshot(file)

1.5 unittest 单元测试框

在上一节，我们对 Selenium WebDriver 的使用，仅仅停留在让网页自动的进行操作的阶段，并没有对任何一个步骤进行“检查”。当然，这样没有“检查”的操作，实际上是没有测试意义的。那么第一项，我们需要解决的便是“检查”的问题。

所谓“检查”，实际上就是断言。对需要检查的步骤操作，通过对预先设置的期望值，和执行结果的实际值之间的对比，得到测试的结果。在这里，我们并不需要单独的写 if 语句进行各种判定，而是可以使用编程语言中对应的单元测试框架，即可解决好此类问题。

目前 Java 语言主流的单元测试框架有 JUnit 和 TestNG。Python 语言主流的单元测试框架有 unittest 。本小节的内容，主要介绍 unittest 的使用，探讨单元测试框架如何帮助自动化测试。

接下来我们将会使用 Python 语言的unittest框架展开“检查”。unittest框架的原本的名字是PyUnit。是从JUnit 这样一个被广泛使用的 经典的Java应用开发的单元测试框架创造而来。类似的框架还有NUnit（.Net开发的单元测试框架）等。我们可以使用unittest框架为任意Python项目编写可理解的单元测试集合。现在这个unittest已经作为Python的标准库模块发布。我们安装完Python以后，便可以直接使用unittest。

使用unittest需要以下简单的三步：

unittest 并未使用 Java 语言常见的注解方式，依旧停留在 比较早期的 Java 版本中依靠方法名称进行识别的方式。主要有以下两个固定名字的方法：

具体的代码如下：

## 引入unittest模组
import unittest

## 定义测试类，名字为DemoTests
## 该类必须继承unittest.TestCase基类
class DemoTests(unittest.TestCase):

    ## 使用'@'修饰符，注明该方法是类的方法
    ## setUpClass方法是在执行测试之前需要先调用的方法
    ## 是开始测试前的初始化工作
    @classmethod
    def setUpClass(cls):
        print("call setUpClass()")
    
    ## 每一个测试开始前的预置条件
    def setUp(self):
        print("call setUp()")
        
    ## 每一个测试结束以后的清理工作
    def tearDown(self):
        print("call tearDown()")

    ## 测试一（务必以test开头）
    def test_01(self):
        print("call test_01()")
        pass

    ## 测试三（务必以test开头）
    def test_02(self):
        print("call test_02()")
        pass

    ## 测试三（务必以test开头）
    def test_03(self):
        print("call test_03()")
        pass

    ## tearDownClass方法是执行完所有测试后调用的方法
    ## 是测试结束后的清除工作
    @classmethod
    def tearDownClass(cls):
        print("call tearDownClass()")

# 执行测试主函数
if __name__ == '__main__':
    ## 执行main全局方法，将会执行上述所有以test开头的测试方法
    unittest.main(verbosity=2)

需要注意步骤：

  1. 引入 unittest 模组
  2. 继承 unittest.TestCase 类
  3. 做测试用例的方法，方法以 test_ 开头

上述代码运行结果如下：

call setUpClass()
call setUp()
call test_01()
call tearDown()
call setUp()
call test_02()
call tearDown()
call setUp()
call test_06()
call tearDown()
call tearDownClass()

1.6 为什么需要封装 Selenium

1.7 封装的概念与基本操作

1.8 Page-Object设计模式介绍

​

2. 构建测试方案

2.1 数据驱动在自动化测试中的应用

2.2 测试方案的编码实现

2.3 测试报告的生成

2.4 具体案例分析

自动化测试在路上

上一篇下一篇

猜你喜欢

热点阅读