Appium 生成比较美观的 appium 自动化测试报告,并且包含测试截图

付海全 · 2017年02月21日 · 最后由 Jodie 回复于 2020年01月19日 · 9011 次阅读
本帖已被设为精华帖!

最近工作中想要做自动化回归测试,想法是将每个测试用例都做自动截图,然后将最近的稳定版本和当前测试的版本的两张截图去对比,也要将两个版本的截图都放到测试报告中方便人工来进行验证。最初想法是通过 HTMLTestRunner 生成带截图的测试报告,但是 HTMLTestRunner 本身没有截图功能,还有它不支持 python 3,所以另外找了其他的工具来做这件事。

生成测试报告工具简介

HtmlTestRunner是将单元测试的结果保存为 html 格式的测试报告的工具,这个工具的功能和 HTMLTestRunner 很想,而且名称也很像。但是它支持 python3,而且生成的报告的样式更加美观。

安装 HtmlTestRunner

访问这个 url:
https://pypi.python.org/pypi/html-testRunner/1.0.3
然后下载 html_testRunner-1.0.3-py2.py3-none-any.whl 文件,接下来通过下面命令(适用于 ubuntu 等 linux 系统)来安装:

$ sudo pip3 install html_testRunner-1.0.3-py2.py3-none-any.whl

如果你是 windows 系统,尝试使用下面命令安装:

$ pip install html_testRunner-1.0.3-py2.py3-none-any.whl

添加截图功能

HtmlTestRunner 这个工具,本身没有展示截图的功能,不过可以通过修改它的 template 文件来添加截图功能。
通过下面地址,下载 HtmlTestRunner 的源代码到本地:

https://github.com/oldani/HtmlTestRunner

用编辑器打开 HtmlTestRunner/template/report_template.html 文件,进行修改:
输入图片说明

需要删除上图中标红色的代码,并新增绿色的代码。注意将新增图片的目录设置为自己本地的截图保存的目录。

生成自动化测试报告

使用 python 的 appium API 和 unittest 单元测试框架,再加上上面提到的 HtmlTestRunner 第三方模块,可以生成带测试截图的测试报告。具体代码如下:

#!/usr/bin/env python3
# coding=utf-8
from appium import webdriver
from nose.tools import *
import unittest
import HtmlTestRunner #生成HTML格式的测试报告

class take_screen_shot():  #这个类将在下面作为装饰器使用
    def __init__(self, func):
        self.func = func
        self.name = func.__name__ + ' (__main__.CalTestCase).png'  #拼接截图文件名

    def __call__(self, *args):   #对每次调用的函数都做截图操作
        try:
            self.func(self, *args)
        finally:
            driver.get_screenshot_as_file(self.name) 

class CalTestCase(unittest.TestCase):

    @classmethod
    def setUpClass(self):
        desired_caps = {}
        desired_caps['platformName'] = 'Android' #设置操作平台
        desired_caps['platformVersion'] = '5.1.1' #操作系统版本
        desired_caps['deviceName'] = 'Nexus 4' #设备名称
        desired_caps['appPackage'] = 'com.android.calculator2' 
        desired_caps['appActivity'] = '.Calculator'
        desired_caps['udid'] = '04c5a5af52197902' 
        global driver
        driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub', desired_caps)

    @classmethod
    def tearDownClass(self):
        driver.quit() #退出当前应用

    @take_screen_shot    #对每一条测试用例使用装饰器
    def test_case_01(self): 
        text = driver.find_element_by_id('com.android.calculator2:id/formula').text
        assert_equal(text, "") 

    @take_screen_shot
    def test_case_02(self):  
        driver.find_element_by_id('com.android.calculator2:id/digit_1').click() #点击数字键1
        driver.find_element_by_id('com.android.calculator2:id/op_add').click() #点击加号
        driver.find_element_by_id('com.android.calculator2:id/digit_1').click() #点击数字键1
        driver.find_element_by_id('com.android.calculator2:id/eq').click() #点击等号
        text = driver.find_element_by_id('com.android.calculator2:id/formula').text
        assert_equal(text, "2") 

if __name__ == '__main__':  #下面语句用来生成测试报告
    unittest.main(testRunner=HtmlTestRunner.HTMLTestRunner(output='cal_report',
                                                           report_title='Android计算器测试报告'))

