Chrome Devtools ProtocolとBiDi API

これらの例は現在CDPで実装されていますが、WebDriver-BiDiで機能が再実装された場合も同じコードが動作するはずです。

使用方法

Seleniumプロジェクトが実際のユースケースをサポートする作業を進めるにつれて、以下のAPIリストは増加していきます。追加してほしい機能がある場合は、機能リクエストを上げてください。

これらの例はWebDriver-Bidiプロトコルで再実装されると、WebDriver Bidiページに移動されます。

例

ベーシック認証

一部のアプリケーションは、ページを保護するためにブラウザ認証を使用しています。以前はURLで処理するのが一般的でしたが、ブラウザはこのサポートを停止しました。BiDiを使用すると、必要なときに認証情報を提供できるようになりました。

代替実装は、CDPエンドポイントのベーシック認証とCDP APIのベーシック認証にあります。

    Predicate<URI> uriPredicate = uri -> uri.toString().contains("herokuapp.com");
    Supplier<Credentials> authentication = UsernameAndPassword.of("admin", "admin");

    ((HasAuthentication) driver).register(uriPredicate, authentication);

GitHubで完全な例を表示

代替実装は、CDPエンドポイントベーシック認証にあります。

実装がありません

            var handler = new NetworkAuthenticationHandler()
            {
                UriMatcher = uri => uri.AbsoluteUri.Contains("herokuapp"),
                Credentials = new PasswordCredentials("admin", "admin")
            };

            var networkInterceptor = driver.Manage().Network;
            networkInterceptor.AddAuthenticationHandler(handler);

            await networkInterceptor.StartMonitoring();

GitHubで完全な例を表示

    driver.register(username: 'admin',
                    password: 'admin',
                    uri: /herokuapp/)

GitHubで完全な例を表示

コードの移動

const {Builder} = require('selenium-webdriver');

(async function example() {
  try {
    let driver = await new Builder()
      .forBrowser('chrome')
      .build();

    const pageCdpConnection = await driver.createCDPConnection('page');
    await driver.register('username', 'password', pageCdpConnection);
    await driver.get('https://the-internet.herokuapp.com/basic_auth');
    await driver.quit();
  }catch (e){
    console.log(e)
  }
}())

コードの移動

val uriPredicate = Predicate { uri: URI ->
        uri.host.contains("your-domain.com")
    }
(driver as HasAuthentication).register(uriPredicate, UsernameAndPassword.of("admin", "password"))
driver.get("https://your-domain.com/login")

スクリプトのピン留め

これは、リモートサーバーで実行する場合に特に役立ちます。たとえば、要素の可視性をチェックしたり、従来のget attributeメソッドを使用したりするたびに、Seleniumはjsファイルの内容をスクリプト実行エンドポイントに送信しています。これらのファイルはそれぞれ約50kBで、合計するとかなりの量になります。

実装がありません

実装がありません

            var key = await new JavaScriptEngine(driver).PinScript("return arguments;");

            var arguments = ((WebDriver)driver).ExecuteScript(key, 1, true, element);

GitHubで完全な例を表示

    key = driver.pin_script('return arguments;')
    arguments = driver.execute_script(key, 1, true, element)

GitHubで完全な例を表示

実装がありません

変更監視

変更監視とは、DOM内の特定の要素にDOMの変更があった場合に、WebDriver BiDiを介してイベントをキャプチャする機能です。

    CopyOnWriteArrayList<WebElement> mutations = new CopyOnWriteArrayList<>();
    ((HasLogEvents) driver).onLogEvent(domMutation(e -> mutations.add(e.getElement())));

GitHubで完全な例を表示

    async with driver.bidi_connection() as session:
        log = Log(driver, session)

GitHubで完全な例を表示

            var mutations = new List<IWebElement>();
            using IJavaScriptEngine monitor = new JavaScriptEngine(driver);
            monitor.DomMutated += (_, e) =>
            {
                var locator = By.CssSelector($"*[data-__webdriver_id='{e.AttributeData.TargetId}']");
                mutations.Add(driver.FindElement(locator));
            };

            await monitor.StartEventMonitoring();
            await monitor.EnableDomMutationMonitoring();

