Angular测试：如何等待GET请求完成后再操作已加载的表单元素

针对Angular 11应用异步请求返回后覆盖输入内容的问题，可通过以下3种可行方案解决：

方案1：等待Angular应用进入稳定状态（最通用） #

Angular内置的NgZone会自动追踪所有异步任务（包括HTTP请求、定时器等），所有异步任务执行完成后应用会进入稳定状态。可通过执行JavaScript脚本判断该状态，替换原有等待逻辑即可：

wait = WebDriverWait(driver, 25)
# 等待Angular完全稳定，所有异步请求执行完成
wait.until(lambda d: d.execute_script("""
  return window.getAllAngularTestabilities?.()[0].isStable ?? true;
"""))
# 此时再执行元素定位和输入操作
element = wait.until(expected_conditions.element_to_be_clickable(By.CSS_SELECTOR, user_name_id))
element.clear()
element.send_keys(text)

方案2：监听特定GET请求完成（最精准） #

如果只需要等待某一个获取表单数据的请求完成，可通过Selenium 4+支持的Chrome DevTools协议监听网络请求，匹配到目标请求返回后再执行操作：

import json
from selenium.webdriver import ChromeOptions

# 启动时开启CDP监听
options = ChromeOptions()
options.add_argument("--remote-debugging-port=9222")
driver = Chrome(options=options)
# 启用网络监听
driver.execute_cdp_cmd("Network.enable", {})
# 存储请求完成状态
request_completed = False

def intercept_response(event):
    global request_completed
    # 替换为你实际的获取用户数据的接口路径
    if "/api/user/info" in event["response"]["url"] and event["response"]["status"] == 200:
        request_completed = True

# 绑定响应监听事件
driver.add_cdp_listener("Network.responseReceived", intercept_response)

# 打开页面后等待目标请求完成
WebDriverWait(driver, 25).until(lambda d: request_completed)

# 后续执行输入逻辑
element = wait.until(expected_conditions.element_to_be_clickable(By.CSS_SELECTOR, user_name_id))
element.clear()
element.send_keys(text)

方案3：基于页面特征自定义等待 #

如果无法使用上述两种方案，可找页面上数据加载完成的显性特征做等待，比如加载动画消失、input框的初始值已经填充完成：

wait = WebDriverWait(driver, 25)
# 示例：等待input框的value属性不为空（确认接口返回的初始值已经填充到表单）
wait.until(lambda d: d.find_element(By.CSS_SELECTOR, user_name_id).get_attribute("value") != "")
# 或者等待页面上的加载loading元素消失
# wait.until(expected_conditions.invisibility_of_element_located((By.CSS_SELECTOR, ".loading-spinner")))

element = wait.until(expected_conditions.element_to_be_clickable(By.CSS_SELECTOR, user_name_id))
element.clear()
element.send_keys(text)

注意：所有方案输入前建议加clear()操作清空默认值，避免残留内容影响输入结果。

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