代码分析:因为计划每个测试用例都进行截图操作,所以使用了 python 的装饰器。这样就实现了每个测试用例执行之后不管是成功还是失败都进行截图操作,代码的最后使用 HtmlTestRunner 工具生成测试报告。

接下来使用下面命令执行测试:

$ python3 appium_deom.py
Running tests... 
----------------------------------------------------------------------
 test_case_01 (__main__.CalTestCase) ... OK (1.786675)s
 test_case_02 (__main__.CalTestCase) ... OK (5.081634)s
----------------------------------------------------------------------
Ran 2 tests in 0:00:
OK
Generating HTML reports...

生成的测试报告的位置在测试脚本所在的目录下的 reports 目录下,通过浏览器查看,结果如下:
输入图片说明

点击 view 按钮可以展开查看截图和错误信息:
输入图片说明

接下来想要做的

现在的测试报告的 html 模板中的截图还是写死的路径,如果能将截图的路径也能自动生成的话就更好了。
还有现在没有进行两个版本截图的对比,考虑继续寻找工具做截图的对比,并突出或标记上两张图片不相同的地方。

共收到 52 条回复 时间 点赞

赞一个!

“HtmlTestRunner 是将单元测试的结果保存为 html 格式的测试报告的工具,这个工具的功能和 HTMLTestRunner 很像”
没看懂,只是把 html 大小写而已。笔误还是?

请问 mac 系统怎么安装 htmltestrunner ?

#2 楼 @dxfk911 有两名称比较像的 HTMLTestRunner,我这里使用的工具的官方网址是:https://pypi.python.org/pypi/html-testRunner/1.0.3

#3 楼 @mikiXuan mac 的安装应该也可以使用 pip 命令,你试一下,我没有 mac 电脑。

思寒_seveniruby 将本帖设为了精华贴 02月22日 01:31
8楼 已删除
9楼 已删除
付海全 回复

感谢!已实践执行成功😁

只是没用装饰器,在断言处直接 driver.get_screenshot_as_file 了

赞一个,用上了

@farawaytarget @kylekaka 请问一下 我新建了个 project 用的 python3.exe 然后复制你的代码 import 出现报错

能帮我看看什么情况么

问题搞定了 谢谢

有谁能提供楼主 需要编译文件的 绿色添加代码吗 windows 的 照个样式就行 主要 windows 路径跟 mac 路径不一致

listtap 回复

额,刚刚看见

有点尴尬 生成的 report 标题显示乱码 Android���������Ա���


脚本执行后 截图的图片 自动生成在跟脚本一起的文件夹中
view 图片没有生成 点击查看图片没有反应 是不是我编译有问题 附上我编译内容 我的是 windows 系统

楼主的是
大神帮忙看下什么情况我的图片路径 windows 下是不是有问题
@farawaytarget
@dxfk911
@kylekaka

楼主,请问
这个变量如何写的。。

支持 iOS 吗?

KysApp 回复

IOS 支持的 我就是在 MAC 上配的

陈琪 回复

额。。 mac 也可以测试 android 啊, 我意思 支持 iOS app 截图吗

listtap 回复

请问你 win 的 report html 是怎么修改的?

report_template.html 的文件怎么改

回复

同问

listtap 回复

@xiaoxuxu 请问 view 点击的问题你是怎么解决的

记得更新打赏二维码, 你已经错过本轮的社区打赏了

楼主好,我想请问一个问题,<img src="/Users/Wzd/reports/{{eachTestCase}}.png" ,这个路径到底怎么弄的

深蓝 回复

这是个 macOS 的路径,你是 Windows 的话直接复制资源管理器上面的路径就可以,你是 macOS 的话打开文件的显示简介,在位置处选中所有的拷贝一下

28楼 已删除
fdeferf 回复

我是 mac 上面,但是 html 打开的时候,并不能解析 eachTestCase 这个变量,我调试成图片名就可以,但是变量名字就是不行,这里有什么方法吗

深蓝 回复

我也想在 mac 实现这个截图功能,但是我找不到 report_template.html,这个文件放在哪里,能否告知这个路径要怎么找

wagnxinghao 回复

报告的路径在你测试案例的那个目录同级下面

截图的文件可以指定目录吗,不然截图后的文件就在同级目录下,看上去不太舒服。

匿名 #33 · 2017年05月05日

👍 👍 👍

很实用