GitHubで完全な例を表示

    mutations = []
    driver.on_log_event(:mutation) { |mutation| mutations << mutation.element }

GitHubで完全な例を表示

コードの移動

const {Builder, until} = require('selenium-webdriver');
const assert = require("assert");

(async function example() {
  try {
    let driver = await new Builder()
      .forBrowser('chrome')
      .build();

    const cdpConnection = await driver.createCDPConnection('page');
    await driver.logMutationEvents(cdpConnection, event => {
      assert.deepStrictEqual(event['attribute_name'], 'style');
      assert.deepStrictEqual(event['current_value'], "");
      assert.deepStrictEqual(event['old_value'], "display:none;");
    });

    await driver.get('dynamic.html');
    await driver.findElement({id: 'reveal'}).click();
    let revealed = driver.findElement({id: 'revealed'});
    await driver.wait(until.elementIsVisible(revealed), 5000);
    await driver.quit();
  }catch (e){
    console.log(e)
  }
}())

コンソールログとエラー

`console.log`イベントをリッスンし、イベントを処理するためのコールバックを登録します。

CDP APIコンソールログとWebDriver BiDiコンソールログ

WebDriver BiDiコンソールログ実装を使用してください。 `HasLogEvents`は`Closeable`を実装していないため、非推奨になる可能性があります。

    CopyOnWriteArrayList<String> messages = new CopyOnWriteArrayList<>();
    ((HasLogEvents) driver).onLogEvent(consoleEvent(e -> messages.add(e.getMessages().get(0))));

GitHubで完全な例を表示

    async with driver.bidi_connection() as session:
        log = Log(driver, session)

        async with log.add_listener(Console.ALL) as messages:

GitHubで完全な例を表示

            using IJavaScriptEngine monitor = new JavaScriptEngine(driver);
            var messages = new List<string>();
            monitor.JavaScriptConsoleApiCalled += (_, e) =>
            {
                messages.Add(e.MessageContent);
            };

            await monitor.StartEventMonitoring();

GitHubで完全な例を表示

    logs = []
    driver.on_log_event(:console) { |log| logs << log.args.first }

GitHubで完全な例を表示

コードの移動

const {Builder} = require('selenium-webdriver');
(async () => {
  try {
    let driver = new Builder()
      .forBrowser('chrome')
      .build();

    const cdpConnection = await driver.createCDPConnection('page');
    await driver.onLogEvent(cdpConnection, function (event) {
      console.log(event['args'][0]['value']);
    });
    await driver.executeScript('console.log("here")');
    await driver.quit();
  }catch (e){
    console.log(e);
  }
})()

コードの移動

fun kotlinConsoleLogExample() {
    val driver = ChromeDriver()
    val devTools = driver.devTools
    devTools.createSession()

    val logConsole = { c: ConsoleEvent -> print("Console log message is: " + c.messages)}
    devTools.domains.events().addConsoleListener(logConsole)

    driver.get("https://www.google.com")

    val executor = driver as JavascriptExecutor
    executor.executeScript("console.log('Hello World')")

    val input = driver.findElement(By.name("q"))
    input.sendKeys("Selenium 4")
    input.sendKeys(Keys.RETURN)
    driver.quit()
}

JavaScriptの例外

JS例外をリッスンし、例外の詳細を処理するためのコールバックを登録します。

WebDriver BiDi JavaScript例外実装を使用してください。

    async with driver.bidi_connection() as session:
        log = Log(driver, session)

        async with log.add_js_error_listener() as messages:

GitHubで完全な例を表示

            using IJavaScriptEngine monitor = new JavaScriptEngine(driver);
            var messages = new List<string>();
            monitor.JavaScriptExceptionThrown += (_, e) =>
            {
                messages.Add(e.Message);
            };

            await monitor.StartEventMonitoring();

GitHubで完全な例を表示

    exceptions = []
    driver.on_log_event(:exception) { |exception| exceptions << exception }

GitHubで完全な例を表示

実装がありません

ネットワークインターセプト

