Selenium4下如何用JavaScript实现Shadow DOM元素的isDisplayed等状态方法

你报错的核心原因是原生DOM元素没有enable()实例方法，DOM元素的可交互、可见、选中状态都是通过标准属性/计算样式判断的，不需要调用方法。另外你写的JS代码还存在引号嵌套冲突的问题，Java字符串里嵌套双引号需要转义，更稳妥的方案是通过executeScript的arguments参数传递选择器，避免转义错误。

1. isDisplayed（元素可见） #

判断逻辑需要覆盖常见的隐藏场景，JS实现如下：

const host = document.querySelector('宿主选择器');
const el = host.shadowRoot.querySelector('内部元素选择器');
if (!el) return false;
const style = window.getComputedStyle(el);
return style.display !== 'none' 
  && style.visibility !== 'hidden' 
  && style.visibility !== 'collapse'
  && style.opacity !== '0'
  && el.offsetWidth > 0 
  && el.offsetHeight > 0
  && el.offsetParent !== null;

2. isEnabled（元素可交互） #

直接读取DOM元素的原生disabled属性即可，普通非表单元素默认都是可交互状态：

const host = document.querySelector('宿主选择器');
const el = host.shadowRoot.querySelector('内部元素选择器');
return el ? !el.disabled : false;

3. isSelected（元素选中，仅适用于单选框、复选框、下拉选项等表单元素） #

直接读取DOM元素的原生checked或selected属性即可：

const host = document.querySelector('宿主选择器');
const el = host.shadowRoot.querySelector('内部元素选择器');
return el ? (el.checked || el.selected || false) : false;

你可以封装成通用工具类，直接传入Shadow宿主选择器和内部元素选择器调用：

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.By;
import org.openqa.selenium.SearchContext;

public class ShadowDomUtils {
    // 判断Shadow DOM内元素是否可见
    public static Boolean isShadowElementDisplayed(WebDriver driver, String hostSelector, String innerSelector) {
        JavascriptExecutor js = (JavascriptExecutor) driver;
        String script = "const host = document.querySelector(arguments[0]);\n" +
                "if (!host || !host.shadowRoot) return false;\n" +
                "const el = host.shadowRoot.querySelector(arguments[1]);\n" +
                "if (!el) return false;\n" +
                "const style = window.getComputedStyle(el);\n" +
                "return style.display !== 'none' \n" +
                "    && style.visibility !== 'hidden' \n" +
                "    && style.visibility !== 'collapse'\n" +
                "    && style.opacity !== '0'\n" +
                "    && el.offsetWidth > 0 \n" +
                "    && el.offsetHeight > 0\n" +
                "    && el.offsetParent !== null;";
        return (Boolean) js.executeScript(script, hostSelector, innerSelector);
    }

    // 判断Shadow DOM内元素是否可交互
    public static Boolean isShadowElementEnabled(WebDriver driver, String hostSelector, String innerSelector) {
        JavascriptExecutor js = (JavascriptExecutor) driver;
        String script = "const host = document.querySelector(arguments[0]);\n" +
                "if (!host || !host.shadowRoot) return false;\n" +
                "const el = host.shadowRoot.querySelector(arguments[1]);\n" +
                "return el ? !el.disabled : false;";
        return (Boolean) js.executeScript(script, hostSelector, innerSelector);
    }

    // 判断Shadow DOM内元素是否选中
    public static Boolean isShadowElementSelected(WebDriver driver, String hostSelector, String innerSelector) {
        JavascriptExecutor js = (JavascriptExecutor) driver;
        String script = "const host = document.querySelector(arguments[0]);\n" +
                "if (!host || !host.shadowRoot) return false;\n" +
                "const el = host.shadowRoot.querySelector(arguments[1]);\n" +
                "return el ? (el.checked || el.selected || false) : false;";
        return (Boolean) js.executeScript(script, hostSelector, innerSelector);
    }

    // 调用示例
    public static void main(String[] args) {
        WebDriver driver = null; // 替换为你自己初始化的driver实例
        Boolean isEnabled = isShadowElementEnabled(driver, "foo > boo", "foo>boo>span");
        System.out.println(isEnabled);
    }
}

你使用的Selenium 4.0+已经原生支持Shadow DOM定位，不需要全手写JS，也可以先获取ShadowRoot实例再查找元素，直接调用Selenium原生的三个状态判断方法：

// Selenium4原生Shadow DOM定位示例
WebElement shadowHost = driver.findElement(By.cssSelector("foo > boo"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement innerElement = shadowRoot.findElement(By.cssSelector("foo>boo>span"));
// 直接调用原生方法
System.out.println(innerElement.isDisplayed());
System.out.println(innerElement.isEnabled());
System.out.println(innerElement.isSelected());

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