楼主图中删除的代码是什么呀???看不到呢。而且我用浏览器点击 error,无法出来详情

这是我的代码,不知道为什么生成截图的时候,报告里图片框里为空!

class take_screen_shot():
def init(self, func):
self.func=func
self.name=func.name+'(mainCallTestCase).png'

def call(self,*argv):
try:
self.func(self,*argv)
finally:
driver.get_screenshot_as_file(self.name)
class Email_login(unittest.TestCase):

def setUp(self):
desired_caps = {}
desired_caps['deviceName'] = 'ROM'

desired_caps['platformName'] = 'Android'
desired_caps['platformVersion'] = '7.1'

desired_caps['appPackage'] = 'xxxxl'

desired_caps['appActivity'] = '惺惺惜惺惺 x'
desired_caps["unicodeKeyboard"] = "True"
desired_caps["resetKeyboard"] = "True"
global driver
driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub', desired_caps)

def tearDown(self):
driver.quit()

@take_screen_shot
def test_1(self):
text=driver.find_element_by_id("xxxxxxx").text
#self.assertEqual(text, "")

if name=='main':
unittest.main(testRunner=HtmlTestRunner.HTMLTestRunner(output='cal_report',
report_title='Android_report'))

这是我 html 的源代码,是跟搂住一样的呀.

很受用,准备一点一点尝试看看

感谢推荐,ApiTestEngine 也打算集成它来生成报告了

40楼 已删除

问下楼主,这个 text=driver.find_element_by_id("xxxxxxx").text 是获取的哪个的 text 格式文件,是这个元素的 id 吗,为什么我 print 这个 text 没有内容打印出来

5_shuai 回复


把楼主的装饰器改一下,在装饰器最后一行的代码里,添加你的路径应该就可以了(该文件夹需要手动先建好)
不过这样改,需要把 report_template.html 文件中,楼主之前添加的路径也改为这里,
毕竟报告文件是要从这个文件夹拿图片的
我也是小白,不对的话,别喷我😂

这个中文名确实显示乱码啊。不知道你们解决这个问题没有呢?另外,点击 view 按钮,没有任何反应,图片也不显示啊。。。。
试过改文件路径,各种格式都用了,还是不显示。。。请问这个到底是要怎么样才会显示呢?


另外,对比 HTMLTestRunner,楼主这个版本的不会显示 print 的打印信息。多少还是有些不方便。我自己改过原来的 HTMLTestRunner,所以现在也支持 python3 的。只是没有截图。其他方便貌似比这个新版本的好用一些。只是不知道怎么加入截图功能。

listtap 回复

请问,乱码和图片不显示的问题,你解决了没呢?我找了好久都还是没找到问题所在。。

这个帖子写的蛮不好的.代码也垃圾.

为啥贴子中图片都成这个样子了?

listtap 回复

您好,请问分享一下您的 htmlrunner.py 吗,楼主发出的图片看不了了现在

楼主,截图类里的 driver 没有定义就可以直接用?

仅楼主可见
郭林莉 回复



请问 report_template.html 的文件怎么修改,求告知


为什么我的 driver 有问题😭

Traceback (most recent call last):
File "D:\Users\dell\eclipse-workspace\test\src\tty\tty_jw.py", line 4, in
from nose.tools import *
ImportError: No module named 'nose'

楼主这个怎么解决?

乱码以及图片没展示的问题解决了吗

55楼 已删除

感谢作者,帮忙回答 2 个楼上的问题:

  1. 有 view 点击没反应图片打不开的,

    script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    

    地址国内访问不畅通,请更换为

    script src="http://code.jquery.com/jquery-latest.js"></script>
    

    或者

    script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
    

    或者 dowmload the jqure.min.js and chage it to absolute path

  2. Mac 的 report_template.html 在哪里:如果是用 pip 安装的,会在 python 的安装目录下,python2.7/site-packages/HtmlTestRunner/template/。至于 Mac 下 python 的安装目录在哪,建议百度。通常在/Library/Python/python2.7 下,但我的 python 是通过 anaconda2 安装的,在/用户/mac/anaconda2/lib/python2.7/site-packages/下。

我的/lib/python3.7/site-packages 下面的 report_template.html 怎么跟楼主的不一样 呢 ,😂

listtap 回复

把 report_template.html 的编码改成 “gbk” 就可以了,虽然已经过了 3 年了😅

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册