airtest+poco多腳本、多設備批處理運行測試用例自動生成測試報告

一：主要內容

• 框架功能、框架架構及測試報告效果
• 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

# -*- encoding=utf-8 -*-
# Run Airtest in parallel on multi-device
import os
import traceback
import subprocess
import webbrowser
import time
import json
import shutil
from airtest.core.android.adb import ADB
from jinja2 import Environment, FileSystemLoader


def run(devices, airs):
    """"
        run_all
 18  19     """
    try:
        data_r=[]
        global time_s
        time_s = time.time()
        for air in airs:
            results = load_jdon_data(air)
            tasks = run_on_multi_device(devices, air, results)
            for task in tasks:
                status = task['process'].wait()
                results['tests'][task['dev']] = run_one_report(task['air'], task['dev'])
                results['tests'][task['dev']]['status'] = status
                name = air.split(".")[0]
                json.dump(results, open(get_path("result")+os.sep+name+'_data.json', "w"), indent=4)
            data_r.append(results)
        run_summary(data_r)
    except Exception as e:
        traceback.print_exc()


def run_on_multi_device(devices, air, results):
    """
        在多台設備上運行airtest腳本
        Run airtest on multi-device
    """
    tasks = []
    for dev in devices:
        log_dir = get_path("log",dev,air)
        #命令行執行：airtest run openOrder.air --device Android://127.0.0.1:5037/b7f0c036 --log F:\airtest_code\good_store_project\log\openOrder
        cmd = [
            "airtest",
            "run",
            air,
            "--device",
            "Android:///" + dev,
            "--log",
            log_dir
        ]
        try:
            tasks.append({
                'process': subprocess.Popen(cmd, cwd=os.getcwd()),
                'dev': dev,
                'air': air
            })
        except Exception as e:
            traceback.print_exc()
    return tasks

#點擊每個用例的詳情頁面
def run_one_report(air, dev):
    """"
        生成一個腳本的測試報告
        Build one test report for one air script
    """
    try:
        log_dir = get_path("log",dev, air)
        log = os.path.join(log_dir, 'log.txt')
        if os.path.isfile(log):
            #命令行執行：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
            #如果是selenium，則最后要加上selenium插件
            #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
            cmd = [
                "airtest",
                "report",
                air,
                "--log_root",
                log_dir,
                "--outfile",
                os.path.join(log_dir, 'log.html'),
                "--lang",
                "zh"
            ]
            ret = subprocess.call(cmd, shell=True, cwd=os.getcwd())
            return {
                    'status': ret,
                    'path': os.path.join(log_dir, 'log.html')
                    }
        else:
            print("Report build Failed. File not found in dir %s" % log)
    except Exception as e:
        traceback.print_exc()
    return {'status': -1, 'device': dev, 'path': ''}


def run_summary(data):
    """"
        生成匯總的測試報告
        Build sumary test report
    """
    try:
        for i in data:
            c = get_json_value_by_key(i,"status")

        summary = {
            'time': "%.3f" % (time.time() - time_s),
            'success': c.count(0),
            'count': len(c)
        }
        summary['start_all'] = time.strftime("%Y-%m-%d %H:%M:%S",
                                             time.localtime(time_s))
        summary["result"] = data
        print("summary++++++++++",summary)

        env = Environment(loader=FileSystemLoader(os.getcwd()),
                          trim_blocks=True)
        html = env.get_template('report_tpl.html').render(data=summary)
        with open("report.html", "w", encoding="utf-8") as f:
            f.write(html)
        webbrowser.open("report.html")
    except Exception as e:
        traceback.print_exc()


def load_jdon_data(air):
    """"
        加載進度
            返回一個空的進度數據
    """
    clear_log_dir(air)
    return {
        'start': time.time(),
        'script': air,
        'tests': {}

    }

def clear_log_dir(air):
    """"
        清理log文件夾 openCard.air/log
        Remove folder openCard.air/log
    """
    log = os.path.join(os.getcwd(), air, 'log')
    if os.path.exists(log):
        shutil.rmtree(log)

#獲取key為status的值
def get_json_value_by_key(in_json, target_key, results=[]):
    for key,value in in_json.items(): # 循環獲取key,value
        if key == target_key:
            results.append(value)
        if isinstance(value, dict):
            get_json_value_by_key(value,target_key)
    return results

