Selenium을 사용하여 Chrome에서 중첩된 Shadow DOM 요소에 액세스하는 방법은 무엇입니까?

Shadow DOM 요소 액세스: Chrome에서 검색 데이터를 삭제하는 동안 #shadow-root(열기)와 상호 작용

#shadow-root와 인터페이스 Chrome의 인터넷 사용 기록 삭제 팝업에 있는 '데이터 삭제' 버튼과 같은 요소는 다음과 같은 이유로 Selenium 내에서 특별한 처리가 필요합니다. Shadow DOM 내의 캡슐화.

문제 설명:

Selenium을 사용하여 Chrome의 검색 데이터 지우기 팝업을 자동화하는 동안 " cssSelector를 사용하여 데이터 지우기" 버튼을 누르면 예외.

해결책:

이러한 맥락에서 Shadow DOM의 중첩 특성으로 인해 대상 요소에 액세스하려면 여러 섀도우 루트 수준을 통과해야 합니다. 사용자 정의 메소드인 getShadowElement를 사용하면 섀도우 트리 요소에 대한 간소화된 액세스가 가능합니다.

public static WebElement getShadowElement(WebDriver driver, WebElement shadowHost, String cssOfShadowElement) {
    WebElement shardowRoot = getShadowRoot(driver, shadowHost);
    return shardowRoot.findElement(By.cssSelector(cssOfShadowElement));
}

여러 getShadowElement 호출을 연결하여 섀도우 DOM 수준을 점진적으로 내려갈 수 있습니다.

// Locate shadowHost on the current dom
WebElement shadowHostL1 = driver.findElement(By.cssSelector("settings-ui"));

// now locate the shadowElement by traversing all shadow levels
WebElement shadowElementL1 = getShadowElement(driver, shadowHostL1, "settings-main");
WebElement shadowElementL2 = getShadowElement(driver, shadowElementL1,"settings-basic-page");
WebElement shadowElementL3 = getShadowElement(driver, shadowElementL2,"settings-section > settings-privacy-page");
WebElement shadowElementL4 = getShadowElement(driver, shadowElementL3,"settings-clear-browsing-data-dialog");
WebElement shadowElementL5 = getShadowElement(driver, shadowElementL4,"#clearBrowsingDataDialog");
WebElement clearData = shadowElementL5.findElement(By.cssSelector("#clearBrowsingDataConfirm"));

또는 , 단일 JavaScript 호출로 순회를 캡슐화할 수 있습니다. process:

WebElement clearData = (WebElement) js.executeScript("return document.querySelector('settings-ui').shadowRoot.querySelector('settings-main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('settings-section > settings-privacy-page').shadowRoot.querySelector('settings-clear-browsing-data-dialog').shadowRoot.querySelector('#clearBrowsingDataDialog').querySelector('#clearBrowsingDataConfirm')");

이 접근 방식을 사용하면 중첩된 Shadow DOM 구조에 관계없이 "데이터 지우기" 버튼을 포함하여 #shadow-root(열기) 요소와 원활한 상호 작용이 가능합니다.

위 내용은 Selenium을 사용하여 Chrome에서 중첩된 Shadow DOM 요소에 액세스하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!