Bagaimana untuk Mengakses Elemen DOM Bayangan Bersarang dalam Chrome Menggunakan Selenium?

Mengakses Elemen Shadow DOM: Berinteraksi dengan #shadow-root (terbuka) Semasa Membersihkan Data Semak Imbas dalam Chrome

Mengantaramuka dengan #shadow-root elemen, seperti butang "Kosongkan data" dalam pop timbul data penyemakan imbas padam Chrome, memerlukan pengendalian khas dalam Selenium kerana kepada enkapsulasi mereka dalam DOM bayangan.

Pernyataan Masalah:

Semasa menggunakan Selenium untuk mengautomasikan pop timbul data penyemakan imbas Clear Chrome, mengakses elemen #shadow-root (terbuka) yang mengandungi butang "Kosongkan data" menggunakan cssSelector terhasil pengecualian.

Penyelesaian:

Disebabkan sifat bersarang DOM bayang-bayang dalam konteks ini, mengakses elemen sasaran memerlukan merentasi berbilang peringkat akar bayang-bayang. Menggunakan kaedah tersuai, getShadowElement, membolehkan akses diperkemas kepada elemen pokok bayang:

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

Dengan merantai berbilang panggilan getShadowElement, anda boleh turun secara beransur-ansur melalui peringkat DOM bayangan:

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

Sebagai alternatif , satu panggilan JavaScript boleh merangkum traversal proses:

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

Pendekatan ini membolehkan interaksi lancar dengan elemen #shadow-root (terbuka), termasuk butang "Kosongkan data", tanpa mengira struktur DOM bayangan bersarangnya.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Elemen DOM Bayangan Bersarang dalam Chrome Menggunakan Selenium?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!