如何在Karate UI中校验/断言元素显示或隐藏，实现Selenium的isDisplayed等效功能

一、Karate中exist和present的区别 #

• exist：仅判断目标元素是否存在于DOM树结构中，不校验可见性，哪怕元素设置了display: none、被完全遮挡，只要HTML代码里包含该节点，就返回true
• present：同时满足两个条件才返回true：①元素存在于DOM中；②元素对用户可见，等效于Selenium的isDisplayed()方法，刚好是你需要的功能

二、两种调用方式的正确实现 #

1. 元素级调用（对应Selenium的element.isDisplayed()） #

直接对定位到的元素调用isPresent()方法即可：

# 定位元素后判断可见性
* def targetEle = locate('#abc')
* print targetEle.isPresent()

2. 全局浏览器级调用（对应Selenium的browser.isElementDisplayed(selector)） #

你可以封装一个通用方法直接用：

# 先封装通用判断方法
* def isElementDisplayed = function(selector) { return karate.present(selector) }
# 调用时直接传选择器即可
* print isElementDisplayed('#abc')

三、你之前的写法报错原因&修复方案 #

你写的两种script调用方式失效的常见原因和修复如下：

1. 基于元素的script调用写法修复 #

locate()返回的元素实例调用script()时，参数里的_指代当前DOM元素，不需要再加jQuery选择器，正确写法：

# 注意需要页面本身引入了jQuery才可以这么用
* print locate('#abc').script("return $(_).is(':visible')")

2. 全局script调用写法修复 #

全局调用script()时需要加return把判断结果返回，不然默认返回undefined：

# 同样依赖页面已引入jQuery
* print script("return $('#abc').is(':visible')")

无jQuery依赖的原生JS实现方案 #

如果测试页面没有引入jQuery，可以用原生JS实现可见性判断，兼容性更强：

* def eleVisible = script("""
  const el = document.querySelector('#abc');
  if (!el) return false;
  const computedStyle = window.getComputedStyle(el);
  return computedStyle.display !== 'none' 
    && computedStyle.visibility !== 'hidden' 
    && computedStyle.opacity !== '0' 
    && el.offsetWidth > 0 
    && el.offsetHeight > 0;
""")
* print eleVisible

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