Selenium 및 CSS 선택기를 사용하여 Chrome의 Shadow DOM 내부 요소와 상호 작용하는 방법은 무엇입니까?

CSS 선택기와 함께 Selenium을 사용하여 Chrome 브라우저의 검색 데이터를 삭제하는 동안 #shadow-root(open) 내의 요소와 상호작용하는 방법은 무엇입니까?

문제:

상호작용을 자동화하려고 할 때 Selenium을 사용하여 검색 데이터 지우기 팝업의 #shadow-root(열기) 내의 요소를 사용하면 데이터 지우기 버튼을 찾는 데 어려움을 겪을 수 있습니다. 요소를 식별하기 위해 CSS 선택기를 사용하는 경우 이는 특히 실망스러울 수 있습니다.

해결책:

#shadow-root 내의 요소를 성공적으로 찾고 상호 작용하려면 (open) Selenium을 사용하려면 JavaScript 실행과 Shadow DOM에 대한 이해를 함께 사용해야 합니다. 자세한 단계별 접근 방식은 다음과 같습니다.

1. 섀도우 루트 가져오기:

private static WebElement getShadowRoot(WebDriver driver, WebElement shadowHost) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    return (WebElement) js.executeScript("return arguments[0].shadowRoot", shadowHost);
}

이 메소드는 ShadowHost 요소를 인수로 사용하고 해당 섀도우 루트를 반환합니다.

2. 그림자 요소에 액세스:

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

이 메소드는 ShadowHost 요소와 그림자 요소에 대한 CSS 선택기를 사용하고 섀도우 루트 내의 해당 그림자 요소를 반환합니다.

3. Shadow 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");
// and so on...

4. JavaScript 실행:

대체 접근 방식은 JavaScript 실행을 사용하여 요소를 직접 선택하는 것입니다. 이는 여러 그림자 수준을 통과하는 것이 복잡하거나 비현실적인 경우 유용할 수 있습니다. 예는 다음과 같습니다.

JavascriptExecutor js = (JavascriptExecutor) driver; 
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')");

이 코드는 JavaScript 실행을 사용하여 Clear 데이터 요소를 검색하여 순회 프로세스를 크게 단순화합니다.

이러한 단계를 따르면 Selenium의 CSS 선택기 접근 방식을 사용하여 Chrome 브라우저에서 인터넷 사용 기록을 삭제하는 동안 #shadow-root(열기).

위 내용은 Selenium 및 CSS 선택기를 사용하여 Chrome의 Shadow DOM 내부 요소와 상호 작용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!