リクエストとレスポンスの両方を記録または変換できます。

レスポンス情報

    CopyOnWriteArrayList<String> contentType = new CopyOnWriteArrayList<>();

    try (NetworkInterceptor ignored =
        new NetworkInterceptor(
            driver,
            (Filter)
                next ->
                    req -> {
                      HttpResponse res = next.execute(req);
                      contentType.add(res.getHeader("Content-Type"));
                      return res;
                    })) {

GitHubで完全な例を表示

実装がありません

            var contentType = new List<string>();

            INetwork networkInterceptor = driver.Manage().Network;
            networkInterceptor.NetworkResponseReceived += (_, e)  =>
            {
                contentType.Add(e.ResponseHeaders["content-type"]);
            };

            await networkInterceptor.StartMonitoring();

GitHubで完全な例を表示

    content_type = []
    driver.intercept do |request, &continue|
      continue.call(request) do |response|
        content_type << response.headers['content-type']
      end
    end

GitHubで完全な例を表示

実装がありません

レスポンス変換

    try (NetworkInterceptor ignored =
        new NetworkInterceptor(
            driver,
            Route.matching(req -> true)
                .to(
                    () ->
                        req ->
                            new HttpResponse()
                                .setStatus(200)
                                .addHeader("Content-Type", MediaType.HTML_UTF_8.toString())
                                .setContent(Contents.utf8String("Creamy, delicious cheese!"))))) {

GitHubで完全な例を表示

実装がありません

            var handler = new NetworkResponseHandler()
            {
                ResponseMatcher = _ => true,
                ResponseTransformer = _ => new HttpResponseData
                {
                    StatusCode = 200,
                    Body = "Creamy, delicious cheese!"
                }
            };

            INetwork networkInterceptor = driver.Manage().Network;
            networkInterceptor.AddResponseHandler(handler);

            await networkInterceptor.StartMonitoring();

GitHubで完全な例を表示

    driver.intercept do |request, &continue|
      continue.call(request) do |response|
        response.body = 'Creamy, delicious cheese!' if request.url.include?('blank')
      end
    end

GitHubで完全な例を表示

コードの移動

const connection = await driver.createCDPConnection('page')
let url = fileServer.whereIs("/cheese")
let httpResponse = new HttpResponse(url)
httpResponse.addHeaders("Content-Type", "UTF-8")
httpResponse.body = "sausages"
await driver.onIntercept(connection, httpResponse, async function () {
  let body = await driver.getPageSource()
  assert.strictEqual(body.includes("sausages"), true, `Body contains: ${body}`)
})
driver.get(url)

コードの移動

val driver = ChromeDriver()
val interceptor = new NetworkInterceptor(
      driver,
      Route.matching(req -> true)
        .to(() -> req -> new HttpResponse()
          .setStatus(200)
          .addHeader("Content-Type", MediaType.HTML_UTF_8.toString())
          .setContent(utf8String("Creamy, delicious cheese!"))))

    driver.get(appServer.whereIs("/cheese"))

    String source = driver.getPageSource()

リクエストインターセプト

実装がありません

実装がありません

            var handler = new NetworkRequestHandler
            {
                RequestMatcher = request => request.Url.Contains("one.js"),
                RequestTransformer = request =>
                {
                    request.Url = request.Url.Replace("one", "two");

                    return request;
                }
            };

            INetwork networkInterceptor = driver.Manage().Network;
            networkInterceptor.AddRequestHandler(handler);

            await networkInterceptor.StartMonitoring();

GitHubで完全な例を表示

    driver.intercept do |request, &continue|
      uri = URI(request.url)
      request.url = uri.to_s.gsub('one', 'two') if uri.path&.end_with?('one.js')
      continue.call(request)
    end

GitHubで完全な例を表示

最終更新日：2023年11月17日: Docsy 0 7 2へのアップグレード (#1529) (48f43616907)

Seleniumレベルスポンサー

Seleniumプロジェクトをサポートする

Seleniumプロジェクトをサポートしませんか？詳細はこちら、またはスポンサーの全リストをご覧ください。

詳細はこちら