Comment interagir avec les éléments du Shadow DOM d'un Chrome à l'aide des sélecteurs Selenium et CSS ?

Comment interagir avec les éléments de #shadow-root (open) tout en effaçant les données de navigation du navigateur Chrome à l'aide de Selenium avec le sélecteur CSS ?

Problème :

Lorsque vous tentez d'automatiser les interactions avec des éléments au sein du #shadow-root (open) de la fenêtre contextuelle Effacer les données de navigation à l'aide de Selenium, vous pourriez rencontrer des difficultés pour localiser le bouton Effacer les données. Cela peut être particulièrement frustrant si vous utilisez un sélecteur CSS pour identifier l'élément.

Solution :

Pour réussir à localiser et interagir avec les éléments dans la #shadow-root (ouvert) en utilisant Selenium, vous devrez utiliser une combinaison d'exécution JavaScript et de compréhension de Shadow DOM. Voici une approche détaillée étape par étape :

1. Obtenir la racine fantôme :

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

Cette méthode prend un élément shadowHost comme argument et renvoie la racine fantôme correspondante.

2. Accédez à l'élément Shadow :

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

Cette méthode prend un élément shadowHost et un sélecteur CSS pour l'élément shadow et renvoie l'élément shadow correspondant dans la racine shadow.

3. Traverser Shadow DOM (si plusieurs niveaux) :

Dans le cas de plusieurs racines d'ombre imbriquées, vous devez parcourir chaque niveau pour atteindre l'élément souhaité. Utilisez le code suivant pour parcourir les niveaux :

// 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. Exécution JavaScript :

Une approche alternative consiste à utiliser l'exécution JavaScript pour sélectionner directement l'élément. Cela peut être utile si le passage à travers plusieurs niveaux d’ombre est complexe ou peu pratique. Voici un exemple :

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

Ce code récupérerait l'élément de données Clear à l'aide de l'exécution JavaScript, simplifiant considérablement le processus de traversée.

En suivant ces étapes, vous pouvez interagir efficacement avec les éléments du #shadow-root (open) lors de la suppression des données de navigation dans le navigateur Chrome à l'aide de l'approche CSS Selector de Selenium.

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!