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

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

DDD
DDDOriginal
2024-12-20 08:30:091013Durchsuche

How to Interact with Elements Inside a Chrome's Shadow DOM Using Selenium and CSS Selectors?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn