如何用Python、HTML、JS在网页展示Python测试函数的输出？

问题描述 #

我有一个名为displayTest.py的测试文件，它会导入其他Python文件并通过init传递self来获取数据。该文件遍历指定消息列表并运行测试，确保所有消息都在队列中。我需要在HTML页面上展示这个文件中print语句的输出，目前使用了一个在线模板，不确定是否需要Flask或JS来实现，希望得到相关资源和建议。

测试文件核心代码示例 #

class Test(test.TestCase):

    def test01_init(self):
        self.assertEqual(sys_sim.data, DATA)
        self.assertEqual(sys_sim.prev_data, DATA)
        self.assertEqual(sys_sim.time, 0.0)
        self.assertEqual(sys_sim.end_time, 400.0)

    def test01_reset(self):
        sys_sim.reset()
        self.assertEqual(sys_sim.data, DATA)
        self.assertEqual(sys_sim.prev_data, DATA)
        self.assertEqual(sys_sim.time, 0.0)
        self.assertEqual(sys_sim.end_time, 400.0)

    def test02_advance_test(self):
        sys_sim.reset()
        sys_sim.advance()
        self.assertEqual(sys_sim.data["DisplayMessage"], 1)

        msgids = list(range(256,273)) + [1000,1001,1002,1003]
        for msgid in msgids:
            while sys_sim.msg_app.display_message_expiration > 0:
                sys_sim.advance()
            sys_sim.advance()
            self.assertEqual(sys_sim.data["DisplayMessage"], msgid)

    def test03_advance_msg_nav(self):
        sys_sim.reset()
        
        sys_sim.data["SCU_Current"] = 1
        sys_sim.advance()
        self.assertEqual(sys_sim.data["StateNumber"], 1)
        
        while sys_sim.sim_time < 35.0:
            sys_sim.advance()
        
        sys_sim.data["Current 1"] = 1
        sys_sim.data["Current 2"] = 1
        sys_sim.data["Current 3"] = 1
        sys_sim.data["RCA_SW"] = "CO2"
        sys_sim.advance()
        self.assertEqual(sys_sim.data["StateNumber"], 2)

        sys_sim.data["DIR"] = "UP"
        sys_sim.advance()
        sys_sim.data["MessageMode"] = "Status"
        sys_sim.data["DisplayMessage"] = 5027
        sys_sim.data["DIR"] = "UP"
        sys_sim.advance_sim()
        self.assertEqual(sys_sim.data["MOTION"], "SHORT")
        self.assertEqual(sys_sim.msg_app.response, "FWD")
        self.assertEqual(sys_sim.data["MessageMode"], "Status")
        self.assertEqual(sys_sim.data["DisplayMessage"], 5028)

实现方案 #

方案一：Flask后端驱动（动态执行测试） #

适合需要每次访问页面时自动运行测试并展示最新输出的场景：

1. 安装Flask：

   pip install flask
   

2. 编写Flask应用文件（比如app.py）：

   from flask import Flask, render_template
   import subprocess
   import sys
   
   app = Flask(__name__)
   
   @app.route('/')
   def show_test_output():
       # 执行测试文件，捕获标准输出和错误输出
       result = subprocess.run([sys.executable, 'displayTest.py'], capture_output=True, text=True)
       test_output = result.stdout + result.stderr
       return render_template('index.html', output=test_output)
   
   if __name__ == '__main__':
       app.run(debug=True)
   

3. 创建templates文件夹，编写HTML模板文件templates/index.html：

   <!DOCTYPE html>
   <html>
   <head>
       <title>测试输出展示</title>
       <style>
           .output-container {
               background: #f0f0f0;
               padding: 16px;
               border-radius: 6px;
               font-family: Consolas, monospace;
               white-space: pre-wrap;
               margin-top: 20px;
           }
       </style>
   </head>
   <body>
       <h1>displayTest.py 测试输出</h1>
       <div class="output-container">{{ output }}</div>
   </body>
   </html>
   

4. 运行python app.py，访问http://localhost:5000即可看到测试输出。

方案二：纯前端JS实现（静态展示预生成输出） #

适合测试结果无需动态生成，仅需要展示已保存的输出内容的场景：

1. 先运行测试并保存输出到文本文件：

   python displayTest.py > test_output.txt
   

2. 编写HTML文件：

   <!DOCTYPE html>
   <html>
   <head>
       <title>测试输出展示</title>
       <style>
           .output-container {
               background: #f0f0f0;
               padding: 16px;
               border-radius: 6px;
               font-family: Consolas, monospace;
               white-space: pre-wrap;
               margin-top: 20px;
           }
       </style>
   </head>
   <body>
       <h1>displayTest.py 测试输出</h1>
       <div class="output-container" id="output"></div>
       <script>
           // 读取预生成的输出文件
           fetch('test_output.txt')
               .then(res => res.text())
               .then(text => document.getElementById('output').textContent = text)
               .catch(err => document.getElementById('output').textContent = `加载失败: ${err}`);
       </script>
   </body>
   </html>
   

3. 直接在浏览器中打开该HTML文件即可展示输出（注意需在本地服务器环境下运行，否则可能出现跨域问题，可使用python -m http.server启动简易服务器）。

资源参考 #

• Flask官方文档：学习路由配置、模板渲染等基础功能
• Python subprocess模块文档：了解如何在Python中执行外部命令并捕获输出
• MDN Web Docs：学习JS的fetch API及前端文件读取相关知识

内容的提问来源于stack exchange，提问作者Veuria