httprunner學習21-extentreports頁面樣式無法加載問題(已解決)

前言

最近有小伙伴反應使用httprunner的extentreports報告時，打開的頁面樣式全部丟失了，原本高大上的報告變成了丑八怪。
頓時心都涼了一大截，要是讓領導看到了，這個月領導不給加雞腿了，所以小編花了一個晚上的時間找到了解決方案。

extentreports報告

遇到問題：使用httprunner生成extentreports.html報告，頁面無法加載js和css

分析原因

查看html頁面，會發現加載css和js的地址不能訪問了

<link href='http://extentreports.com/resx/dist/css/extent.css' type='text/css' rel='stylesheet'/>
...

<script src='http://extentreports.com/resx/dist/js/extent.js' type='text/javascript'></script>

訪問上面的兩個地址出現無法訪問了

那么想到的解決辦法就是找到其它的能訪問的地址，替換即可，可惜找了一圈沒找到合適的，就算找到了，保不准哪天一樣會訪問不到。

下載extent.css 和 extent.js

先去github上找到項目的源碼https://github.com/anshooarora/extentreports-java/tree/master/dist，下載extent.css 和 extent.js兩個文件

理論上找到這2個文件后，把對應內容復制到 style 和script下即可

<style type='text/css'>
        extent.css復制到這
        .node.level-1 ul {
            display: none;
        }

        .node.level-1.active ul {
            display: block;
        }

        .card-panel.environment th:first-child {
            width: 30%;
        }
    </style>
...

<script type='text/javascript'>
extent.js 內容復制到這
</script>

結果運行的時候，會報錯：jinja2.exceptions.TemplateSyntaxError: Missing end of comment tag
從報錯看說明是語法錯誤，后來發現templates模板語法和html的一些語法有沖突，所以先去掉一些特殊的符號，如

• 去掉注釋 /* xxx */
• {# 中間加空格 { #
• {% 中間加空格 { %

extent_report_template.html

修改\Lib\site-packages\httprunner\templates目錄下的extent_report_template.html文件,修改的地方如下：

# 不會改的去群文件下載吧，QQ群：750815713， 或者公眾號獲取下載地址（微信公眾號：yoyoketang）回復：extent  
<!--<link href='http://extentreports.com/resx/dist/css/extent.css' type='text/css' rel='stylesheet'/>-->     # 注掉

    <title>{{ html_report_name }} - TestReport</title>
    <style type='text/css'>
        # extent.css復制到這
                .node.level-1 ul {
            display: none;
        }

        .node.level-1.active ul {
            display: block;
        }

        .card-panel.environment th:first-child {
            width: 30%;
        }

    </style>
   <!--<script src='http://extentreports.com/resx/dist/js/extent.js' type='text/javascript'></script>-->   # 注掉

    <script type='text/javascript'>           # 添加
    extent.js 內容復制到這
   </script>

不會改的去群文件下載吧，QQ群：750815713， 或者公眾號獲取下載地址（微信公眾號：yoyoketang）回復：extent

命令行重新執行：hrun xxx.yml 報告就可以顯示正常了