iframe下ion-button元素XPath定位报No such Element Found问题

问题说明 #

定位Sign In提交按钮时触发No such Element Found报错，目标元素为Ionic框架生成的按钮，代码如下：

<ion-button class="ta-btn btn-red ios button button-block button-round button-outline ion-activatable ion-focusable hydrated" expand="block" fill="outline" mode="ios" shape="round" tabindex="1" type="submit" ng-reflect-expand="block" ng-reflect-fill="outline" ng-reflect-mode="ios" ng-reflect-shape="round" ng-reflect-type="submit">Sign In</ion-button>

排查中发现页面存在如下iframe片段，怀疑是iframe嵌套导致定位失败：

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NDWL4GS"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

根因澄清 #

上述找到的iframe 不会导致登录按钮定位失效：

• 该iframe包裹在<noscript>标签内，仅当浏览器禁用JavaScript时才会渲染，常规自动化测试环境默认开启JS，不会加载这个iframe
• 该iframe是统计埋点用的隐藏元素，宽高为0且设置了不可见属性，内部不可能存放登录按钮这类业务交互元素

真实失效原因通常为三类：登录按钮实际存放在其他业务iframe中未切换上下文、Ionic组件自带Shadow DOM导致XPath无法穿透、元素未完成加载就触发定位逻辑。

可行操作步骤 #

• 第一步：确认元素所在容器
  打开浏览器开发者工具的Elements面板，选中目标Sign In按钮后向上回溯DOM树，检查是否存在<iframe>父节点，或是带有#shadow-root标识的Shadow DOM根节点，确认元素的实际嵌套层级。
• 第二步：若元素在业务iframe内，先切换上下文再定位
  以Selenium框架为例，切换iframe后再执行定位的代码参考：

  # 通过iframe的id、name、索引或者自定义定位器，切换到目标iframe上下文
  driver.switch_to.frame("业务iframe的定位表达式")
  # 上下文切换完成后，再定位目标按钮
  signin_btn = driver.find_element(By.XPATH, '//ion-button[normalize-space(text())="Sign In" and @type="submit"]')
  # 操作完成后需要操作主页面元素时，切回默认上下文即可
  driver.switch_to.default_content()
  

  注意：无需尝试切换到noscript标签内的隐藏统计iframe，该iframe内部无业务元素。
• 第三步：若为Shadow DOM嵌套导致的定位失效
  Ionic框架组件默认开启Shadow DOM做样式封装，常规XPath无法直接穿透Shadow根节点，可使用对应自动化框架提供的Shadow DOM定位API，也可优先使用文本、type属性这类稳定特征做定位，目标元素的稳定XPath参考：

  //ion-button[@type="submit" and normalize-space(text())="Sign In"]
  

• 第四步：增加显式等待规避加载时序问题
  页面元素未完成渲染时执行定位也会抛出找不到元素的错误，定位前增加显式等待，等元素进入可交互状态再操作：

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  
  # 最长等待10秒，直到按钮可点击
  WebDriverWait(driver, 10).until(
      EC.element_to_be_clickable((By.XPATH, '//ion-button[normalize-space(text())="Sign In"]'))
  )
  

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