micro-app 是一种常见的微前端技术实现，通常使用 Shadow DOM 来隔离子应用的样式和 DOM 结构。尽管它的结构类似于 iframe，但实际上并不是 iframe 元素，因此 iframe 的方法无法应用于 micro-app 的定位。要在 micro-app 中定位元素，需要使用 Selenium 与 Shadow DOM 进行交互。
定位 micro-app 中的 Shadow DOM 元素
1. 获取 micro-app 宿主元素的 Shadow Root：
由于 micro-app 中的内容通常被封装在 Shadow DOM 内，我们首先要获取 micro-app 宿主元素的 Shadow Root。
2. 使用 JavaScript 脚本进入 Shadow DOM：
Selenium 不直接支持对 Shadow DOM 内部元素的查找，需要使用 JavaScript 脚本来访问 Shadow DOM 内容。
3. 定位 Shadow DOM 内的元素：
在进入 Shadow DOM 后，便可以正常使用 find_element 定位其中的元素。
示例代码
假设 micro-app 元素的 ID 为 micro-app-element，并且我们需要定位其中的一个按钮 #button-inside-micro-app，代码如下：
from selenium import webdriver
from selenium.webdriver.common.by import By
初始化 WebDriver
driver = webdriver.Chrome()
driver.get(“https://your-microfrontend-url.com”)
定位 micro-app 元素
micro_app_host = driver.find_element(By.CSS_SELECTOR, “#micro-app-element”)
获取 micro-app 内的 Shadow DOM
shadow_root = driver.execute_script(“return arguments[0].shadowRoot”, micro_app_host)
在 Shadow DOM 内部定位目标元素
button_inside_micro_app = shadow_root.find_element(By.CSS_SELECTOR, “#button-inside-micro-app”)
进行点击或其他操作
button_inside_micro_app.click()
解释
• driver.execute_script("return arguments[0].shadowRoot", micro_app_host)：此脚本用于返回 micro-app 宿主元素的 Shadow Root，使我们能够进入 Shadow DOM。
• shadow_root.find_element：一旦进入 Shadow DOM，可以像常规 DOM 一样在其内部查找元素。
注意事项
• 层级嵌套：如果 Shadow DOM 结构是多层嵌套的，需要多次使用 execute_script 逐层深入每个 Shadow Root。
• 显式等待：对于异步加载的元素，可以结合显式等待来确保元素加载完成后再操作。
这种方式可以帮助你定位并操作 micro-app 中的元素。