Django Selenium测试：如何点击Ajax模态弹窗中的确认按钮

嘿，针对你大学任务里的Django应用Selenium删除功能测试，我结合你给出的确认页面模板和模态框脚本，整理了一套实用的实现方案，帮你顺利完成测试：

你的删除流程大概是这样的：

• 点击页面上的删除按钮，触发showModal(url)加载删除确认页面到模态框
• 在模态框里确认删除，提交表单
• 系统完成删除操作，跳转或刷新页面

下面是基于Django的LiveServerTestCase编写的测试用例，涵盖了完整的删除验证流程：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from django.test import LiveServerTestCase
from django.contrib.auth.models import User
from your_app.models import Car  # 替换成你实际的车辆模型

class CarDeletionTest(LiveServerTestCase):
    @classmethod
    def setUpClass(cls):
        super().setUpClass()
        # 初始化Chrome浏览器，可根据需要换成Firefox等
        cls.driver = webdriver.Chrome()
        cls.driver.implicitly_wait(10)  # 全局隐式等待10秒

    @classmethod
    def tearDownClass(cls):
        cls.driver.quit()
        super().tearDownClass()

    def setUp(self):
        # 创建测试用户和测试车辆
        self.user = User.objects.create_user(username="testuser", password="testpass123")
        self.test_car = Car.objects.create(plate_number="ABC123", brand="Toyota", owner=self.user)

    def test_successful_car_deletion(self):
        # 1. 登录系统（如果删除需要权限验证）
        self.driver.get(f"{self.live_server_url}/accounts/login/")
        self.driver.find_element(By.ID, "id_username").send_keys("testuser")
        self.driver.find_element(By.ID, "id_password").send_keys("testpass123")
        self.driver.find_element(By.XPATH, "//input[@type='submit']").click()

        # 2. 导航到车辆列表页
        self.driver.get(f"{self.live_server_url}/cars/")

        # 3. 找到对应车辆的删除按钮并点击（假设删除按钮有data-url属性绑定删除地址）
        delete_btn = WebDriverWait(self.driver, 10).until(
            EC.element_to_be_clickable((By.XPATH, f"//tr[contains(., '{self.test_car.plate_number}')]//button[contains(@class, 'delete-btn')]"))
        )
        delete_btn.click()

        # 4. 等待模态框加载完成，并确认删除按钮可见
        WebDriverWait(self.driver, 10).until(
            EC.visibility_of_element_located((By.ID, "myModal"))
        )
        confirm_btn = self.driver.find_element(By.CLASS_NAME, "btn-danger")
        confirm_btn.click()

        # 5. 验证删除是否成功
        # 方式1：检查车辆列表中已不存在该车辆
        WebDriverWait(self.driver, 10).until(
            EC.invisibility_of_element_located((By.XPATH, f"//td[text()='{self.test_car.plate_number}']"))
        )
        # 方式2：验证页面的成功提示（如果有）
        success_alert = self.driver.find_element(By.CLASS_NAME, "alert-success")
        self.assertIn("车辆已成功删除", success_alert.text)
        # 方式3：直接查询数据库验证记录已删除
        self.assertFalse(Car.objects.filter(id=self.test_car.id).exists())

• 模态框加载等待：你的showModal(url)是通过AJAX加载确认页面到#myModalBody，所以必须用WebDriverWait显式等待模态框内容加载完成，不能直接点击按钮
• CSRF令牌处理：模板里的{% csrf_token %}会自动生成令牌，Selenium提交表单时浏览器会自动携带，无需额外处理
• 元素定位技巧：尽量用稳定的属性（比如车辆唯一标识、按钮的特定class）定位元素，避免使用绝对XPath，防止页面结构变动导致测试失效

• 点击删除按钮无反应：检查元素是否被遮挡，或者是否需要等待元素完全可点击（用element_to_be_clickable条件）
• 找不到确认按钮：确认模态框的ID是myModal，且btn-danger按钮确实在模态框内，可通过浏览器开发者工具验证元素路径
• 登录后权限不足：确保测试用户拥有删除车辆的权限，或者在setUp中给用户添加对应权限

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