그림자 루트 내부의 액세스 요소

Question

Java 및 Selenium을 사용하여 그림자 DOM의 요소를 찾을 수 있습니까?

나는

<paper-input id="homeSearch" class="home-search-btn home-inputs" placeholder="Where would you like to go?" no-label-float="" tabindex="0" aria-disabled="false"><iron-icon icon="-search-" slot="prefix" class="form-icons search-icon"></iron-icon></paper-input>

이 내가 인터넷에서 검색 homesearchdriver.findElement(By.id("homesearch"));처럼에 입력을 보낼 수 있지만 appropiate 솔루션을 얻을하려는 그림자 루트에서 요소를 먹고 싶어. 그림자 DOM 루트가 여러 단계를 수행 내부

도움 모든 유형의 정말

Answer 1

얻기 요소를 평가합니다.

속성

첫째, '호스트'요소를 얻을, 귀하의 경우 입력 page = "home"

WebElement host1 = driver.findElement(By.cssSelector("vrs-app[page='home']")); 

그 후, 호스트에서 그림자 루트를 얻을 수있는 자바 스크립트 스크립트를 실행해야합니다, 당신은 얻을 수 있습니다 웹 요소에서 .shadowRoot을 호출하여 그림자 루트.

WebElement shadowRoot = (WebElement)((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", host); 

그러나 하나의 캐치가 있습니다. 입력 내용은 여러 섀도우 돔에 중첩되어 있으므로 두 번해야합니다. , 그 후

public WebElement GetShadowRoot(WebElement host) { 
    WebElement shadowRoot = (WebElement)((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", host); 
    return shadowRoot ; 
} 

이 같은, 당신이 필요로하는 호스트에 도달 할 때까지 모든 그림자 뿌리를 아래로 다이빙 :이 작업을 수행하는 가장 효율적인 방법은, 예를 들어, 방법을 사용하는 것입니다

WebElement host1 = driver.FindElement(By.cssSelector("vrs-app[page='home']")); 
WebElement shadow1 = GetShadowRoot(host1); 

WebElement host2 = shadow1.FindElement(By.cssSelector("vrs-home")); 
WebElement shadow2 = GetShadowRoot(host2); 

// We've reached the shadow dom containing the input 
// Note: I'm not using By.id since this may throw an error 
WebElement paperInput = shadow2.findElement(By.cssSelector("paper-input[id='homeSearch']")); 

이제 paperInput으로 원하는 작업을 수행 할 수 있습니다.

사이드 노트 :이 방법은 다른 브라우저에서 테스트하지 않은 Chrome에서 작동합니다 (방금 테스트 한 것임). 또한, 나는 언어 구문이 약간 다를 수도 있으므로 자바를 모른다.