Wie greife ich mit Selenium auf verschachtelte Shadow-DOM-Elemente in Chrome zu?

Zugriff auf Shadow-DOM-Elemente: Interaktion mit #shadow-root (offen) beim Löschen von Browserdaten in Chrome

Schnittstelle mit #shadow-root Elemente wie die Schaltfläche „Daten löschen“ im Chrome-Popup „Browserdaten löschen“ erfordern aufgrund ihrer Kapselung im Schatten eine besondere Behandlung in Selenium DOMs.

Problemstellung:

Während der Verwendung von Selenium zur Automatisierung des Chrome-Popups „Browserdaten löschen“ wird auf das Element #shadow-root (offen) zugegriffen, das „Daten löschen“ enthält. Schaltfläche mit cssSelector führt zu Ausnahmen.

Lösung:

Aufgrund der verschachtelten Natur von Schatten-DOMs in diesem Kontext erfordert der Zugriff auf das Zielelement das Durchlaufen mehrerer Schattenstammebenen. Die Verwendung einer benutzerdefinierten Methode, getShadowElement, ermöglicht einen optimierten Zugriff auf Schattenbaumelemente:

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

Durch die Verkettung mehrerer getShadowElement-Aufrufe können Sie schrittweise durch die Schatten-DOM-Ebenen absteigen:

// 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"));

Alternativ , ein einzelner JavaScript-Aufruf kann den Durchlaufprozess kapseln:

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')");

Dies Der Ansatz ermöglicht eine nahtlose Interaktion mit #shadow-root (offenen) Elementen, einschließlich der Schaltfläche „Daten löschen“, unabhängig von ihrer verschachtelten Schatten-DOM-Struktur.

Das obige ist der detaillierte Inhalt vonWie greife ich mit Selenium auf verschachtelte Shadow-DOM-Elemente in Chrome zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!