浅入浅出Selenium DevTools

前言

在自动化测试领域，Selenium一直是主流工具之一。随着前端技术的不断发展，浏览器的功能也在不断丰富。

Selenium 3版本前，一套通用的采集流程如上图所示：

1. 打开Charles，设置Session自动导出频次及导出路径
2. Selenium模拟操作Chrome网页页面，待网页页面渲染出需采集的数据
3. 解析Charles拦截的Session，提取目标数据

Selenium 4版本引入了org.openqa.selenium.devtools.DevTools，为开发者提供了更底层、更强大的浏览器交互能力。对以上采集流程而言，DevTools优化了步骤2，减少了模块间的异步交互，增加了采集的稳定性。

什么是DevTools？

DevTools是Selenium 4引入的一个全新的功能模块，它允许开发者直接与浏览器的DevTools协议（Chrome DevTools Protocol，CDP）进行交互。通过DevTools，开发者可以获取浏览器的更底层信息，或者执行更复杂的浏览器操作。

Chrome DevTools协议是一个允许工具与浏览器内部对象交互的接口。通过CDP，开发者可以访问浏览器的所有内部信息，如页面结构、网络请求、性能指标等。此外，CDP还允许开发者执行一些高级操作，如设置页面缩放、获取页面截图、模拟设备等。

为什么使用DevTools？

更底层的浏览器控制

相比传统的Selenium API，DevTools提供了更底层的浏览器控制能力。通过直接访问CDP，开发者可以获取更详细的浏览器状态信息，或执行更复杂的操作。

更高的灵活性

DevTools的灵活性是它最大的优势之一。通过CDP，开发者可以根据需求自定义浏览器的行为，而不受传统API的限制。

更广泛的应用场景

DevTools的功能涵盖了从性能分析到网络代理，从页面调试到设备模拟等多个方面。这种多样化的功能使得DevTools在自动化测试、性能优化、网络调试等领域都有广泛的应用。

DevTools的核心概念

DevTools Server

DevTools Server是DevTools的核心，它负责与浏览器的CDP交互。开发者可以通过DevTools Server发送指令，并接收浏览器的响应。DevTools Server的创建与管理是使用DevTools的前提条件。

DevTools Command

DevTools Command是DevTools的操作单元。通过发送特定的命令，开发者可以执行各种操作，如获取页面内容、模拟用户交互、设置浏览器配置等。DevTools Command可以通过DevTools Server发送，并通过回调接收执行结果。

Event Listener

DevTools支持通过事件监听器（Event Listener）来监听浏览器的各种事件。例如，开发者可以监听页面加载完成、网络请求完成、页面元素更新等事件。这使得开发者可以在特定事件发生时执行自定义逻辑。

实际应用场景

1. 获取页面性能数据

通过DevTools，开发者可以轻松获取页面的性能数据，如加载时间、内存使用情况、CPU使用情况等。这些数据对于性能优化非常有价值。

示例代码：

import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.events.Event;
import org.openqa.selenium.devtools.events.PerformanceMetric;// 创建DevTools实例
DevTools devTools = new Chrome().getDevTools();// 监听性能指标事件
devTools.onPerformanceMetric(new Consumer<Event<PerformanceMetric>>() {@Overridepublic void accept(Event<PerformanceMetric> event) {PerformanceMetric metric = event.getData();System.out.println("Metric Name: " + metric.getName());System.out.println("Value: " + metric.getValue());}
});// 启动DevTools会话
devTools.send(Performance.startProfiling());

2. 获取页面截图

通过DevTools，开发者可以获取页面的截图，并将其保存为图片文件。这种功能对于自动化测试中的视觉验证非常有用。

示例代码：

import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.domain.browser.Target;// 创建DevTools实例
DevTools devTools = new Chrome().getDevTools();// 获取当前窗口截图
String screenshot = devTools.send(Browser.getViewport()).getScreenshot();// 将截图保存为PNG文件
File file = new File("screenshot.png");
Files.write(file.toPath(), Base64.getDecoder().decode(screenshot));

