Comment accéder aux éléments Shadow DOM imbriqués dans Chrome à l'aide de Selenium ?

Accès aux éléments Shadow DOM : interagir avec #shadow-root (open) tout en effaçant les données de navigation dans Chrome

Interface avec #shadow-root des éléments, tels que le bouton « Effacer les données » dans la fenêtre contextuelle Effacer les données de navigation de Chrome, nécessitent un traitement spécial dans Selenium en raison de leur encapsulation dans l'ombre. DOM.

Énoncé du problème :

Lors de l'utilisation de Selenium pour automatiser la fenêtre contextuelle Effacer les données de navigation de Chrome, accès à l'élément #shadow-root (open) contenant les « Effacer les données » le bouton utilisant cssSelector entraîne exceptions.

Solution :

En raison de la nature imbriquée des Shadow DOM dans ce contexte, l'accès à l'élément cible nécessite de traverser plusieurs niveaux de racine fantôme. L'utilisation d'une méthode personnalisée, getShadowElement, permet un accès simplifié aux éléments de l'arborescence fantôme :

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

En enchaînant plusieurs appels getShadowElement, vous pouvez descendre progressivement dans les niveaux du DOM fantôme :

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

Alternativement , un seul appel JavaScript peut encapsuler le processus de traversée :

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

Cette approche permet interaction transparente avec les éléments #shadow-root (open), y compris le bouton "Effacer les données", quelle que soit leur structure shadow DOM imbriquée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!