Electron 结合 Selenium + chromedriver 驱动服务实现浏览器多开

news2024/11/25 4:40:15

背景

在调研浏览器多开的过程中，electron 有自带的 browserview，webview，但是上面两个受制于 electron 内核版本限制，升级不够灵活，对新版的网页支持可能不及时，甚至不兼容，必须通过发布新的客户端版本才能解决，此外，这两个组件本身也不稳定，经常内存溢出，如果能改为 chrome 自己开发的浏览器内核来运行，则以上问题解决起来都不会特别吃力，所以才有了对 Electorn 控制浏览器多开的技术调研。

思路

在开发爬虫时，我了解导 selenium 和 chromedriver，其中 selenium 有个 node.js 调用库（还有 php，python，java 等包），其中 selenium 是一个 webdriver 协议，webdriver 是什么？和 chromedriver 有什么区别？这个后续再说。selenium 基于 webdriver 协议并且封装了 webdriver 协议，用以操控浏览器，而 chromedriver 负责桥接 selenium 和 chrome 浏览器，这样就实现了浏览器多开。
在研究爬虫时，还发现 puppeteer 库，这个库就比较特殊，它不依赖 chromedriver，那就意味着 puppeteer 自己实现了一套 chromedriver 用来管理 chrome，同时自己还实现了 selenium 的封装，如果将 puppeteer 打包到 electron 包中，那就要解决 chrome 执行路径的问题。

实现

puppeteer 这个还没跑通，这个也没有现成的案例，github 有个库，但是只支持 node.js 18，而我用的 electron 依赖 node.js 16，此外还需要 puppeteer 的版本和 electron 的版本对应，这个处理起来比较复杂，也没有人给予一个完整可运行的 demo 包，因为暂时放弃这方面的探索。

electron 官网中讲了 selenium 和 chromedriver

这是一个比较古老的文档，electron 更新频率过快，很多库都懒得跟进 electron，选择 electron 本身就是个大坑，要面对的问题很多，要求掌握的知识也很多，还解决不了这些基础的 C++问题

Selenium 和 WebDriver | Electron

webdriver vs chromedriver 的区别

WebDriver

WebDriver 是一种定义了如何通过代码来操作浏览器的接口。它是一个规范（或者说协议），由 W3C 制定，旨在通过统一的接口与各种浏览器进行交互。WebDriver 允许开发人员编写代码来控制浏览器执行各种操作，如打开网页、点击按钮、输入文本等。

ChromeDriver

ChromeDriver 是 WebDriver 的一个具体实现，它专门用于与 Google Chrome 浏览器进行交互。ChromeDriver 充当一个独立的服务，用于接收 WebDriver 的命令并将这些命令转发给 Chrome 浏览器，从而控制浏览器的行为。它是由开发 Chromium 和 WebDriver 的团队维护的。

electron 文档讲的乱乱的

看上面的 electron 你会很懵逼，对方讲了很多套路和方法，但由于一些东西缺失具体的演示，你根本不知道干嘛的

electron 文档核心点解析

开头配置 Spectron没啥用，你可以直接忽略，看起来这个库都被放弃了
紧接着 Electron 给了两种 webdriver 实现协议，一种是WebDriverJs,一种是WebdriverIO,我一开始还以为这两者是顺序关系呢，其实是互斥的关系，是两种独立实现方式，第一种比较像 selenium，库名字也有 selenium，npm install selenium-webdriver, 第二种，ChatGPT-4o 说是一种简化写法，类似于 js 和 jquery 的关系，但其实第一种就够用了。
其中讲到的 npm install electron-chromedriver也是一种误导，其实就是 chromedriver，你装这个还会搞不清楚 chromedriver 和 chrome 两者之间的版本问题，但这里的 electron-chromedriver 应该是可以驱动 electron 自带的 chrome 浏览器的，但本文并不想探讨这个问题。

如何找到 chromedriver 以及对应的 chrome

开发爬虫最麻烦的点，就在于 chromedriver 和 chrome 的版本对应关系，这会让新手搔头抓耳，不过早有一批人整理了这些东西，我分享在这里

https://googlechromelabs.github.io/chrome-for-testing/latest-versions-per-milestone-with-downloads.json

非常 nice，这个 json 查看谷歌扩展是哪个？

GitHub - tulios/json-viewer: It is a Chrome extension for printing JSON and JSONP.

还有很多风格可以选择，推荐给大家，用这个查看在线 json 事半功倍

chromedriver 是可以直接启动的

下载好之后，找到路径，在地址栏输入 cmd，按回车，即可打开控制台

默认开启 9515 端口，至于启动那个 chrome，这是 selenium 那边控制的，chromedriver 会根据你给的 chrome.exe 去找到 chrome，来执行命令

我们将 119 版本的 chrome 下载下来放到 D 盘

在 Electron 主进程中编写一个启动函数

在 ready 事件中调用

function openChrome(){
    const webdriver = require('selenium-webdriver')

    const driver = new webdriver.Builder()
        // "9515" 是ChromeDriver使用的端口
        .usingServer('http://localhost:9515')
        .withCapabilities({
            'goog:chromeOptions': {
                // 这里填您的Electron二进制文件路径。
                binary: "D:\\chrome-win64\\chrome.exe",
                args: ['--no-sandbox', '--enable-chrome-browser-cloud-management']
            },
        }).forBrowser('chrome').build()

    driver.get('https://www.google.com')
    driver.findElement(webdriver.By.name('q')).sendKeys('webdriver')
    driver.executeScript(`
        setTimeout(function() {
            var inputElement = document.querySelector('input[name="btnK"]');
            if (inputElement) {
                inputElement.click();
            } else {
                console.error('元素未找到');
            }
        }, 3000);
    `);
}
app.on('ready', openChrome)

运行脚本 npm run dev就可以拉起浏览器了，通过给于不同的用户目录，就可以打开多个独立的浏览器同时运行，如果你将目录更换为最新用户自带的 chrome 浏览器地址也可以，不过这样