如何使用硒在 shadow dom 内切换到 iframe [英] How to switch to iframe inside shadow dom with selenium

问题描述

被测应用程序基于 Electron(版本 9.1.1)编写为 Linux 桌面应用程序.在电子中有自定义标签 <webview> 即引用

---

UPD 我通过暴露的端口连接到电子应用程序，也许这是一种问题?

 public WebDriver createDriver(DesiredCapabilities requiredCapabilities)ChromeOptions options = new ChromeOptions();options.setExperimentalOption("debuggerAddress", "localhost:8315");options.setAcceptInsecureCerts(true);options.merge(desiredCapabilities);返回新的 ChromeDriver(选项)；}

解决方案

其实答案很简单.您只需要明确声明您希望 webview 出现在窗口句柄列表中.

这是官方的 chromedriver 文档链接，功能名称是 windowTypes

在java代码中它看起来像这样

ChromeOptions options = new ChromeOptions();列表<字符串>webview = Collections.singletonList(webview");options.setExperimentalOption("windowTypes", webview);WebDriver driver = new ChromeDriver(options);//之后你可以切换到isdriver.switchTo().window(yourHandle");//并像往常一样使用它driver.findElement(By.xpath(".//label[text()='Columns']"));

Application under test is based on Electron (version 9.1.1) written as desktop application for Linux. In electron there are custom tag <webview> that is quote "The webview tag is essentially a custom element using shadow DOM to wrap an iframe element inside it."

I can access shadow dom and get iframe as WebElement out of it with Java selenim(version 3.141.59).

But swithcing to iframe still left me on parent context.

And my question is:

HOW TO SWITH TO IFRAME INSIDE SHADOW DOM?

//getting webdriver
WebDriver driver = WebDriverRunner.getWebDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;

//acquire shadow dom WebElement 
WebElement shadowDom = (WebElement) js.executeScript("return arguments[0].shadowRoot", driver.findElement(By.tagName("webview")));

//acquire iframe WebElement 
WebElement iframe = shadowDom.findElement(By.tagName("iframe"));

//trying to swith to iframe inside shadow DOM, but still at parent context because can't find element that exist in iframe
driver.switchTo().frame(iframe);

//obviously produce NoSuchElementException
driver.findElement(By.xpath(".//label[text()='Columns']"));

---

This is HTML of the page, and I can get html of webview executing in devtools command document.querySelector('webview').openDevTools(); That's why I'm sure that .//label[text()='Columns'] exist.

---

UPD I'm connecting to electron application through exposed port, maybe this is kind of issue?

    public WebDriver createDriver(DesiredCapabilities desiredCapabilities) 

        ChromeOptions options = new ChromeOptions();
        options.setExperimentalOption("debuggerAddress", "localhost:8315");
        options.setAcceptInsecureCerts(true);
        options.merge(desiredCapabilities);

        return new ChromeDriver(options);
    }

解决方案

Actually answer was pretty simple. You need just explicitly declare that you want webview to appear in the list of window handles.

Here is official chromedriver docs link and capabilities name is windowTypes

In java code it will be looked like this

ChromeOptions options = new ChromeOptions();
List<String> webview = Collections.singletonList("webview");
options.setExperimentalOption("windowTypes", webview);

WebDriver driver = new ChromeDriver(options);

//after that you can just switch to is
driver.switchTo().window("yourHandle");

//and work with it as usual
driver.findElement(By.xpath(".//label[text()='Columns']"));

这篇关于如何使用硒在 shadow dom 内切换到 iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！