3. 模拟设备和屏幕

DevTools允许开发者模拟不同的设备和屏幕分辨率。这种功能对于响应式设计测试非常有用。

示例代码：

import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.domain.browser.Viewport;// 创建DevTools实例
DevTools devTools = new Chrome().getDevTools();// 设置视口
Viewport viewport = new Viewport();
viewport.setDeviceScaleFactor(2);
viewport.setDeviceWidth(375);
viewport.setDeviceHeight(667);// 发送设置指令
devTools.send(Browser.setDeviceMetrics(viewport));

4. 自定义浏览器行为

DevTools允许开发者自定义浏览器的行为，例如设置浏览器的user agent、模拟网络条件等。这种功能对于跨浏览器测试和网络调试非常有用。

示例代码：

import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.domain.network.NetworkConditions;// 创建DevTools实例
DevTools devTools = new Chrome().getDevTools();// 设置网络条件
NetworkConditions conditions = new NetworkConditions();
conditions.setOffline(true);
conditions.setLatency(1000);
conditions.setDownloadThroughput(50000);// 发送网络条件设置指令
devTools.send(Network.setNetworkConditions(conditions));

5. 调试和分析

DevTools提供了丰富的调试和分析工具，例如堆栈跟踪、JavaScript执行、资源加载分析等。开发者可以利用这些工具来调试自动化测试脚本，或者分析浏览器的行为。

示例代码：

import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.domain.runtime.Runtime;// 创建DevTools实例
DevTools devTools = new Chrome().getDevTools();// 执行JavaScript代码
String script = "console.log('Hello from DevTools!');";
devTools.send(Runtime.evaluate(script));// 获取执行结果
String result = devTools.send(Runtime.getHeapStatistics()).getUsedHeapSize();
System.out.println("Used Heap Size: " + result);

Selenium 4中的DevTools集成

Selenium 4对DevTools进行了深度集成，使得开发者可以更方便地使用这些功能。在Selenium 4中，DevTools被设计为一个独立的模块，开发者可以根据需求选择是否加载它。

启用DevTools

在Selenium 4中，启用DevTools非常简单。开发者只需要创建一个DevTools实例即可开始使用。

示例代码：

import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.devtools.DevTools;// 创建Chrome选项
ChromeOptions options = new ChromeOptions();// 启用DevTools
options.addArguments("--remote-debugging-port=9222");// 创建Chrome驱动
ChromeDriver driver = new ChromeDriver(options);// 获取DevTools实例
DevTools devTools = driver.getDevTools();

使用DevTools API

Selenium 4提供了丰富的DevTools API，涵盖了从浏览器控制到性能分析、从网络调试到设备模拟等多个方面。

示例代码：

import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.domain.browser.Browser;
import org.openqa.selenium.devtools.domain.runtime.Runtime;// 获取浏览器版本信息
String version = devTools.send(Browser.getVersion());
System.out.println("Browser Version: " + version);// 获取运行时信息
String runtimeInfo = devTools.send(Runtime.getRuntimeInfo());
System.out.println("Runtime Info: " + runtimeInfo);

自定义DevTools命令

除了使用Selenium提供的API，开发者还可以通过DevTools发送自定义的CDP命令。这种功能对于需要低级别控制的场景非常有用。

示例代码：

import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.domain.custom.CustomCommand;// 创建自定义命令
CustomCommand<String> command = new CustomCommand<>("Runtime.evaluate", request -> {request.body().put("expression", "window.innerWidth");request.body().put("contextId", 1);
});// 发送自定义命令
String result = devTools.send(command);
System.out.println("Custom Command Result: " + result);

总结

org.openqa.selenium.devtools.DevTools是Selenium 4版本中一个非常强大的功能模块。通过它，开发者可以直接与浏览器的DevTools协议交互，获取更底层的浏览器控制能力和更灵活的操作方式。无论是自动化测试、性能优化，还是网络调试，DevTools都能提供丰富的功能支持。