如何用Selenium替换页面远程资源为本地资源？能否强制替换做自动化测试？

嘿，这个需求我刚好折腾过，完全可以实现！不管是日常调试还是自动化测试场景，都有靠谱的方案，下面给你详细拆解：

方案一：网络请求拦截重定向（推荐用于自动化测试） #

这种方法直接在网络层面拦截目标远程资源的请求，把它重定向到本地地址，不需要修改页面DOM，更贴近真实用户的访问流程，非常适合自动化测试场景。

核心是利用Chrome DevTools Protocol（CDP）来实现请求拦截，步骤如下：

• 初始化浏览器时启用CDP支持
• 设置拦截规则，监听目标资源的请求
• 匹配到目标URL后，重定向到本地资源地址

给你个Python版的代码示例：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

# 初始化Chrome浏览器
options = Options()
driver = webdriver.Chrome(options=options)

# 启用CDP网络模块
driver.execute_cdp_cmd("Network.enable", {})

# 设置请求拦截规则：拦截所有脚本资源
driver.execute_cdp_cmd("Network.setRequestInterception", {
    "patterns": [{"urlPattern": "*", "resourceType": "Script", "interceptionStage": "HeadersReceived"}]
})

# 定义拦截回调函数
def redirect_to_local(request):
    # 目标远程资源URL
    target_remote_url = "http://cdn.foo.bar/lib.js"
    # 本地资源地址
    local_url = "http://localhost:3000/lib.js"
    
    if request["request"]["url"] == target_remote_url:
        # 执行重定向
        driver.execute_cdp_cmd("Network.redirectRequest", {
            "requestId": request["requestId"],
            "url": local_url
        })

# 绑定监听事件
driver.add_listener("Network.requestWillBeSent", redirect_to_local)

# 现在加载目标页面，远程脚本会自动被替换成本地的
driver.get("你的测试页面URL")

这个方案的优势是：从请求源头替换资源，不会出现先加载远程资源再替换的情况，完全符合自动化测试的真实性要求。

方案二：修改页面DOM替换资源 #

如果对CDP不太熟悉，也可以通过直接修改页面元素的属性来替换资源。这种方法更直观，适合简单场景，但要注意操作时机，避免远程资源已经加载完成。

方法1：页面加载后修改 #

等页面加载完成后，找到目标元素并修改它的href或src属性：

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

driver = webdriver.Chrome()
driver.get("你的测试页面URL")

# 等待目标script元素加载完成
wait = WebDriverWait(driver, 10)
target_script = wait.until(EC.presence_of_element_located(
    (By.CSS_SELECTOR, 'script[href="http://cdn.foo.bar/lib.js"]')
))

# 执行JavaScript修改属性
driver.execute_script("arguments[0].href = 'http://localhost:3000/lib.js';", target_script)

# 之后页面用到该脚本时，就会加载本地版本了

方法2：提前注入脚本（避免加载远程资源） #

如果页面加载时会立即请求远程资源，上面的方法可能会导致先加载远程资源再替换。这时候可以用CDP提前注入脚本，在页面DOM构建完成前就替换资源：

from selenium import webdriver

driver = webdriver.Chrome()

# 注入页面加载前执行的脚本
driver.execute_cdp_cmd("Page.addScriptToEvaluateOnNewDocument", {
    "source": """
        // 在DOM内容加载完成时立即替换资源
        document.addEventListener('DOMContentLoaded', function() {
            const targetScript = document.querySelector('script[href="http://cdn.foo.bar/lib.js"]');
            if (targetScript) {
                targetScript.href = 'http://localhost:3000/lib.js';
            }
        });
    """
})

# 加载页面，此时脚本会自动替换
driver.get("你的测试页面URL")

总结 #

• 自动化测试优先选方案一，网络拦截重定向能确保资源从一开始就用本地的，测试结果更准确；
• 简单调试场景可以用方案二，操作直观易上手。

内容的提问来源于stack exchange，提问作者Luca S.