一：主要内容
- 框架功能、框架架构及测试报告效果
- airtest安装、环境搭建
- 框架搭建、框架运行说明
- 框架源码
二：框架功能及测试报告效果
1. 框架功能：
该框架笔者用来作为公司的项目的前端自动化，支持pc和app，本文的air脚本是针对app的，关于pc的脚本会专门在写一篇文章说明，该框架功能如下：
- 支持在安卓多台设备中批量运行所有后缀为air的测试脚本（因为ios的连接需要macOS，我是windows机所以暂时只连了安卓端的ios未做测试）
- 支持指定某个用例或某几个用例在某台设备或某几台设备中进行运行
- 支持控制测试用例执行顺序，默认会将登录用例排在第一，退出用例排在最后执行，如果想要自定义其他顺序，可以在run.py文件中修改sort_cases函数方法即可
- 支持多脚本多设备运行完成后，生成一份汇总的测试报告，且点击汇总测试报告中具体的某一个用例，还能查看该用例详细的airtest报告
2. 框架架构说明
3. 测试报告效果：
给大家看一下多设备、多脚本的测试报告效果：
点击详情效果：
三：airtest安装、环境搭建
1.python环境安装
这里不再赘述，安装并配置好环境变量后，执行python -V查看是否安装成功
2.airtestIDE安装
airtest安装很简单，安装airtestIDE，从官网下载：http://airtest.netease.com/
下载后解压缩到本地，我的本地位置为：G:\AirtestIDE_2020-01-21_py3_win64\AirtestIDE_2020-01-21_py3_win64\AirtestIDE.exe，双击exe文件即为启动airtestIDE工具即可
3.包安装
需要安装如下包：
pip install airtest
pip install pocoui
如果执行不能安装成功，则可以使用如下命令：
pip install -i http://pypi.douban.com/simple --trusted-host pypi.douban.com airtest
pip install -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com pocoui
######如果想用airtest编写selenium即pc自动化脚本，则还需要安装如下包：
pip install selenium
pip install pynput
pip install airtest_selenium
关于这一步的安装也就是 pip install airtest_selenium，也可以从airtest安装目录下拷贝该文件夹到python目录下
我的python目录为：G:\python3.6.5；
我的airtest安装目录为：G:\AirtestIDE_2020-01-21_py3_win64\AirtestIDE_2020-01-21_py3_win64，该路径下有个airtest_selenium文件夹；
可以拷贝airtest目录下的airtest_selenium文件夹到python目录下。
######如果想用airtest编写selenium即pc自动化脚本，除了安装上面的包，因为airtest-selenium自动化因为需要打开浏览器，所以我们还需要配置谷歌浏览器路径和下载匹配的谷歌驱动文件
- airtest设置谷歌启动路径：airtestIDE界面-点击选项-点击设置-点击chrome path-选择谷歌安装路径一直到chrome.exe文件
- 下载匹配的谷歌驱动文件：
可以使用该网站下载：https://npm.taobao.org/mirrors/chromedriver
下载后替换掉airtest根目录我的路径是G:\AirtestIDE_2020-01-21_py3_win64\AirtestIDE_2020-01-21_py3_win64下的chromedriver.exe文件即可
4.框架版本说明
该框架使用版本如下：
python 3.6.5
airtest 1.1.3
pocoui 1.0.79
pynput 1.6.8
airtestIDE 1.2.3
四：框架搭建、框架运行说明
1.框架搭建
该框架搭建很简单，就是一个python工程：
该工程根目录下开始时有一个result空文件夹、一个report_tpl.html模板文件、run.py启动脚本、docs文件夹是我自己放的一些项目描述文档可有可无，.air文件是自己通过airtestIDE编写的项目的自动化脚本
2.框架脚本文件说明
run.py #启动文件，python run.py即可
report_tpl.html #测试报告模板文件
report.html #自动生成的测试报告文件，会将汇总的执行结果的json数据即下面的summary数据格式与report_tpl.html结合，生成测试报告
result #文件夹，用于存放每个测试用例的执行json结果数据格式为下面的results数据格式
xxx.air #测试用例，所有以.air文件名称结尾的文件夹都是测试用例
xxx.air/log #每个测试用例的日志文件，以设备号区分，每个设备号下存放一份测试结果日志文件
log.html #每个测试用例在每个设备中运行的具体效果，即测试报告中点击具体测试用例右侧弹出的页面详情效果
log.txt #每个测试用例在每个设备中运行的json结果数据
3.框架运行编写建议
执行命令时可以用python run.py运行整个框架
但是写脚本或者调试脚本时，用airtestIDE来操作，即从airtestIDE中新建编辑.air脚本保存到该框架的根目录下，调试通过后再用run.py进行批量脚本、批量设备去执行。
这样就比较清晰
五：框架源码
1.run.py
1 # -*- encoding=utf-8 -*-
2 # Run Airtest in parallel on multi-device
3 import os
4 import traceback
5 import subprocess
6 import webbrowser
7 import time
8 import json
9 import shutil
10 from airtest.core.android.adb import ADB
11 from jinja2 import Environment, FileSystemLoader
12
13
14 def run(devices, airs):
15 """"
16 run_all
17 18 19 """
20 try:
21 data_r=[]
22 global time_s
23 time_s = time.time()
24 for air in airs:
25 results = load_jdon_data(air)
26 tasks = run_on_multi_device(devices, air, results)
27 for task in tasks:
28 status = task['process'].wait()
29 results['tests'][task['dev']] = run_one_report(task['air'], task['dev'])
30 results['tests'][task['dev']]['status'] = status
31 name = air.split(".")[0]
32 json.dump(results, open(get_path("result")+os.sep+name+'_data.json', "w"), indent=4)
33 data_r.append(results)
34 run_summary(data_r)
35 except Exception as e:
36 traceback.print_exc()
37
38
39 def run_on_multi_device(devices, air, results):
40 """
41 在多台设备上运行airtest脚本
42 Run airtest on multi-device
43 """
44 tasks = []
45 for dev in devices:
46 log_dir = get_path("log",dev,air)
47 #命令行执行：airtest run openOrder.air --device Android://127.0.0.1:5037/b7f0c036 --log F:\airtest_code\good_store_project\log\openOrder
48 cmd = [
49 "airtest",
50 "run",
51 air,
52 "--device",
53 "Android:///" + dev,
54 "--log",
55 log_dir
56 ]
57 try:
58 tasks.append({
59 'process': subprocess.Popen(cmd, cwd=os.getcwd()),
60 'dev': dev,
61 'air': air
62 })
63 except Exception as e:
64 traceback.print_exc()
65 return tasks
66
67 #点击每个用例的详情页面
68 def run_one_report(air, dev):
69 """"
70 生成一个脚本的测试报告
71 Build one test report for one air script
72 """
73 try:
74 log_dir = get_path("log",dev, air)
75 log = os.path.join(log_dir, 'log.txt')
76 if os.path.isfile(log):
77 #命令行执行：airtest report F:\airtest_code\good_store_project\openOrder.air --log_root F:\airtest_code\good_store_project\log\openOrder --outfile F:\airtest_code\good_store_project\log\openOrder\openOrder.html --lang zh
78 #如果是selenium，则最后要加上selenium插件
79 #airtest report F:\airtest_code\good_store_project\openOrder.air --log_root F:\airtest_code\good_store_project\log\openOrder --outfile F:\airtest_code\good_store_project\log\openOrder\openOrder.html --lang zh --plugins airtest_selenium.report
80 cmd = [
81 "airtest",
82 "report",
83 air,
84 "--log_root",
85 log_dir,
86 "--outfile",
87 os.path.join(log_dir, 'log.html'),
88 "--lang",
89 "zh"
90 ]
91 ret = subprocess.call(cmd, shell=True, cwd=os.getcwd())
92 return {
93 'status': ret,
94 'path': os.path.join(log_dir, 'log.html')
95 }
96 else:
97 print("Report build Failed. File not found in dir %s" % log)
98 except Exception as e:
99 traceback.print_exc()
100 return {'status': -1, 'device': dev, 'path': ''}
101
102
103 def run_summary(data):
104 """"
105 生成汇总的测试报告
106 Build sumary test report
107 """
108 try:
109 for i in data:
110 c = get_json_value_by_key(i,"status")
111
112 summary = {
113 'time': "%.3f" % (time.time() - time_s),
114 'success': c.count(0),
115 'count': len(c)
116 }
117 summary['start_all'] = time.strftime("%Y-%m-%d %H:%M:%S",
118 time.localtime(time_s))
119 summary["result"] = data
120 print("summary++++++++++",summary)
121
122 env = Environment(loader=FileSystemLoader(os.getcwd()),
123 trim_blocks=True)
124 html = env.get_template('report_tpl.html').render(data=summary)
125 with open("report.html", "w", encoding="utf-8") as f:
126 f.write(html)
127 webbrowser.open("report.html")
128 except Exception as e:
129 traceback.print_exc()
130
131
132 def load_jdon_data(air):
133 """"
134 加载进度
135 返回一个空的进度数据
136 """
137 clear_log_dir(air)
138 return {
139 'start': time.time(),
140 'script': air,
141 'tests': {}
142
143 }
144
145 def clear_log_dir(air):
146 """"
147 清理log文件夹 openCard.air/log
148 Remove folder openCard.air/log
149 """
150 log = os.path.join(os.getcwd(), air, 'log')
151 if os.path.exists(log):
152 shutil.rmtree(log)
153
154 #获取key为status的值
155 def get_json_value_by_key(in_json, target_key, results=[]):
156 for key,value in in_json.items(): # 循环获取key,value
157 if key == target_key:
158 results.append(value)
159 if isinstance(value, dict):
160 get_json_value_by_key(value,target_key)
161 return results
162
163 #获取路径
164 def get_path(content,device=None,air="openCard.air"):
165 root_path = os.getcwd()
166 path = os.getcwd()
167 if content=="result":
168 #返回测试报告路径
169 path = os.path.join(root_path,"result")
170 elif content == "log":
171 log_dir = os.path.join(root_path,air, 'log', device.replace(".", "_").replace(':', '_'))
172 #如果没有日志路径则创建一个
173 if not os.path.exists(log_dir):
174 os.makedirs(log_dir)
175 #返回日志路径
176 path = log_dir
177 elif content == "cases":
178 #返回测试用例路径
179 path = os.path.join(root_path,air)
180 else:
181 #返回根目录
182 path = root_path
183 return path
184
185 #获取路径下所有air的测试用例文件
186 def get_cases(path):
187 cases=[]
188 for name in os.listdir(get_path(path)): # 遍历当前路径下的文件夹和文件名称
189 if name.endswith(".air"):
190 cases.append(name)
191 return cases
192
193 def sort_cases(cases,loginAir,outAir):
194 #清除列表中的登录、退出登录，然后将其分别添加到列表的第一位和最后一位
195 cases.remove(loginAir)
196 cases.remove(outAir)
197 cases.insert(0, loginAir)
198 cases.insert(len(airs), outAir)
199 return cases
200
201
202 if __name__ == '__main__':
203
204 """
205 初始化数据
206 Init variables here
207 """
208 #获取所有已连接的设备列表
209 devices = [tmp[0] for tmp in ADB().devices()]
210 #设置指定设备执行测试用例
211 # devices = ["BTY4C16705003852","b7f0c036"]
212 #获取所有测试用例
213 airs = get_cases("root")
214 #将登录用例排在最前面执行，退出用例排在最后面执行
215 sort_airs = sort_cases(airs,"loginPro.air","loginOutPro.air")
216 #获取指定用例,按顺序执行
217 # sort_airs = ["openCardPro.air","openOrderPro.air","quickMoneyPro.air"]
218 """
219 执行脚本
220 excute scripts
221 """
222 # 运行所有脚本
223 run(devices, sort_airs)
2.report_tpl.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
5 <link rel="shortcut icon" type="image/png" href="http://airtest.netease.com/static/img/icon/favicon.ico">
6 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <title>Airtest 多设备并行测试结果汇总</title>
10 </head>
11 <style type="text/css">
12 *{
13 margin: 0;
14 padding: 0;
15 }
16 body{
17 background: #eeeeee
18 }
19 .container {
20 75%;
21 min- 800px;
22 margin: auto
23 }
24 body.zh .en{
25 display: none;
26 }
27 body.en .zh{
28 display: none;
29 }
30 h1{
31 margin-top: 50px;
32 text-align: center;
33 }
34 .center{
35 text-align: center;
36 margin-top: 15px;
37 margin-bottom: 30px;
38 font-size: 14px;
39 position: relative;
40 }
41 .btn{
42 border: solid 1px #c0c0c0;
43 padding: 5px 20px;
44 border-radius: 3px;
45 background: white;
46 cursor: context-menu;
47 }
48 .btn.lang:hover {
49 background: #5cb85c26;
50 border-color: #0a790a;
51 }
52 .btn.lang {
53 position: absolute;
54 top: 0;
55 }
56 .head {
57 margin: 20px 0 30px 0;
58 }
59 .head, .table{
60 background: white;
61 border-radius: 5px;
62 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
63 padding: 30px 20px;
64
65 }
66 .head .progress{
67 background: #dddddd;
68 color: white;
69 border-radius: 5px;
70 text-align: center;
71 margin-top: 12px;
72 }
73 .head .progress-bar-success{
74 0;
75 transition: all 0.5s ease;
76 background: #5cb85c;
77 border-radius: 5px;
78 }
79 .table-title {
80 text-align: center;
81 margin-bottom: 20px;
82 font-size: 18px;
83 font-weight: bold;
84 position: relative;
85 }
86 .table-row{
87 border: solid 1px #e5e5e5;
88 margin-top: -1px;
89 cursor: context-menu;
90 }
91 .table-row:hover, .table-row.active{
92 background: beige;
93 }
94 .table-head{
95 background: aliceblue;
96 }
97 .table-head:hover{
98 background: aliceblue;
99 }
100 .table-head .table-col{
101 padding-top: 10px;
102 padding-bottom: 10px;
103 font-weight: bold;
104 text-align: center;
105 }
106 .table-col{
107 display: inline-block;
108 200px;
109 line-height: 30px;
110 padding: 5px 10px;
111 border-left: solid 1px #e5e5e5;
112 margin-top: -1px;
113 margin-right: -5px;
114 }
115 .table-col.short{
116 100px;
117 text-align: center;
118 }
119 .table-col.mid{
120 200px;
121 text-align: center;
122 }
123 .table-col:first-child{
124 border: none;
125 }
126 .table-col.long{
127 calc(100% - 700px);
128 }
129 .table-col.success{
130 color: green;
131 }
132 .table-col.failed{
133 color: red;
134 }
135 .detail{
136 text-align: center;
137 font-size: 14px;
138 color: gray;
139 }
140 .iframe{
141 position: fixed;
142 top: 0;
143 right: -100%;
144 70%;
145 min- 800px;
146 height: 100%;
147 box-shadow: 0 5px 10px grey;
148 transition: right 0.5s ease;
149 background: white;
150 max- 1100px;
151 }
152 .iframe-tools{
153 position: absolute;
154 top: 23px;
155 left: -34px;
156 background: white;
157 box-shadow: -2px 2px 5px grey;
158 border-radius: 7px;
159 }
160 .iframe-tools .close, .iframe-tools .open{
161 32px;
162 height: 50px;
163 color: gray;
164 cursor: context-menu;
165 display: block;
166 }
167 .iframe.show{
168 right: 0;
169 }
170 iframe{
171 100%;
172 height: calc(100% - 70px);
173 border: none;
174 }
175 .iframe-head {
176 height: 60px;
177 line-height: 70px;
178 text-align: center;
179 border-bottom: solid 1px #ddd;
180 box-shadow: 2px 0 6px #999;
181 margin-bottom: 10px;
182 }
183 ::-webkit-scrollbar {
184 10px;
185 height: 10px;
186 background-color: rgba(0,0,0,.34);
187 }
188 ::-webkit-scrollbar-thumb {
189 background-color: #8b8b8b;
190 border-radius: 10px;
191 }
192 ::-webkit-scrollbar-track {
193 background-color: #f5f5f5;
194 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.22);
195 }
196 .iframe .close {
197 background: url('data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdC AK9OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dE AAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAA6JJREFUaN7tmc9LG0EUx99sE+xB/wBJ vQhCPLTojAr+Af6iKJSSVhD0EhNC1HgWxIt/gBA0MaQXqQoV2gb/Ag+Krs4KHlSMN38EFRGkIupm Xw/reEgIu9lsNi34vQTcie99P/NmZt8E4FWvKkpt6bZ0W/rdu0rnYVdektmBNEETNPHlS3Ytu5Zd Oz6mC3SBLgwMVNo4o4wy2tmp1qv1av3REVthK2xldNS2ANRN3dT99SvVqEa1pyfGGGMMkcpUprKq VgqEME436SbdvL8XebEAC7CAppkFQYyMwwM8wMP376SVtJJWlyt3HMYwhrFsFg7hEA6HhpRBZVAZ XFwst3GcwzmcS6VImIRJ+O3b/IHAgCFCB3RARyTCfdzHfdGoIQCxlkSpQwxiEKuqMkoMt3Ebt1UV kpCE5MCAElACSuDHD7uMN280bzRvdHcTiUhE+vWroPHcvJ4nCBuxERvfv9+t2a3ZrTk4EM/z9gC5 QW6QG05PyR7ZI3uitJ+ejAK9VEgTNEHT0pJdS0PMeLHGRQWQEAmR0OhorvGXvI3+T8tYy1jL2OfP uI7ruL68rP/V7TZL3urSMF3qBYwDBw48HOacc85jsULDDQE4DcIp40UDKDcIp41bBmA3CDJDZsjM 1ZXTxksG8JIHZZRRnw93cAd3lpYKHZd5IMSpIYMMsqqaNh6EIAQ1DeqgDuoCAd7De3jPt29W8y8Z gJDVijAtm2Y8V2/syu9863zrfOvgwOPz+Dy+/X04gRM4+fTpOYz1OGUybjsA20GU2biQ6WaoWGnV WrVW/ecPzuIszmazxX4f/ehHv6ZhBCMYub0tV5627QFCdIJO0ImuLuiDPuj7/dv05lYIRJl7DdsA 2G3cKRAlA7DapIjjTJR60cenTU2X5T1AzLjVJgXmYR7mR0akcWlcGu/v1x8633QVXQGWS91gV69U 02UaQLmM58ppEIYAnDJeKRCFr8QqZNxpEAWvxNRr9Vq9TqeLblLiEId4MMgVrnAlmbRqPI9riU0X 3uEd3n34kHszlPdqehY9i55Fb29re2t7a3svL4mXeIn340d9Rkl+xYgZX4VVWB0Z0Y0nEnYZF8pk MplMZn/fc+O58dyYf8UmLuIirqkppV1pV9p//sx7bhSYpmiKpoaHyQW5IBfxuH58SZJT7+qFZLg0 QhCC0OQk93M/909PlxxQgBC/B+j38KGQU4aNQOj5PD7qn5OTZQuoB/B6K238f8nrVf+6/gLOvYPg ZwC/JwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wMy0wNlQyMDozMTo1NCswODowMMqAOUgAAAAl dEVYdGRhdGU6bW9kaWZ5ADIwMTktMDMtMDZUMjA6MzE6NTQrMDg6MDC73YH0AAAASHRFWHRzdmc6 YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9jOHk0dXZzNXd0 Zy9DbG9zZS5zdmfc199nAAAAAElFTkSuQmCC') no-repeat;
198 background-size: 20px;
199 background-position: center;
200 border-bottom: solid 2px #e5e5e5;
201 }
202 .iframe .open {
203 background: url("data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdC AK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dE AAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAABS5JREFUaN7tmGtIU28cx3+/s0tFGyEW SLfJ0F4Yk3YttNUY5prBoMsha1EUQoUZESW9KIXKYWiZQhR7UfYiRgmZkBaGLCuTaucsR6RiVxLp It1cLJjn/P4vxurf3785by3Rz5uxZ8/vec73s+fsec4Appjir0Qn08l0so0bDdcN1w3X1erxmoeJ d9DBwGqsxup586iYiqnY69WWa8u15SrVpBHwKwsXMipGxahu3TKyRtbIJiVNMgEAUAqlUJqaKr4Q X4gvGhuN3cZuY3di4uQR8AsajaAUlIKyoSEzMTMxM1GpnGQCANCKVrSaTCF3yB1y37yZXpZell42 c+akEfBDhAtd6MrIkG6Xbpdur61NqUqpSqmaNm3CCdDe197X3k9J0ev0Or2OZUkggYSsrJhF2NCG tlWrZvXO6p3V6/GspJW0kqTSoeqG7DDWGBIMCYaEzExSk5rUTicchINw0G6HAiiAguRkQEBAAKzE SqwcwQT1UA/1a9cGpUFpUFpdHWncujXyKooDxI1XUJZlWZaVSF6GXoZehjZvph20g3YcOgQlUAIl aWl/QjYAANRADdS43ZyaU3PqXbsijUTjJkC3RbdFt8VsBic4wXn2LB7Gw3h48eI/FngQyEY2slVU 8C7exbv27x8zAZF7Viaj1bSaVp84gb3Yi7379gEHHHA4bitsdBw7xnEcx3FFRSO+QI1Go9FoEhLk drldbq+rgyZogiazOd7RYoVUpCJVYeGwd4Eld5bcWXJnzhy5XC6Xy5ubJ1rwKLgMl+Gy5OSYBaRd SbuSdkWhYD4xn5hP9fWRVo0m3kFGxsWLXCFXyBUWFMQsYPrS6UunLz1zBo/iUTxqNMY7wrBZA2tg TW2twqfwKXx5eZFGURzyHGDYa9hr2Lt+Pa2jdbQuup9ONBobv8z+MvvL7E2bOOSQw/7+6CeSwUpM XaYuU9f8+aIgCqJw4wY8gAfwYMaMeEcZHl6v7JrsmuyawxHIDmQHsr9//2+PQVdAv7xf3i8vKcEq rMKqhIRRX4se9KAnimyPb95AGZRBWVcX8cQT//o1etCDnmCQLtAFuhAKQRIkQZJGg3a0oz0nJ+Z5 jsNxON7aGuoL9YX6HA5uAbeAWxAKDdZ9gIDIc/aiRUKP0CP0OJ3DzUnN1EzNT55AMRRDcUMDetGL 3qamcGo4NZza0hJwB9wB97dvYAUrWP9ngHRIh3QA/SX9Jf2l6IFlaAF0m27Tbb9fUAgKQZGT8xSf 4lMMBoeqGyBAPC+eF88XFWEd1mGdRPL78nCYrtJVuurxkItc5Dp3zq/wK/yK1tYBXXnggR+uzhgw gxnM7e2iX/SLfputbUXbirYVnz/HWv5DgDZDm6HNmDs3cqLLzY0IGKwsug0eOMCreBWv6ugYh2i/ h4CAnj8XH4oPxYdZWY9PPz79+PSHD8Md5ocAJp/JZ/Jzc2E37Ibd//rm8yEf8oNB2kk7aWdeHh/m w3z48uU/Hjiau5zKqby7W7AIFsGSldWGbdiGPT0jHe/nOeAUnIJTP+95ukt36W5np8iKrMiaTHEP XkEVVPHuHXOPucfciwZ/9Wq04zLRH73IW50usrQ6OiTbJNsk2ywWv9Kv9Cvb2+MWvJIqqfLjR9gA G2BDdrbviO+I70hn51iNLxUcgkNwWCy4HJfj8mfPoAVaoMVqfVTzqOZRzdu38QoOJ+EknPz6lelj +pg+u9333vfe9z4QGPN59KX6Un2p2x15rP3bzvbM+P9lp9uj26PbY7WOfqQpppiI/AOjmiKrfUvK NAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wMy0wNlQyMDozMTo1NCswODowMMqAOUgAAAAldEVY dGRhdGU6bW9kaWZ5ADIwMTktMDMtMDZUMjA6MzE6NTQrMDg6MDC73YH0AAAASHRFWHRzdmc6YmFz ZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9jOHk0dXZzNXd0Zy9z aGFyZS5zdmftz7m3AAAAAElFTkSuQmCC") no-repeat;
204 background-size: 20px;
205 background-position: center;
206 }
207 select{height: 28px; line-height: auto; vertical-align: middle; height: 22px\9; padding: 3px 0\9; box-sizing:content-box; font-size: 13px;}
208 :root select{padding: 0; height: 28px;}
209 </style>
210 <body class="zh">
211 <div class="container-fluid" >
212 <div class="container">
213 <div class="main">
214 <div class="material">
215 <h1>汇总报告</h1>
216 <div class="center">
217 <div class="btn lang">Switch to English version</div>
218 <div class="time zh">开始时间：{{data['start_all']}}，耗时 <b>{{data['time']}}</b> 秒</div>
219 <div class="time en">Started at：{{data['start_all']}}，cost <b>{{data['time']}}</b> s</div>
220 </div>
221 <div class="head">
222 <header class="zh"><span class="rate"></span>成功率：</span> {{data["success"]}}/{{data["count"]}}</header>
223 <header class="en"><span class="rate">Success rate：</span> {{data["success"]}}/{{data["count"]}}</header>
224 <div>
225 <div class="progress">
226 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=" {{data['success'] *100 / data['count']}}%">
227 <span class="">{{'%0.2f' % (data["success"] *100 / data["count"])}}%</span>
228 </div>
229 </div>
230 </div>
231 </div>
232 <select name="" id="exit" style=" 100px;">
233 <option class="zh" value="all">全部</option>
234 <option class="en" value="all">all</option>
235 <option class="en" value="成功">success</option>
236 <option class="zh" value="成功">成功</option>
237 <option class="en" value="失败">failed</option>
238 <option class="zh" value="失败">失败</option>
239 </select>
240 <div class="table" >
241 <div class="table-title">
242 <span class="running_detail zh">用例列表</span>
243 <span class="running_detail en">Detail</span>
244 </div>
245 <div class="table-content" id="tab">
246 <div class="table-row table-head">
247 <div class="table-col short zh">序号</div>
248 <div class="table-col short zh">状态</div>
249 <div class="table-col mid zh">用例</div>
250 <div class="table-col long zh">设备</div>
251 <div class="table-col short en">id</div>
252 <div class="table-col short en">result</div>
253 <div class="table-col mid en">case</div>
254 <div class="table-col long en">device</div>
255 <div class="table-col ">--</div>
256 </div>
257 {% set ns = namespace(found=0) %}
258 {% for dat in data['result'] %}
259 {% for dev, item in dat['tests'].items() %}
260 <div class="table-row" path="{{item['path']}}" >
261 {% set ns.found = ns.found + 1 %}
262 <div class="table-col short">{{ns.found}}</div>
263 <div class="table-col short zh {{'success' if item['status']==0 else 'failed'}}">{{"成功" if item['status']==0 else "失败"}}</div>
264 <div class="table-col short en {{'success' if item['status']==0 else 'failed'}}">{{"success" if item['status']==0 else "failed"}}</div>
265 <div class="table-col mid">{{dat['script']}}</div>
266 <div class="table-col long">{{dev}}</div>
267
268 <div class="table-col detail zh">点击可查看详情</div>
269 <div class="table-col detail en">click to see detail</div>
270 </div>
271 {% endfor %}
272 {% endfor %}
273 </div>
274 </div>
275 </div>
276 </div>
277
278 <div class="iframe">
279 <div class="iframe-head"></div>
280 <iframe src='.'></iframe>
281 <div class="iframe-tools">
282 <div class="close"></div>
283 <a class="open" href='.' target='_blank'></a>
284 </div>
285 </div>
286 </div>
287 </body>
288 <script type="text/javascript">
289 var Lang = 'zh' // or en
290 var rows = document.querySelectorAll('.table-row')
291 var iframe = document.querySelector('.iframe')
292 var iframeHead = document.querySelector('.iframe-head')
293 var open = document.querySelector('.open')
294 var close = document.querySelector('.iframe .close')
295 var langBtn = document.querySelector('.lang')
296 var body = document.body
297 var prevActiveRow = null
298 function init() {
299 for(i=0; i<rows.length; i++){
300 addEvent(rows[i], 'click', function(e){
301 path = this.getAttribute('path')
302 console.log(this)
303 if(path) {
304 showIframe(this)
305 }
306 })
307 }
308 addEvent(close, 'click', function(e){
309 iframe.className='iframe'
310 })
311 addEvent(langBtn, 'click', function(e){
312 if(Lang == 'zh'){
313 Lang = 'en';
314 this.innerText = '切换到中文版'
315 } else {
316 Lang = 'zh'
317 this.innerText = "Switch to English version"
318 }
319 document.body.className = Lang
320 if (iframe.className.indexOf('show')>=0) {
321 showIframe(prevActiveRow)
322 }
323 })
324 document.body.className = Lang
325 }
326 function showIframe(obj){
327 var num = obj.querySelector('.table-col.short').innerText
328 var device = obj.querySelector('.table-col.long').innerText
329 if(Lang =='en') {
330 num = ordinal_suffix_of(num)
331 iframeHead.innerHTML = "Test report running in the " + num + ' device "' + device + '"'
332 open.setAttribute('title', 'open in a new tab')
333 close.setAttribute('title', 'close')
334 }
335 else {
336 iframeHead.innerHTML = "第 " + num + " 台设备 【" + device + "】 的测试报告"
337 open.setAttribute('title', '在新标签页打开')
338 close.setAttribute('title', '关闭')
339 }
340 iframe.querySelector('iframe').setAttribute('src', path)
341 open.setAttribute('href', path)
342 iframe.className='iframe show'
343 if(prevActiveRow){
344 prevActiveRow.className = "table-row"
345 }
346 obj.className = 'table-row active'
347 prevActiveRow = obj
348 }
349 function ordinal_suffix_of(i) {
350 i = Number(i)
351 var j = i % 10,
352 k = i % 100;
353 if (j == 1 && k != 11) {
354 return i + "st";
355 }
356 if (j == 2 && k != 12) {
357 return i + "nd";
358 }
359 if (j == 3 && k != 13) {
360 return i + "rd";
361 }
362 return i + "th";
363 }
364 function addEvent(obj,type,handle) {
365 try{// Chrome、FireFox、Opera、Safari、IE9.0 and above
366 obj.addEventListener(type,handle);
367 }catch(e){
368 try{// IE8.0 and below
369 obj.attachEvent('on'+ type,handle);
370 }catch(e){// Browser in earlier vesion
371 obj['on'+ type]= handle;
372 }
373 }
374 }
375 init()
376 $(document).ready(function(){
377 $('#exit').change(function(){ // 下拉框绑定change事件
378 var exit_code = $(this).children('option:selected').val(); // 获取下拉框选中值
379 $('#tab .table-row').each(function() {
380 var self = $(this).children().eq(1).text(); // 获取每行第二列的值
381 if(exit_code=='all'){ // 选中all时，数据全部显示
382 $(this).show();
383 }else{ // 选中其他的值时，进一步判断
384 if(self!=exit_code){ // 列中的值和选中值不一致
385 $(this).hide(); // 该行不显示
386 $('#tab .table-head').show()
387 }else{
388 $(this).show();
389 }
390 }
391 });
392 })
393 })
394 </script>
395 </html>
转自：https://www.cnblogs.com/miaomiaokaixin/p/12809632.html