testng自定义模板第二版

2025-01-20 技术教程

解决日志弹出框不落地到点击出

通过bootstrap模态框实现，问题出现样式有点问题

效果：

点击日志弹出对话框，关闭对话框并且落地点击处

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <title>站UI自动</title> <style> body { background-color: #f2f2f2; color: #333; margin: 0 auto; width: 960px; } #summary { width: 960px; margin-bottom: 20px; } #summary th { background-color: skyblue; padding: 5px 12px; } #summary td { background-color: lightblue; text-align: center; padding: 4px 8px; } .details { width: 960px; margin-bottom: 20px; } .details th { background-color: skyblue; padding: 5px 12px; } .details tr .passed { background-color: #2fff65; } .details tr .failed { background-color: red; } .details tr .unchecked { background-color: gray; } .details td { background-color: lightblue; padding: 5px 12px; } .details .detail { background-color: lightgrey; font-size: smaller; padding: 5px 10px; text-align: center; } .details .success { background-color: #2fff65; } .details .error { background-color: red; } .details .failure { background-color: salmon; } .details .skipped { background-color: gray; } .button { font-size: 1em; padding: 6px; width: 4em; text-align: center; background-color: #06d85f; border-radius: 20px/50px; cursor: pointer; transition: all 0.3s ease-out; } a.button { color: gray; text-decoration: none; } .button:hover { background: #2cffbd; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 10px; width: 50%; position: relative; transition: all 3s ease-in-out; } .popup h3 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06d85f; } .popup .content { max-height: 80%; overflow: auto; text-align: left; } @media screen and (max-width: 700px) { .box { width: 70%; } .popup { width: 70%; } } </style></head><body><br><h2 align="center">UI自动化回归报告</h2><h3>汇总信息</h3><table id="summary"> <tr> <th>开始与结束时间</th> <td colspan="2">${startTime}</td> <th>执行时间</th> <td colspan="2">$DURATION seconds</td> </tr> <tr> <th>运行版本与系统版本</th> <td colspan="2">${versionName}</td> <th>设备型号</th> <td colspan="2">${mobileModel}</td> </tr> <tr> <th>TOTAL</th> <th>SUCCESS</th> <th>FAILED</th> <th>ERROR</th> <th>SKIPPED</th> </tr> <tr> <td>$TOTAL</td> <td>$SUCCESS</td> <td>$FAILED</td> <td>$ERROR</td> <td>$SKIPPED</td> </tr></table><h3>详情</h3> #foreach($result in $results.entrySet()) #set($item = $result.value) <table id="$result.key" class="details"> <tr> <th>测试类</th> <td colspan="4">$result.key</td> </tr> <tr> <td>TOTAL: $item.totalSize</td> <td>SUCCESS: $item.successSize</td> <td>FAILED: $item.failedSize</td> <td>ERROR: $item.errorSize</td> <td>SKIPPED: $item.skippedSize</td> </tr> <tr> <th>Status</th> <th>Method</th> <th>Description</th> <th>Duration</th> <th>Detail</th> </tr> #foreach($testResult in $item.resultList) <tr> #if($testResult.status==1) <th class="success" >success </td> #elseif($testResult.status==2) <th class="failure" >failure </td> #elseif($testResult.status==3) <th class="skipped" >skipped </td> #end <td>$testResult.testName</td> <td>${testResult.description}</td> <td>${testResult.duration} seconds</td> <td class="detail">## <a class="button" href="#popup_log_${testResult.caseName}_${testResult.testName}">log</a> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#popup_log_${testResult.caseName}_${testResult.testName}"> log </button>  <div class="modal fade" id="popup_log_${testResult.caseName}_${testResult.testName}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h5 class="modal-title" id="myModalLabel">用例操作步骤</h5> </div> <div class="modal-body"> <div > <table> <tr>## <th>日志</th> <td> #foreach($msg in $testResult.twooutparam) <pre>$msg</pre> #end </td> </tr> #if($testResult.status==2) <tr> <th>异常</th> <td> <pre>$testResult.throwableTrace</pre> </td> </tr> #end </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </td> </tr> #end </table> #end<a href="#top">Android前端UI自动化</a><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body>