Bagaimanakah Selenium Boleh Mengakses dan Berinteraksi dengan Elemen Tersembunyi dalam Shadow DOM?

Shadow Root dan Selenium: Menavigasi Pop Timbul Data Penyemakan Imbas

Mengakses elemen dalam #shadow-root (terbuka) sambil mengosongkan data semakan imbas dalam Chrome menggunakan Selenium boleh menimbulkan cabaran . Untuk mengatasinya, kita mesti memahami keupayaan Shadow DOM dan Selenium.

Shadow DOM

Shadow DOM membenarkan pembangun web merangkum HTML dan gaya dalam komponen tersuai, mencipta elemen UI yang terpencil dan bebas. Komponen ini, yang dipanggil "tuan rumah bayang", mempunyai pokok bayang sendiri, serpihan DOM tersembunyi.

Selenium dan Shadow DOM

Selenium tidak menyokong unsur Shadow DOM secara asli kerana ia terletak di luar pokok DOM utama. Untuk berinteraksi dengan elemen ini, kita mesti mengakses pokok bayangnya dahulu.

Melintasi Shadow DOM

1. Mengenalpasti Hos Bayangan:

Cari hos bayangan dalam DOM utama menggunakan kaedah findElement Selenium.

2. Mengekstrak Akar Bayang:

Gunakan kaedah tersuai kami getShadowRoot untuk mengakses akar bayang yang dikaitkan dengan hos bayang.

3. Menavigasi Pokok Bayang:

Lintas pepohon bayang dengan menggunakan kaedah getShadowElement kami, masukkan akar bayang dan pemilih CSS elemen sasaran.

Contoh: Mengosongkan Data Penyemakan Imbas

Menggunakan kaedah tersuai kami, kami boleh menavigasi Shadow DOM berbilang peringkat untuk mengakses dan mengklik Kosongkan Data Penyemakan Imbas butang:

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

Sebagai alternatif, kami boleh menggunakan satu panggilan JavaScript:

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

Atas ialah kandungan terperinci Bagaimanakah Selenium Boleh Mengakses dan Berinteraksi dengan Elemen Tersembunyi dalam Shadow DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!