带有 BiDi API 的 Chrome Devtools 协议

这些示例目前使用 CDP 实现，但当使用 WebDriver-BiDi 重新实现该功能时，相同的代码应该也能正常工作。

用法

随着 Selenium 项目致力于支持实际用例，以下 API 列表将不断增加。如果您希望看到其他功能，请提出功能请求。

随着这些示例使用 WebDriver-Bidi 协议重新实现，它们将移至 WebDriver Bidi 页面。

示例

基本身份验证

一些应用程序利用浏览器身份验证来保护页面。过去，通常在 URL 中处理它们，但浏览器已停止支持此功能。使用 BiDi，您现在可以在需要时提供凭据

    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 属性方法时，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 上查看完整示例

缺少实现

添加示例

Mutation 观察

突变观察是当 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)

WebDriver BiDi 是跨浏览器自动化的未来。阅读全部内容！

带有 BiDi API 的 Chrome Devtools 协议

用法

示例

基本身份验证

固定脚本

Mutation 观察

控制台日志和错误

JavaScript 异常

网络拦截

响应信息

响应转换

请求拦截

Selenium 等级赞助商

支持 Selenium 项目