Bagaimana untuk Berinteraksi dengan Elemen Di Dalam Shadow DOM Chrome Menggunakan Pemilih Selenium dan CSS?

Bagaimana untuk Berinteraksi dengan Elemen Dalam #shadow-root (terbuka) Semasa Mengosongkan Data Penyemakan Imbas Penyemak Imbas Chrome Menggunakan Selenium dengan Pemilih CSS?

Masalah:

Apabila cuba mengautomasikan interaksi dengan elemen dalam #shadow-root (terbuka) pada pop timbul Clear browsing data menggunakan Selenium, anda mungkin menghadapi cabaran dalam mencari butang Clear data. Ini boleh mengecewakan terutamanya jika anda menggunakan pemilih CSS untuk mengenal pasti elemen.

Penyelesaian:

Untuk berjaya mencari dan berinteraksi dengan elemen dalam #shadow-root (terbuka) menggunakan Selenium, anda perlu menggunakan gabungan Perlaksanaan JavaScript dan pemahaman Shadow DOM. Berikut ialah pendekatan langkah demi langkah terperinci:

1. Dapatkan Shadow Root:

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

Kaedah ini mengambil elemen shadowHost sebagai hujah dan mengembalikan akar bayang yang sepadan.

2. Akses Elemen Bayang:

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

Kaedah ini mengambil elemen shadowHost dan pemilih CSS untuk elemen bayang dan mengembalikan elemen bayang yang sepadan dalam akar bayang.

3. Traverse Shadow DOM (jika berbilang peringkat):

Dalam kes berbilang akar bayang bersarang, anda perlu melintasi setiap peringkat untuk mencapai elemen yang diingini. Gunakan kod berikut untuk melintasi tahap:

// 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. Perlaksanaan JavaScript:

Pendekatan alternatif ialah menggunakan Perlaksanaan JavaScript untuk memilih elemen secara terus. Ini boleh berguna jika merentasi berbilang tahap bayang-bayang adalah rumit atau tidak praktikal. Berikut ialah contoh:

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

Kod ini akan mendapatkan semula elemen Clear data menggunakan JavaScript Execution, dengan ketara memudahkan proses traversal.

Dengan mengikuti langkah-langkah ini, anda boleh berinteraksi secara berkesan dengan elemen dalam #shadow-root (terbuka) sambil mengosongkan data semakan imbas dalam Penyemak Imbas Chrome menggunakan pendekatan Pemilih CSS Selenium.

Atas ialah kandungan terperinci Bagaimana untuk Berinteraksi dengan Elemen Di Dalam Shadow DOM Chrome Menggunakan Pemilih Selenium dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!