#獲取路徑
def get_path(content,device=None,air="openCard.air"):
    root_path = os.getcwd()
    path = os.getcwd()
    if content=="result":
        #返回測試報告路徑
        path = os.path.join(root_path,"result")
    elif content == "log":
        log_dir = os.path.join(root_path,air, 'log', device.replace(".", "_").replace(':', '_'))
        #如果沒有日志路徑則創建一個
        if not os.path.exists(log_dir):
            os.makedirs(log_dir)
        #返回日志路徑
        path = log_dir
    elif content == "cases":
        #返回測試用例路徑
        path = os.path.join(root_path,air)
    else:
        #返回根目錄
        path = root_path
    return path

#獲取路徑下所有air的測試用例文件
def get_cases(path):
    cases=[]
    for name in os.listdir(get_path(path)):  # 遍歷當前路徑下的文件夾和文件名稱
        if name.endswith(".air"):
            cases.append(name)
    return cases

def sort_cases(cases,loginAir,outAir):
    #清除列表中的登錄、退出登錄，然后將其分別添加到列表的第一位和最后一位
    cases.remove(loginAir)
    cases.remove(outAir)
    cases.insert(0, loginAir)
    cases.insert(len(airs), outAir)
    return cases


if __name__ == '__main__':

    """
        初始化數據
        Init variables here
    """
    #獲取所有已連接的設備列表
    devices = [tmp[0] for tmp in ADB().devices()]
    #設置指定設備執行測試用例
    # devices = ["BTY4C16705003852","b7f0c036"]
    #獲取所有測試用例
    airs = get_cases("root")
    #將登錄用例排在最前面執行，退出用例排在最后面執行
    sort_airs = sort_cases(airs,"loginPro.air","loginOutPro.air")
    #獲取指定用例,按順序執行
    # sort_airs = ["openCardPro.air","openOrderPro.air","quickMoneyPro.air"]
    """
        執行腳本
        excute scripts
    """
    # 運行所有腳本
    run(devices, sort_airs)

 

