Java >> Java tutorial >  >> Tag >> while

Sådan interagerer du med elementerne i #shadow-root (åben), mens du sletter browserdata i Chrome-browseren ved hjælp af cssSelector

Hvis du prøver at få 'Ryd data'-elementet, kan du bruge nedenstående js til at hente elementet og derefter udføre.

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

Her er eksempelscriptet.

driver.get("chrome://settings/clearBrowserData");
driver.manage().window().maximize();
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')");
// now you can click on clear data button
clearData.click();

Redigering 2:Forklaring

Problem: Selenium giver ikke eksplicit støtte til at arbejde med Shadow DOM-elementer, da de ikke er i den aktuelle dom. Det er grunden til, at vi får NoSuchElementException undtagelse, når du prøver at få adgang til elementerne i shadow dom .

Shadow DOM:

Bemærk:Vi vil henvise til termerne vist på billedet. Så gå venligst gennem billedet for bedre forståelse.

Løsning:

For at arbejde med skyggeelement først skal vi finde shadow host hvortil skyggedomen er knyttet. Her er den enkle metode til at få skyggeroden baseret på shadowHost.

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

Og så kan du få adgang til skyggetræ-elementet ved hjælp af shadowRoot-elementet.

// get the shadowHost in the original dom using findElement
WebElement shadowHost = driver.findElement(By.cssSelector("shadowHost_CSS"));
// get the shadow root
WebElement shadowRoot = getShadowRoot(driver,shadowHost);
// access shadow tree element
WebElement shadowTreeElement = shadowRoot.findElement(By.cssSelector("shadow_tree_element_css"));

For at forenkle alle ovenstående trin oprettede nedenstående metode.

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

Nu kan du få shadowTree Element med enkelt metodekald

WebElement shadowHost = driver.findElement(By.cssSelector("shadowHost_CSS_Goes_here));
WebElement shadowTreeElement = getShadowElement(driver,shadowHost,"shadow_tree_element_css");

Og udfør handlingerne som normalt som .click() , .getText() .

shadowTreeElement.click()

Dette ser enkelt ud, når du kun har ét niveau af skygge-DOM. Men her, i dette tilfælde, har vi flere niveauer af skyggedoms. Så vi er nødt til at få adgang til elementet ved at nå hver skyggevært og rod.

Nedenfor er uddraget ved hjælp af metoderne nævnt ovenfor (getShadowElement og getShadowRoot)

// 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"));
System.out.println(clearData.getText());
clearData.click();

Du kan opnå alle ovenstående trin i et enkelt js-opkald som nævnt i begyndelsen af ​​svaret (tilføjet nedenfor bare for at mindske forvirringen).

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

Skærmbillede:


Java tag