Serenity Screenplay项目Chrome浏览器Shadow Root定位异常求助

核心问题分析 #

• 版本不匹配：Chrome 115.0.5790.102 需搭配同版本的ChromeDriver（115.x），当前使用的114.x版本会引发兼容性问题，这是触发后续定位错误的潜在原因之一。
• 定位器兼容性：Shadow Root内使用XPath定位存在兼容性缺陷，Selenium对Shadow DOM的CSS选择器支持更稳定，且你的XPath路径冗余易出错。
• Shadow Root类型转换：Shadow Root本身是SearchContext而非WebElement，最初的类型转换错误是正确的，但后续定位错误由其他原因导致。

分步解决方案 #

1. 匹配Chrome与ChromeDriver版本 #

立即将ChromeDriver升级至115.0.5790.102（与Chrome版本完全一致），可从ChromeDriver官方渠道获取对应版本。版本不匹配会导致Selenium与浏览器通信异常，引发各类定位错误。

2. 修正Shadow Root内元素定位代码 #

使用CSS选择器替代XPath，简化定位路径，同时确保通过SearchContext正确操作Shadow Root内元素：

WebDriver driver = actor.usingAbilityTo(BrowseTheWeb.class).getDriver();
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

// 等待Shadow Host加载完成
WebElement shadowHost = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#theEmbed")));

// 获取Shadow Root（正确转换为SearchContext）
SearchContext shadowRoot = (SearchContext) ((JavascriptExecutor) driver)
        .executeScript("return arguments[0].shadowRoot", shadowHost);

// 使用CSS选择器定位下拉框（结合HTML结构中的data-testid）
WebElement dropdown = wait.until(ExpectedConditions.visibilityOfElementLocated(
        By.cssSelector("[data-testid='field-block__column-count-1'] select")
));

// 验证元素可见性
dropdown.isDisplayed();

3. 额外优化建议 #

• 若Shadow Root为closed模式，无法通过Selenium直接访问，需确认目标Shadow Root为open模式（根据你的HTML截图，当前为open模式，此条可忽略）。
• 在Serenity Screenplay框架中，可封装Shadow DOM操作的自定义任务，避免重复代码：

public class InteractWithShadowElement implements Task {
    private final By hostLocator;
    private final By targetLocator;

    public InteractWithShadowElement(By hostLocator, By targetLocator) {
        this.hostLocator = hostLocator;
        this.targetLocator = targetLocator;
    }

    public static InteractWithShadowElement locatedInShadowHost(By hostLocator, By targetLocator) {
        return new InteractWithShadowElement(hostLocator, targetLocator);
    }

    @Override
    public <T extends Actor> void performAs(T actor) {
        WebDriver driver = actor.usingAbilityTo(BrowseTheWeb.class).getDriver();
        WebElement shadowHost = new WebDriverWait(driver, Duration.ofSeconds(10))
                .until(ExpectedConditions.visibilityOfElementLocated(hostLocator));
        SearchContext shadowRoot = (SearchContext) ((JavascriptExecutor) driver)
                .executeScript("return arguments[0].shadowRoot", shadowHost);
        WebElement targetElement = new WebDriverWait(shadowRoot, Duration.ofSeconds(10))
                .until(ExpectedConditions.visibilityOfElementLocated(targetLocator));
        // 可添加自定义操作，如点击、选择下拉选项等
        targetElement.isDisplayed();
    }
}

测试用例中调用方式：

actor.attemptsTo(
        InteractWithShadowElement.locatedInShadowHost(
                By.cssSelector("#theEmbed"),
                By.cssSelector("[data-testid='field-block__column-count-1'] select")
        )
);

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