使用Selenium WebDriver测试时如何加载完整Django项目（含JS文件）

问题场景 #

用Selenium测试Django项目的JavaScript交互逻辑时，直接通过本地文件路径加载index.html模板，导致Django模板标签（如{{ usd|intcomma }}）未被渲染，页面如同打开静态文件，JavaScript也无法正常加载。测试运行后出现断言错误，预期元素初始值为0、点击按钮后变为100，但实际显示未解析的模板语法。

错误信息 #

self.assertEqual(driver.find_element(By.ID, "cash-table-usd").text, 100)
AssertionError: '{{ usd|intcomma }}' != 100

原测试代码 #

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
import pathlib
import os
import unittest

def file_uri(filename):
    return pathlib.Path(os.path.abspath(filename)).as_uri()

driver = webdriver.Chrome(ChromeDriverManager().install())

class ClientSideTests(unittest.TestCase):

    def test_deposit_withdraw(self):
        driver.get(file_uri("portfolio/templates/portfolio/index.html"))
        balance = driver.find_element(By.ID, "cash-table-usd").text
        driver.find_element(By.ID, "cash-amount").send_keys(100)
        cash_submit = driver.find_element(By.ID, "cash-button")
        cash_submit.click()
        self.assertEqual(driver.find_element(By.ID, "cash-table-usd").text, 100)

if __name__ == "__main__":
    unittest.main()

解决方法 #

1. 启动Django开发服务器，访问真实项目URL #

不能直接打开本地模板文件，必须让请求经过Django后端处理模板渲染、静态资源加载和业务逻辑。测试前手动启动Django开发服务器：

python manage.py runserver

然后让WebDriver访问服务器首页地址，比如http://127.0.0.1:8000/。

2. 修改测试代码中的访问路径 #

把原代码中driver.get(file_uri(...))替换为服务器URL：

def test_deposit_withdraw(self):
    driver.get("http://127.0.0.1:8000/")  # 替换为你的项目首页URL
    # 后续测试逻辑不变

3. 确保静态资源正常加载 #

• 开发环境下保持DEBUG=True，Django会自动处理静态资源的路由；
• 若使用生产环境配置，需提前运行python manage.py collectstatic收集静态文件，避免JS、CSS等资源404导致交互失效。

4. 自动启动/关闭服务器（可选） #

可以在测试类中添加自动启动服务器的逻辑，避免手动操作：

import subprocess
import time

class ClientSideTests(unittest.TestCase):
    @classmethod
    def setUpClass(cls):
        # 启动Django开发服务器，--noreload避免重复启动进程
        cls.server_process = subprocess.Popen(['python', 'manage.py', 'runserver', '--noreload'])
        time.sleep(2)  # 等待服务器完全启动

    @classmethod
    def tearDownClass(cls):
        # 测试结束后终止服务器进程
        cls.server_process.terminate()

    # 测试方法不变

5. 调整断言值匹配渲染结果 #

模板过滤器intcomma会格式化数字，比如0渲染后是0，100渲染后还是100，要根据实际渲染结果调整断言：

# 初始值断言
self.assertEqual(driver.find_element(By.ID, "cash-table-usd").text, "0")
# 点击后的断言
self.assertEqual(driver.find_element(By.ID, "cash-table-usd").text, "100")

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