背景

最近手头上需要新接一个 UI 测试的工作,抽空研究了一下,发现现在网上所有流传的方式都是用Selenium来执行,这个本身我觉得没什么毛病,但是测试思想还是太陈旧了,依然是使用findElementById等方法来执行,这种情况下,前端的维护成本高,稳定性差等问题都非常明显,因此有了著名的测试三角形。

历史

说明这个问题的时候,需要了解整个前端技术的发展过程。

那个时候压根没有 JS 什么事,基本上都是静态页面,数据交互以表单的形式为主。

出现了Ajax技术,整个前端的发展有了一个质的飞跃,异步加载的机制让前端衍生了非常多的场景,js逐渐进入大家的视线,产生了神器jQuery,整个前端的交互变得丰富多彩。

出现了Angular,React,Vue等数据驱动的框架,前端开始向后端看齐。

测试现状

按照现有的测试方式,都是使用Selenium进行测试,而Selenium的产生时间,是在 Web2.0 时代,那个时代,大部分网页的编写方式都是靠jQuery来处理,而jQuery的开发思维是操作DOM结构,因此使用Selenium来测试非常的方便,因为开发要实现某个元素的变化,就必须用jQuery的选择器来选中这个元素,然后再进行对应的操作,比如下面的代码:

$('#id').on('click', function({alert('hello')}))

那么测试的时候用Selenium来操作也没有问题,因为开发要选中某个元素,开发的时候必定会留下方便选中的方式,比如写一个id,或者某些其他的标记,那么这些标记测试也是可以用的。

但是近几年来,用Selenium来测试为什么越来越麻烦和困难了呢?原因就是开发已经不使用jQuery来开发了,他们已经变为数据驱动了,不需要留标记来让代码选中元素了,那么自然的,使用Selenium来测试,就有缺陷了,选中元素变得特别的困难,而且通过Xpath来选择特别不稳定,再加上前端的元素变动频繁,导致 UI 测试的成本特别大。

而基于数据驱动开发则与以前的开发方式完全是两个维度。数据驱动开发的时候只需要关心数据,比如有一个表格,那么只要在html中定义好表格的元素,数据定一个一个空列表就行了,需要加载的数据的时候,只要赋值给列表,前端的框架会自动把数据渲染成表格,比如这样的代码:

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

要改变表格里面的内容,只需要修改tableData的数据就行,而不需要选中表格的某一行某一列的某个值进行替换。

改善方法

既然前端框架已经让开发者可以忽略html的结构,只需要玩转数据。那么我们测试也应该跟着开发的框架走,只关心数据即可,其他的渲染交给框架处理,我们校验数据。

举个例子,业务场景是这样的:点击一个按钮,程序会向后台请求数据,请求数据成功后显示一个提示框,提示框中显示后台返回的数据,如果请求失败,则提示请求失败。我们的测试方式则是关注提示框的选项的显示属性是否为true,提示框的类型是否为successerror,提示文案是否正确即可,无需关注页面的展示,因为那是框架做的事。

测试代码

下面是我自己写的一个简单的测试代码,前端框架用的是基于Vue.jsElement

<!DOCTYPE html>
<html>

<head>
    <title>标题</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="test">
        <el-alert :title=wenan :type=alert_style v-show=alert>
        </el-alert>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button @user1='clicktest'>成功按钮</el-button>
        <el-button @user2='clickfail'>失败按钮</el-button>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#test',
        data: {
            input: '',
            wenan: '123',
            alert_style: "",
            alert: false
        },
        methods: {
            clicktest: function() {
                this.alert = true
                this.wenan = 'succeed'
                this.alert_style = 'success'
            },
            clickfail: function() {
                this.alert = true
                this.wenan = 'failed'
                this.alert_style = 'error'
            }
        }
    })
    </script>
</body>

</html>

下面是对应的测试代码,只是一个非常简单的示例:

# ecoding=utf-8
# Author: Sven_Weng
# Email : sven_weng@wengyb.com
# Web   : http://wybblog.applinzi.com
import time
from selenium import webdriver

option = webdriver.ChromeOptions()
option.add_argument('disable-infobars')
browser = webdriver.Chrome(chrome_options=option)
browser.get("file:///Users/SvenWeng/Desktop/demo.html")
js = 'app.input = "ceshiwenan"'
js1 = 'app.clicktest()'
js2 = 'return app.alert_style'
js3 = 'return app.alert'
js4 = 'return app.wenan'
time.sleep(1)
browser.execute_script(js)
time.sleep(1)
browser.execute_script(js1)
time.sleep(1)
rs2 = browser.execute_script(js2)
time.sleep(1)
rs3 = browser.execute_script(js3)
time.sleep(1)
rs4 = browser.execute_script(js4)
time.sleep(1)
print rs2, rs3, rs4
assert rs2 == 'success'
assert rs3 == True
assert rs4 == 'succeed'
browser.quit()

最后

这是我个人一个大胆的想法,还没有具体应用到实际的项目中,所以我只称他为方法论,写出来的目的也就是希望大家在测试的时候,不要被已有的技术或者框架局限了,测试代码的结构和思维方式应该跟开发同步,这样才能最大效率的进行测试。

这个想法不仅仅应用在 WEB 端,移动端的 H5 页面如果也是基于数据驱动开发的框架写的话,依然可以用这个思想进行测试。


↙↙↙阅读原文可查看相关链接,并与作者交流