Selenoid项目中访问浏览器开发者工具的技术指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00039/article/details/148784712

Selenoid项目中访问浏览器开发者工具的技术指南

selenoid Selenium Hub successor running browsers within containers. Scalable, immutable, self hosted Selenium-Grid on any platform with single binary. 项目地址: https://gitcode.com/gh_mirrors/se/selenoid

概述

在现代Web自动化测试中，直接访问浏览器开发者工具(DevTools)的能力变得越来越重要。Selenoid作为一款轻量级的Selenium容器实现，提供了对Chrome开发者工具的代理功能，使测试人员能够在自动化测试过程中直接与浏览器DevTools交互。

功能特性

Selenoid的DevTools访问功能具有以下特点：

协议支持：目前仅支持Chrome开发者工具协议
版本要求：需要Chrome 63及以上版本，建议使用最新版Chrome
访问方式：通过WebSocket或HTTP协议访问

访问机制详解

Selenoid将Chrome开发者工具API代理到浏览器容器中。对于每个运行的Selenium会话，可以通过特定URL格式访问DevTools功能。

基本URL格式

<协议类型>://selenoid服务器地址:4444/devtools/<会话ID>/<方法>

其中：

协议类型可以是ws(WebSocket)或http
会话ID是当前Selenium会话的标识符
方法是具体的DevTools功能端点

支持的方法列表

| 方法路径 | 协议类型 | 功能描述 | |---------|---------|---------| | /browser | WebSocket | 开发者工具浏览器级WebSocket连接 | | / | WebSocket | /browser的别名 | | /page | WebSocket | 当前页面(目标)的WebSocket连接(适用于单标签页场景) | | /page/<目标ID> | WebSocket | 指定页面(目标)的WebSocket连接(可连接特定浏览器标签页) | | /json/protocol | HTTP | 获取支持的开发者工具协议方法列表(JSON格式) |

使用示例

连接当前页面WebSocket的示例URL：

ws://selenoid.example.com:4444/devtools/会话ID/page

实际应用示例

以下是一个结合Webdriver.io和Puppeteer使用DevTools API的完整示例：

const { remote } = require('webdriverio');
const puppeteer = require('puppeteer-core');
const host = 'selenoid.example.com';

(async () => {
    // 初始化Webdriver.io浏览器实例
    const browser = await remote({
        hostname: host,
        capabilities: {
            browserName: 'chrome',
            browserVersion: '75.0'
        }
    });

    // 通过Puppeteer连接到DevTools
    const devtools = await puppeteer.connect(
        { browserWSEndpoint: `ws://${host}:4444/devtools/${browser.sessionId}` }
    );
    
    // 创建新页面并操作
    const page = await devtools.newPage();
    await page.goto('http://aerokube.com');
    await page.screenshot({path: 'screenshot.png'});
    const title = await page.title();

    console.log(title);

    // 清理资源
    await devtools.close();
    await browser.deleteSession();

})().catch((e) => console.error(e));

技术要点解析

混合使用Webdriver.io和Puppeteer：这个示例展示了如何将传统的WebDriver协议与DevTools协议结合使用，发挥各自优势。
会话管理：通过browser.sessionId获取当前会话ID，这是连接DevTools的关键。
Puppeteer-core使用：使用puppeteer-core而非完整版Puppeteer，可以避免下载Chromium，因为我们已经通过Selenoid提供了浏览器实例。
资源清理：示例中展示了正确的资源释放顺序，避免内存泄漏。