Comment Selenium peut-il accéder et interagir avec les éléments cachés dans Shadow DOM ?

Shadow Root et Selenium : naviguer dans la fenêtre contextuelle des données de navigation

Accéder aux éléments de la #shadow-root (open) tout en effaçant les données de navigation dans Chrome à l'aide de Selenium peut présenter des défis . Pour surmonter cela, nous devons comprendre les capacités de Shadow DOM et Selenium.

Shadow DOM

Shadow DOM permet aux développeurs Web d'encapsuler le HTML et le style dans des composants personnalisés, créant ainsi des éléments d'interface utilisateur isolés et indépendants. Ces composants, appelés « hôtes fantômes », ont leur propre arborescence fantôme, un fragment DOM caché.

Selenium et Shadow DOM

Selenium ne prend pas en charge nativement les éléments Shadow DOM car ils se trouvent en dehors du arborescence principale du DOM. Pour interagir avec ces éléments, il faut d'abord accéder à leur arbre d'ombre.

Traversing Shadow DOM

1. Identification de l'hôte fantôme :

Localisez l'hôte fantôme dans le DOM principal à l'aide de la méthode findElement de Selenium.

2. Extraction de la racine fantôme :

Utilisez notre méthode personnalisée getShadowRoot pour accéder à la racine fantôme associée à l'hôte fantôme.

3. Navigation dans l'arbre fantôme :

Parcourez l'arbre fantôme à l'aide de notre méthode getShadowElement, en transmettant la racine fantôme et le sélecteur CSS de l'élément cible.

Exemple : Effacement des données de navigation

En utilisant nos méthodes personnalisées, nous pouvons naviguer dans le Shadow DOM à plusieurs niveaux pour accéder et cliquer sur Effacer les données de navigation. bouton :

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

Alternativement, nous pouvons utiliser un seul appel JavaScript :

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

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!