Wie interagiere ich mithilfe von Selenium- und CSS-Selektoren mit Elementen im Shadow DOM von Chrome?

Wie interagiere ich mit Elementen in #shadow-root (offen) beim Löschen der Browserdaten des Chrome-Browsers mithilfe von Selenium mit CSS-Selektor?

Problem:

Beim Versuch, Interaktionen mit Elementen innerhalb der #shadow-root zu automatisieren (geöffnet) des Popup-Fensters „Browserdaten löschen“ mit Selenium öffnen, kann es beim Auffinden der Schaltfläche „Daten löschen“ zu Problemen kommen. Dies kann besonders frustrierend sein, wenn Sie einen CSS-Selektor verwenden, um das Element zu identifizieren.

Lösung:

Elemente innerhalb der #shadow-root erfolgreich finden und mit ihnen interagieren (offen) Wenn Sie Selenium verwenden, müssen Sie eine Kombination aus JavaScript-Ausführung und Verständnis von Shadow DOM verwenden. Hier ist eine detaillierte Schritt-für-Schritt-Anleitung:

1. Schattenwurzel abrufen:

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

Diese Methode verwendet ein ShadowHost-Element als Argument und gibt die entsprechende Schattenwurzel zurück.

2. Zugriff auf das Schattenelement:

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

Diese Methode verwendet ein ShadowHost-Element und einen CSS-Selektor für das Schattenelement und gibt das entsprechende Schattenelement im Schattenstamm zurück.

3. Schatten-DOM durchqueren (bei mehreren Ebenen):

Im Fall mehrerer verschachtelter Schattenwurzeln müssen Sie jede Ebene durchqueren, um das gewünschte Element zu erreichen. Verwenden Sie den folgenden Code, um Ebenen zu durchlaufen:

// 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-Ausführung:

Ein alternativer Ansatz besteht darin, die JavaScript-Ausführung zu verwenden, um das Element direkt auszuwählen. Dies kann nützlich sein, wenn das Durchqueren mehrerer Schattenebenen komplex oder unpraktisch ist. Hier ist ein Beispiel:

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

Dieser Code würde das Clear-Datenelement mithilfe der JavaScript-Ausführung abrufen, was den Durchlaufprozess erheblich vereinfacht.

Durch Befolgen dieser Schritte können Sie effektiv mit Elementen innerhalb interagieren #shadow-root (offen) beim Löschen von Browserdaten im Chrome-Browser mithilfe des CSS-Selektor-Ansatzes von Selenium.

Das obige ist der detaillierte Inhalt vonWie interagiere ich mithilfe von Selenium- und CSS-Selektoren mit Elementen im Shadow DOM von Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!