2.report_tpl.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" type="image/png" href="http://airtest.netease.com/static/img/icon/favicon.ico">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Airtest 多設備並行測試結果匯總</title>
  </head>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background: #eeeeee
    }
    .container {
      width: 75%;
      min-width: 800px;
      margin: auto
    }
    body.zh .en{
      display: none;
    }
    body.en .zh{
      display: none;
    }
    h1{
      margin-top: 50px;
      text-align: center;
    }
    .center{
      text-align: center;
      margin-top: 15px;
      margin-bottom: 30px;
      font-size: 14px;
      position: relative;
    }
    .btn{
      border: solid 1px #c0c0c0;
      padding: 5px 20px;
      border-radius: 3px;
      background: white;
      cursor: context-menu;
    }
    .btn.lang:hover {
      background: #5cb85c26;
      border-color: #0a790a;
    }
    .btn.lang {
      position: absolute;
      top: 0;
    }
    .head {
      margin: 20px 0 30px 0;
    }
    .head, .table{
      background: white;
      border-radius: 5px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      padding: 30px 20px;

    }
    .head .progress{
      background: #dddddd;
      color: white;
      border-radius: 5px;
      text-align: center;
      margin-top: 12px;
    }
    .head .progress-bar-success{
      width: 0;
      transition: all 0.5s ease;
      background: #5cb85c;
      border-radius: 5px;
    }
    .table-title {
      text-align: center;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      position: relative;
    }
    .table-row{
      border: solid 1px #e5e5e5;
      margin-top: -1px;
      cursor: context-menu;
    }
    .table-row:hover, .table-row.active{
      background: beige;
    }
    .table-head{
      background: aliceblue;
    }
    .table-head:hover{
      background: aliceblue;
    }
    .table-head .table-col{
      padding-top: 10px;
      padding-bottom: 10px;
      font-weight: bold;
      text-align: center;
    }
    .table-col{
      display: inline-block;
      width: 200px;
      line-height: 30px;
      padding: 5px 10px;
      border-left: solid 1px #e5e5e5;
      margin-top: -1px;
      margin-right: -5px;
    }
    .table-col.short{
      width: 100px;
      text-align: center;
    }
    .table-col.mid{
      width: 200px;
      text-align: center;
    }
    .table-col:first-child{
      border: none;
    }
    .table-col.long{
      width: calc(100% - 700px);
    }
    .table-col.success{
      color: green;
    }
    .table-col.failed{
      color: red;
    }
    .detail{
      text-align: center;
      font-size: 14px;
      color: gray;
    }
    .iframe{
      position: fixed;
      top: 0;
      right: -100%;
      width: 70%;
      min-width: 800px;
      height: 100%;
      box-shadow: 0 5px 10px grey;
      transition: right 0.5s ease;
      background: white;
      max-width: 1100px;
    }
    .iframe-tools{
      position: absolute;
      top: 23px;
      left: -34px;
      background: white;
      box-shadow: -2px 2px 5px grey;
      border-radius: 7px;
    }
    .iframe-tools .close, .iframe-tools .open{
      width: 32px;
      height: 50px;
      color: gray;
      cursor: context-menu;
      display: block;
    }
    .iframe.show{
      right: 0;
    }
    iframe{
      width: 100%;
      height: calc(100% - 70px);
      border: none;
    }
    .iframe-head {
      height: 60px;
      line-height: 70px;
      text-align: center;
      border-bottom: solid 1px #ddd;
      box-shadow: 2px 0 6px #999;
      margin-bottom: 10px;
  }
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background-color: rgba(0,0,0,.34);
    }
    ::-webkit-scrollbar-thumb {
      background-color: #8b8b8b;
      border-radius: 10px;
    }
    ::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.22);
    }
    .iframe .close {
      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;
      background-size: 20px;
      background-position: center;
      border-bottom: solid 2px #e5e5e5;
    }
    .iframe .open {
      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;
      background-size: 20px;
      background-position: center;
    }
    select{height: 28px; line-height: auto; vertical-align: middle; height: 22px\9; padding: 3px 0\9; box-sizing:content-box; font-size: 13px;}
    :root select{padding: 0; height: 28px;}
  </style>
  <body class="zh">
  <div class="container-fluid" >
    <div class="container">
      <div class="main">
        <div class="material">
          <h1>匯總報告</h1>
          <div class="center">
            <div class="btn lang">Switch to English version</div>
            <div class="time zh">開始時間：{{data['start_all']}}，耗時 <b>{{data['time']}}</b> 秒</div>
            <div class="time en">Started at：{{data['start_all']}}，cost <b>{{data['time']}}</b> s</div>
          </div>
          <div class="head">
            <header class="zh"><span class="rate"></span>成功率：</span> {{data["success"]}}/{{data["count"]}}</header>
            <header class="en"><span class="rate">Success rate：</span> {{data["success"]}}/{{data["count"]}}</header>
            <div>
              <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar"  aria-valuemin="0" aria-valuemax="100" style="width: {{data['success'] *100 / data['count']}}%">
                  <span class="">{{'%0.2f' % (data["success"] *100 / data["count"])}}%</span>
                </div>
              </div>
          </div>
        </div>
        <select name="" id="exit" style="width: 100px;">
          <option class="zh" value="all">全部</option>
          <option class="en" value="all">all</option>
          <option class="en" value="成功">success</option>
          <option class="zh" value="成功">成功</option>
          <option class="en" value="失敗">failed</option>
          <option class="zh" value="失敗">失敗</option>
        </select>
        <div class="table" >
          <div class="table-title">
            <span class="running_detail zh">用例列表</span>
            <span class="running_detail en">Detail</span>
          </div>
          <div class="table-content" id="tab">
            <div class="table-row table-head">
              <div class="table-col short zh">序號</div>
              <div class="table-col short zh">狀態</div>
              <div class="table-col mid zh">用例</div>
              <div class="table-col long zh">設備</div>
              <div class="table-col short en">id</div>
              <div class="table-col short en">result</div>
              <div class="table-col mid en">case</div>
              <div class="table-col long en">device</div>
              <div class="table-col ">--</div>
            </div>
            {% set ns = namespace(found=0) %}
            {% for dat in data['result'] %}
            {% for dev, item in dat['tests'].items() %}
              <div class="table-row" path="{{item['path']}}" >
                {% set ns.found = ns.found + 1 %}
                <div class="table-col short">{{ns.found}}</div>
                <div class="table-col short zh {{'success' if item['status']==0 else 'failed'}}">{{"成功" if item['status']==0 else "失敗"}}</div>
                <div class="table-col short en {{'success' if item['status']==0 else 'failed'}}">{{"success" if item['status']==0 else "failed"}}</div>
                <div class="table-col mid">{{dat['script']}}</div>
                <div class="table-col long">{{dev}}</div>

                <div class="table-col detail zh">點擊可查看詳情</div>
                <div class="table-col detail en">click to see detail</div>
              </div>
            {% endfor %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

    <div class="iframe">
      <div class="iframe-head"></div>
      <iframe src='.'></iframe>
      <div class="iframe-tools">
          <div class="close"></div>
          <a class="open" href='.' target='_blank'></a>
      </div>
    </div>
  </div>
  </body>
  <script type="text/javascript">
    var Lang = 'zh' // or en
    var rows = document.querySelectorAll('.table-row')
    var iframe = document.querySelector('.iframe')
    var iframeHead = document.querySelector('.iframe-head')
    var open = document.querySelector('.open')
    var close = document.querySelector('.iframe .close')
    var langBtn = document.querySelector('.lang')
    var body = document.body
    var prevActiveRow = null
    function init() {
      for(i=0; i<rows.length; i++){
        addEvent(rows[i], 'click', function(e){
          path = this.getAttribute('path')
          console.log(this)
          if(path) {
            showIframe(this)
          }
        })
      }
      addEvent(close, 'click', function(e){
        iframe.className='iframe'
      })
      addEvent(langBtn, 'click', function(e){
        if(Lang == 'zh'){
          Lang = 'en';
          this.innerText = '切換到中文版'
        } else {
          Lang = 'zh'
          this.innerText = "Switch to English version"
        }
        document.body.className = Lang
        if (iframe.className.indexOf('show')>=0) {
          showIframe(prevActiveRow)
        }
      })
      document.body.className = Lang
    }
    function showIframe(obj){
      var num = obj.querySelector('.table-col.short').innerText
      var device = obj.querySelector('.table-col.long').innerText
      if(Lang =='en') {
        num = ordinal_suffix_of(num)
        iframeHead.innerHTML = "Test report running in the " + num + ' device "' + device + '"'
        open.setAttribute('title', 'open in a new tab')
        close.setAttribute('title', 'close')
      }
      else {
        iframeHead.innerHTML = "第 " + num + " 台設備 【" + device + "】 的測試報告"
        open.setAttribute('title', '在新標簽頁打開')
        close.setAttribute('title', '關閉')
      }
      iframe.querySelector('iframe').setAttribute('src', path)
      open.setAttribute('href', path)
      iframe.className='iframe show'
      if(prevActiveRow){
        prevActiveRow.className = "table-row"
      }
      obj.className = 'table-row active'
      prevActiveRow = obj
    }
    function ordinal_suffix_of(i) {
      i = Number(i)
      var j = i % 10,
        k = i % 100;
      if (j == 1 && k != 11) {
        return i + "st";
      }
      if (j == 2 && k != 12) {
        return i + "nd";
      }
      if (j == 3 && k != 13) {
        return i + "rd";
      }
      return i + "th";
    }
    function addEvent(obj,type,handle) {
      try{// Chrome、FireFox、Opera、Safari、IE9.0 and above
        obj.addEventListener(type,handle);
      }catch(e){
        try{// IE8.0 and below
        obj.attachEvent('on'+ type,handle);
        }catch(e){// Browser in earlier vesion
          obj['on'+ type]= handle;
        }
      }
    }
    init()
    $(document).ready(function(){
        $('#exit').change(function(){    // 下拉框綁定change事件
            var exit_code = $(this).children('option:selected').val(); // 獲取下拉框選中值
            $('#tab .table-row').each(function() {
                var self = $(this).children().eq(1).text(); // 獲取每行第二列的值
                if(exit_code=='all'){    // 選中all時，數據全部顯示
                    $(this).show();
                }else{                   // 選中其他的值時，進一步判斷
                    if(self!=exit_code){ // 列中的值和選中值不一致
                        $(this).hide();  // 該行不顯示
                        $('#tab .table-head').show()
                    }else{
                        $(this).show();
                    }
                }
            });
        })
    })
</script>
</html>