Android Chrome点击正常，iOS Safari WebView点击Search按钮无响应

问题描述 #

点击导航栏弹出侧边菜单后，使用XPath //span[contains(text(),'Search')]定位Search按钮，测试用例执行通过，Appium日志显示元素可点击，但仅在iOS Safari WebView环境下点击后无法跳转到Search页面，Android Chrome下功能正常，测试环境为BrowserStack，且只有该Search按钮存在此问题。

相关代码 #

Java测试代码 #

@TimeIt(key = "click")
private void clickEvent(String uiIdentifierVariableName, boolean retry) throws Exception {
  
    findElement(uiIdentifierVariableName);
    WebElement webElement = ensureElementClickable(uiIdentifierVariableName);

    webElement.click(
  
}

注：代码存在语法错误，webElement.click(未闭合，实际运行时应该已修正。

页面HTML结构 #

<div _ngcontent-akc-c53="" class="nav ng-star-inserted is-mobile" bis_skin_checked="1" style="border-color: rgb(194, 204, 216);">
   <div _ngcontent-akc-c53="" class="mobile-side-nav ng-star-inserted" bis_skin_checked="1">
      <div _ngcontent-akc-c53="" class="side-container-bg ng-star-inserted" bis_skin_checked="1" style="display: block;"></div>
      <div _ngcontent-akc-c53="" id="mySidenav" class="side-container ng-star-inserted" bis_skin_checked="1" style="width: 185px;">
         <div _ngcontent-akc-c53="" class="responsive-side-background ng-star-inserted" bis_skin_checked="1"></div>
         <!---->
         <a _ngcontent-akc-c53="" class="menu-item ng-star-inserted" style="border-color: rgb(194, 204, 216);">
            <div _ngcontent-akc-c53="" class="icon search_icon" bis_skin_checked="1"></div>
            <span _ngcontent-akc-c53="" class="text"> Search </span><!---->
         </a>
         <!----><!---->
         <a _ngcontent-akc-c53="" class="menu-item active ng-star-inserted" style="border-color: rgb(194, 204, 216);">
            <div _ngcontent-akc-c53="" class="icon home_icon active" bis_skin_checked="1"></div>
            <span _ngcontent-akc-c53="" class="text"> Home </span>
            <div _ngcontent-akc-c53="" class="nav__selected-item-triangle ng-star-inserted" bis_skin_checked="1"></div>
            <!---->
         </a>
         <!----><!---->
         <a _ngcontent-akc-c53="" class="menu-item ng-star-inserted" style="border-color: rgb(194, 204, 216);">
            <div _ngcontent-akc-c53="" class="icon movie_icon" bis_skin_checked="1"></div>
            <span _ngcontent-akc-c53="" class="text"> Movies </span><!---->
         </a>
         <!----><!---->
         <a _ngcontent-akc-c53="" class="menu-item ng-star-inserted" style="border-color: rgb(194, 204, 216);">
            <div _ngcontent-akc-c53="" class="icon live_icon" bis_skin_checked="1"></div>
            <span _ngcontent-akc-c53="" class="text"> Live Channels </span><!---->
         </a>
         <!----><!---->
         <a _ngcontent-akc-c53="" class="menu-item ng-star-inserted" style="border-color: rgb(194, 204, 216);">
            <div _ngcontent-akc-c53="" class="icon stories_icon" bis_skin_checked="1"></div>
            <span _ngcontent-akc-c53="" class="text"> Stories </span><!---->
         </a>
         <!----><!---->
         <a _ngcontent-akc-c53="" class="menu-item ng-star-inserted" style="border-color: rgb(194, 204, 216);">
            <div _ngcontent-akc-c53="" class="icon kids_icon" bis_skin_checked="1"></div>
            <span _ngcontent-akc-c53="" class="text"> Kids </span><!---->
         </a>
         <!----><!----><!----><!---->
      </div>
      <div _ngcontent-akc-c53="" class="mobile-toggle ng-star-inserted" bis_skin_checked="1">
         <div _ngcontent-akc-c53="" id="hamburger" class="hamburger-icon change" bis_skin_checked="1">
            <div _ngcontent-akc-c53="" class="bar1 mobile" bis_skin_checked="1"></div>
            <div _ngcontent-akc-c53="" class="bar2 mobile" bis_skin_checked="1"></div>
            <div _ngcontent-akc-c53="" class="bar3 mobile" bis_skin_checked="1"></div>
         </div>
         <div _ngcontent-akc-c53="" class="home_icon hover icon" bis_skin_checked="1"></div>
      </div>
      <!---->
   </div>
   <!----><!---->
   <div _ngcontent-akc-c53="" class="right-container" bis_skin_checked="1">
      <!---->
      <a _ngcontent-akc-c53="" class="menu-item menu-item__profile ng-star-inserted">
         <div _ngcontent-akc-c53="" class="icon profile_icon" bis_skin_checked="1"></div>
         <span _ngcontent-akc-c53="" class="text menu-item__profile-text">Profiles</span>
      </a>
      <!---->
   </div>
</div>

可能的原因及排查方向 #

• 定位到子元素而非实际绑定事件的父元素：当前定位的是<span>标签，但页面中点击事件大概率绑定在其父级的<a class="menu-item ng-star-inserted">元素上。iOS Safari对事件委托的处理逻辑和Android Chrome不同，直接点击子元素可能无法触发父元素的绑定事件，导致跳转失效。
• iOS WebView的点击事件兼容性问题：部分前端框架在iOS WebView中要求可点击元素必须设置cursor: pointer样式，或者存在重叠元素（比如side-container-bg）在特定场景下遮挡了Search按钮的可点击区域，导致点击无法穿透。
• Appium点击方式的适配问题：iOS WebView中默认的click()方法可能是基于坐标的模拟点击，如果定位到的<span>元素实际可点击区域较小，或者元素位置存在偏移，就会出现日志显示点击成功但实际未触发事件的情况。可以尝试改用Actions类模拟真实的用户点击动作，或者直接定位并点击父级的<a>元素。
• 文本节点的空格差异：HTML中Search对应的<span>文本是Search（前后包含空格），虽然contains(text(),'Search')能匹配到元素，但iOS Safari对文本节点的处理可能和Android不同，导致定位的元素事件绑定异常。换成定位父元素的XPath //a[.//span[contains(text(),'Search')]]会更可靠。

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