Comment accéder et interagir avec les éléments Shadow DOM dans la boîte de dialogue « Effacer les données de navigation » de Chrome à l'aide de Selenium ?

Interfaçage avec les éléments Shadow DOM dans #shadow-root (open) lors de la suppression des données du navigateur Chrome via le sélecteur CSS

Pendant l'automatisation du navigateur Chrome La fenêtre contextuelle "Effacer les données de navigation" via Selenium, accédant aux éléments de #shadow-root (open), tels que le bouton "Effacer les données", peut être un défi. Cela est dû au fait que les éléments Shadow DOM ne sont pas directement accessibles via l'arborescence DOM standard.

Localisation de l'hôte Shadow et de la racine

Pour interagir avec les éléments Shadow DOM , nous devons d'abord identifier l'hôte fantôme, qui est l'élément du DOM principal qui contient le DOM fantôme. Une fois l'hôte fantôme localisé, nous pouvons utiliser la méthode getShadowRoot() de Selenium JavaScript Executor pour récupérer la racine fantôme de l'hôte.

Parcours des niveaux d'ombre

Dans les cas où il existe plusieurs niveaux de shadow DOM, nous devons parcourir ces niveaux pour atteindre l'élément souhaité. Pour ce faire, nous pouvons répéter de manière récursive le processus ci-dessus en localisant l'hôte fantôme dans la racine fantôme actuelle, puis en récupérant sa racine fantôme à l'aide de getShadowRoot().

Exemple de code

L'exemple suivant montre comment utiliser la méthode getShadowRoot() et le parcours récursif pour accéder au bouton « Effacer les données » dans le menu « Effacer la navigation ». Popup "Données" :

JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement shadowHost = driver.findElement(By.cssSelector("settings-ui"));
WebElement shadowRoot = (WebElement) js.executeScript("return arguments[0].shadowRoot", shadowHost);
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')");
clearData.click();

En tirant parti de cette approche, vous pouvez interagir efficacement avec les éléments de #shadow-root (open) et effectuer les actions souhaitées.

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!