Selenium および CSS セレクターを使用して Chrome の Shadow DOM 内の要素を操作するにはどうすればよいですか?

Selenium と CSS セレクターを使用して Chrome ブラウザの閲覧データをクリアしながら #shadow-root (開いている) 内の要素を操作する方法?

問題:

自動化しようとしたときSelenium を使用して閲覧データのクリア ポップアップの #shadow-root (オープン) 内の要素と対話する場合、データのクリア ボタンを見つけるのが難しい場合があります。 CSS セレクターを使用して要素を識別している場合、これは特にイライラする可能性があります。

解決策:

#shadow-root 内の要素を適切に見つけて操作するには(オープン) Selenium を使用する場合は、JavaScript の実行と Shadow DOM の理解を組み合わせて使用​​する必要があります。詳細な段階的なアプローチは次のとおりです。

1. Get Shadow Root:

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

このメソッドは、shadowHost 要素を引数として受け取り、対応するシャドウ ルートを返します。

2.シャドウ要素へのアクセス:

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

このメソッドは、shadowHost 要素とシャドウ要素の CSS セレクターを受け取り、シャドウ ルート内の対応するシャドウ要素を返します。

3. Shadow DOM のトラバース (複数レベルの場合):

複数のネストされたシャドウ ルートの場合、目的の要素に到達するために各レベルをトラバースする必要があります。レベルを移動するには、次のコードを使用します:

// 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. JavaScript の実行:

別のアプローチは、JavaScript の実行を使用して要素を直接選択することです。これは、複数のシャドウ レベルを通過することが複雑または非現実的である場合に役立ちます。以下に例を示します。

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

このコードは、JavaScript 実行を使用してクリア データ要素を取得し、トラバーサル プロセスを大幅に簡素化します。

これらの手順に従うことで、オブジェクト内の要素を効果的に操作できます。 #shadow-root (オープン) Selenium の CSS セレクター アプローチを使用して Chrome ブラウザーの閲覧データをクリアします。

以上がSelenium および CSS セレクターを使用して Chrome の Shadow DOM 内の要素を操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。