Wie kann Selenium auf im Shadow DOM verborgene Elemente zugreifen und mit ihnen interagieren?

Shadow Root und Selenium: Navigieren im Browserdaten-Popup

Der Zugriff auf Elemente innerhalb des #shadow-root (offen) beim Löschen von Browserdaten in Chrome mit Selenium kann eine Herausforderung darstellen . Um dies zu überwinden, müssen wir die Fähigkeiten von Shadow DOM und Selenium verstehen.

Shadow DOM

Shadow DOM ermöglicht Webentwicklern, HTML und Stil in benutzerdefinierten Komponenten zu kapseln und so isolierte und unabhängige UI-Elemente zu erstellen. Diese als „Shadow Hosts“ bezeichneten Komponenten verfügen über einen eigenen Shadow Tree, ein verstecktes DOM-Fragment.

Selenium und Shadow DOM

Selenium unterstützt Shadow DOM-Elemente nicht nativ, da sie außerhalb liegen Haupt-DOM-Baum. Um mit diesen Elementen zu interagieren, müssen wir zuerst auf ihren Schattenbaum zugreifen.

Schatten-DOM durchqueren

1. Identifizieren des Schattenhosts:

Suchen Sie den Schattenhost im Haupt-DOM mithilfe der findElement-Methode von Selenium.

2. Extrahieren des Schattenstamms:

Verwenden Sie unsere benutzerdefinierte Methode getShadowRoot, um auf den Schattenstamm zuzugreifen, der dem Schattenhost zugeordnet ist.

3. Navigieren im Schattenbaum:

Durchlaufen Sie den Schattenbaum mit unserer getShadowElement-Methode und übergeben Sie dabei das Schattenstammverzeichnis und den CSS-Selektor des Zielelements.

Beispiel: Browserdaten löschen

Mit unseren benutzerdefinierten Methoden können wir durch das mehrstufige Shadow-DOM navigieren, um auf „Browserdaten löschen“ zuzugreifen und darauf zu klicken Button:

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();

Alternativ können wir einen einzelnen JavaScript-Aufruf verwenden:

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

Das obige ist der detaillierte Inhalt vonWie kann Selenium auf im Shadow DOM verborgene Elemente zugreifen und mit ihnen interagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!