如何使用选择器筛选仅可见元素及改写XPath以筛选aria-hidden='false'的元素

嘿，刚接触这类技术问题不用不好意思，我来帮你理清思路，一步步解答你的两个问题～

针对这个需求，你可以根据使用的技术场景选择不同的实现方式：

• 原生CSS选择器：
  原生CSS没有直接的:visible伪类，但可以通过排除隐藏相关属性/样式来筛选：
  • 排除带有hidden全局属性的元素：*:not([hidden])
  • 排除内联样式含display:none的元素：*:not([style*="display:none"])（注：这种方式对display: none!important等特殊写法兼容性一般）
  • 多条件组合（覆盖常见隐藏场景）：*:not([hidden]):not([style*="display:none"]):not([style*="visibility:hidden"])
• jQuery选择器：
  jQuery提供了开箱即用的:visible伪类，直接执行$(":visible")就能选中所有可见元素，它会自动排除display:none、visibility:hidden、宽高为0等隐藏状态的元素。
• XPath：
  可以通过检查元素的属性和样式实现筛选，示例如下：

  //*[not(contains(@style,'display:none')) and not(contains(@style,'visibility:hidden')) and not(@hidden)]
  

你原来的XPath是通过排除display:none的div来定位按钮，现在要切换到筛选aria-hidden='false'的元素，只需把原有的style检查条件替换为aria-hidden属性的判断即可：

基础改写版本（仅匹配明确标记aria-hidden='false'的div）： #

//div[@aria-hidden='false']//button[.='OK']

严谨兼容版本（同时匹配无aria-hidden属性的默认可见div）： #

如果页面中存在未设置aria-hidden属性但实际可见的div，你可以用逻辑或包含这类元素：

//div[not(@aria-hidden) or @aria-hidden='false']//button[.='OK']

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