Selenium은 Shadow DOM 내에 숨겨진 요소에 어떻게 액세스하고 상호 작용할 수 있습니까?

Shadow Root 및 Selenium: 검색 데이터 팝업 탐색

Selenium을 사용하여 Chrome에서 검색 데이터를 삭제하는 동안 #shadow-root(열기) 내의 요소에 액세스하면 문제가 발생할 수 있습니다. . 이를 극복하려면 Shadow DOM과 Selenium의 기능을 이해해야 합니다.

Shadow DOM

Shadow DOM을 사용하면 웹 개발자는 HTML과 스타일을 사용자 정의 구성 요소 내에 캡슐화하여 격리되고 독립적인 UI 요소를 만들 수 있습니다. "섀도우 호스트"라고 불리는 이러한 구성 요소에는 숨겨진 DOM 조각인 고유한 섀도우 트리가 있습니다.

Selenium 및 Shadow DOM

Selenium은 Shadow DOM 요소가 외부에 있으므로 기본적으로 Shadow DOM 요소를 지원하지 않습니다. 메인 DOM 트리. 이러한 요소와 상호 작용하려면 먼저 해당 섀도우 트리에 액세스해야 합니다.

Shadow DOM 탐색

1. 섀도우 호스트 식별:

Selenium의 findElement 메소드를 사용하여 기본 DOM에서 섀도우 호스트를 찾습니다.

2. 섀도우 루트 추출:

사용자 정의 메소드 getShadowRoot를 사용하여 섀도우 호스트와 연관된 섀도우 루트에 액세스합니다.

3. 그림자 트리 탐색:

getShadowElement 메소드를 사용하고 대상 요소의 그림자 루트 및 CSS 선택기를 전달하여 그림자 트리를 탐색합니다.

예: 검색 데이터 지우기

사용자 정의 방법을 사용하면 다단계 Shadow DOM을 탐색하여 Clear Browsing Data(브라우징 데이터 삭제) 버튼에 액세스하고 클릭할 수 있습니다. 버튼:

WebElement shadowHostL1 = driver.findElement(By.cssSelector("settings-ui"));
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"));
clearData.click();

또는 단일 JavaScript 호출을 사용할 수 있습니다:

WebElement clearData = (WebElement) js.executeScript("return document.querySelector(...[CSS selector to traverse Shadow DOM]...");

위 내용은 Selenium은 Shadow DOM 내에 숨겨진 요소에 어떻게 액세스하고 상호 작용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!