Selenium测试Azure DevOps React扩展时React渲染内容丢失问题

已成功通过Selenium完成Azure DevOps登录、切换目标标签页、定位并切换至承载扩展的iframe、找到React应用的<div id="root">元素，但无法定位React渲染的内部元素（如div[data-testid='my-extension']）。

测试代码 #

url = f"https://dev.azure.com/{organization}/{project}/_workitems/edit/{work_item_id}"
driver.get(url)
print('URL:', url)

# Click on the 'Test Script' tab
test_script_tab = WebDriverWait(driver, 30).until(
    EC.element_to_be_clickable((By.XPATH, "//*[@role='tab' and .//text()='Test Script']"))
)
test_script_tab.click()
print("Clicked on test script tab successfully.")

# Switch to the iframe
#iframe = WebDriverWait(driver, 10).until(
#EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR, "iframe.external-content-iframe"))
#)

driver.switch_to.frame(driver.find_element(By.TAG_NAME, "iframe"))
print("Switched to iframe successfully.")

# Wait for the element with ID "root" to be present
wait = WebDriverWait(driver, 30)
root = wait.until(EC.presence_of_element_located((By.ID, "root")))
print("root located")

extension = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "div[data-testid='my-extension']")))

# This element is never found!

print("extension element located")

补充的iframe HTML结构 #

<iframe frameborder="0" class="external-content-iframe" id="externalContentHost7" name="externalContentHost7"
  role="presentation" style=""
  src="https://my-extension.gallerycdn.vsassets.io/extensions/my-extension/1.0.135/1720177232664/./dist/index.html">


  <html lang="en" class=" cqcfdctn idc0_350">

  <head>
  </head>

  <body class="m-0">
    <div id="root">
      <div data-testid="my-extension">

可行解决建议 #

• 确保iframe完全加载后再切换：替换当前直接通过By.TAG_NAME定位iframe的代码，改用显式等待iframe可用并切换，避免iframe未加载完成就进入上下文：

  iframe = WebDriverWait(driver, 20).until(
      EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR, "iframe.external-content-iframe"))
  )
  

• 改用可见性等待条件：presence_of_element_located仅确认元素存在于DOM，但React组件可能尚未渲染完成，改用visibility_of_element_located等待元素可见：

  extension = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div[data-testid='my-extension']")))
  

• 验证定位器准确性：在浏览器开发者工具中，切换到iframe上下文，直接用CSS选择器div[data-testid='my-extension']搜索，确认元素是否存在、属性值是否正确（注意大小写、拼写错误）。
• 检查是否存在嵌套iframe：确认目标元素所在的#root是否在当前切换的iframe内，没有被嵌套在更深的iframe中。
• 添加React渲染完成的等待逻辑：如果扩展依赖React异步渲染，可以等待React的hydrate或render完成，比如通过执行JavaScript检查：

  wait.until(lambda driver: driver.execute_script("return typeof window.React !== 'undefined' && document.readyState === 'complete'"))
  

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